DDR爱好者之家

简单实现轮播图效果的实例
站长资源 2024/11/29 佚名
28 1538
DDR爱好者之家 Design By 杰米

一、要点：

1.页面加载时，图片重合，叠在一起[绝对定位];

2.第一张显示，其它隐藏;

3.设置下标,给下标设置颜色让它随图片移动;

4.鼠标移动到图片上去，显示左右移动图标，鼠标移走，继续轮播;

二、实现代码：

html代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>轮播图</title>
  <link href="css/LunBimg.css" rel="stylesheet" />
  <script src="/UploadFiles/2021-04-02/jquery-1.10.2.min.js">


css代码：





* {
 padding:0px;
 margin:0px;
}

.swapImg {
  position:absolute;
  
}
.btn {
  position:absolute;
  height:90px;
  width:60px;
  background:rgba(0,0,0,0.5);/*设置背景颜色为黑色，透明度为50%*/
  color:#ffffff;
  text-align:center;
  line-height:90px;
  font-size:40px;
  top:155px;/*图片高度400/2-45*/
  cursor:pointer;
  /*display:none;*/
}

.btnRight {
  left:840px;/*图片宽度900-导航宽度60*/
}
#tabs {
  position:absolute;
  top:370px;
  margin-left:350px;
}
.tab {
  height:20px;
  width:20px;
  background:#05e9e2;
  line-height:20px;
  text-align:center;
  font-size:10px;
  float:left;
  color:#ffffff;
  margin-right:10px;
  border-radius:100%;
  cursor:pointer;
}
.bg {
  background:#00ff21;
}





  js代码：





/// <reference path="_references.js" />

var i = 0;//全局变量
//定义一个变量用来获取轮播的过程
var time;
$(function ()
{
  //1.页面加载后,找到Class等于swapImg的第一个对象，让它显示，它的兄弟元素隐藏
  $(".swapImg").eq(0).show().siblings().hide();
  showTime();
  //当鼠标放到下标上显示该图片，鼠标移走继续轮播
  $(".tab").hover(
    function ()
    {
      //获取到当前鼠标所在的下标的索引
      i = $(this).index();
      show();
      //鼠标放上去之后，怎么停止呢？获取到变量的过程，清除轮播，把变量传进去
      clearInterval(time);
    }, function ()
    {
      showTime();
    });

  //要求四，当我点击左右切换
  $(".btnLeft").click(function ()
  {
    //1.点击之前要停止轮播
    clearInterval(time);
    //点了之后，-1
    if (i == 0)
    {
      i =6;
    }
    i--;
    show();
    showTime();
  });
  $(".btnRight").click(function () {
    //1.点击之前要停止轮播
    clearInterval(time);
    //点了之后，-1
    if (i == 5) {
      i = -1;
    }
    i++;
    show();
    showTime();
  });
  

});

function show() {
  //$("#allswapImg").hover(function ()
  //{
  //  $(".btn").show();
  //}, function ()
  //{
  //  $(".btn").hide();
  //});
  //fadeIn(300)淡入，fadeout(300)淡出，过滤时间0.3s
  $(".swapImg").eq(i).fadeIn(300).siblings().fadeOut();
  $(".tab").eq(i).addClass("bg").siblings().removeClass("bg");
}

function showTime()
{
  time = setInterval(function () {
    i++;
    if (i == 6) {
      //只有6张图片，所以i不能超过6，如果i等于6时，我们就让它等于第一张
      i = 0;
    }
    show();
  }, 3000);
}





以上这篇简单实现轮播图效果的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米