jquery 轮播图实例 | 易学教程

实现效果：1、图片每2秒钟切换1次。

2、当鼠标停留在整个页面上时，图片不进行轮播。

3、当点击右下角的小球时，出现该选项的对应图片，而且切换页选项的背景颜色发生相应的变化。

4、当图片发生轮播切换时，在不点击小球前提下，相应的小球背景颜色也自动发生变化。

index.html

<!DOCTYPE html>
<html>
<head>
    <title>jQuery实现轮播图</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="main">
<h3>jQuery实现轮播图</h3>
<!-- 图片轮播 -->
    <div class="banner">
        <img src="img/1.jpg" />
        <img src="img/2.jpg" />
        <img src="img/3.jpg" />
        <img src="img/4.jpg" />
        <img src="img/5.jpg" />
    <!-- 上一张、下一张按钮 -->
    <a href="javascript:void(0)" class="button prev"></a>
    <a href="javascript:void(0)" class="button next"></a>
         <!-- 圆点导航 -->
    <div class="dots">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    </div>
</div>
</body>
</html>

style.css

*{margin: 0;padding: 0;}
body{font-family: " Microsoft YaHei";}
.main{margin:30px auto;width:1200px;text-align: center;}
h3{text-align: center;width:1200px;position: relative;}
/*banner图*/
.banner{width:1200px; height:460px;overflow: hidden;margin-top: 30px;position: relative;border: 10px solid #bbb; }
.banner img{vertical-align: bottom;position: absolute;top: 0;left: 0;/*display: none;*/}
/*.banner img.slide-active{display: block;}*/
/*切换按钮*/
.button{position: absolute;width:40px;height:80px;left:0;top:50%;margin-top:-40px;}
.prev{background:url(../img/pre2.png) no-repeat center center;}
.next{left: auto;right: 0;background:url(../img/pre.png) no-repeat center center;}
.button:hover{background-color: #333;opacity: 0.6;filter: alpha(60);}
/*切换小圆点*/
.dots{position: absolute;right: 0;bottom: 20px;text-align: right;margin-right: 20px;}
.dots span{display: inline-block;width: 12px;height: 12px;border-radius: 50%;line-height:12px;background-color: rgba(7,17,27,0.4);box-shadow:0 0 0 2px rgba(255,255,255,0.9) inset;margin-right: 8px;cursor: pointer;}
.dots span.active{box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;background-color: #fff;}

script.js

$(document).ready(function(){
    var t,count,
        index=0,
        len=$(".banner img").length;
        
    //  初始化状态，在第一张
    $(".banner img:not(:first-child)").hide();
    $(".dots span:first-child").addClass("active");
   
   // 滑过鼠标清除定时器,滑开继续
    $(".banner").hover(function(){
        clearInterval(t);
    },
    function(){
        t=setInterval(showAuto, 2000);
    });

    //点击小圆点跳转到相应页面并且小圆点样式随之改变
    $(".dots span").click(function(){
      count=$(this).index();//获取当前点击对象的id属性值
      changOption(count);
    });

    //清除定时器
    if(t){
        clearInterval(t);
        t=null;
    }

    // 每隔两秒自动轮播
    t=setInterval(showAuto, 2000);

    //点击按钮切换
    $(".prev").click(function(){
        count=$(".active").index();
        count--;
        if(count < 0){count=len-1;}
        changOption(count);     
    });
    $(".next").click(function(){
        count=$(".active").index();
        count++;
        if(count > len-1){count=0;}
        changOption(count);
    });

// 封装自动切换的showAuto函数
function showAuto(){
        index++;
        if(index > len-1){index=0;}
    changOption(index);
}

//封装点击小圆点改变背景及自身样式的changeOption()函数
function changOption(curIndex){
   $(".dots span").siblings().removeClass("active");//查找其他子节点并移除类
   $(".dots span").eq(curIndex).addClass("active");//给当前点击的对象添加类
   $(".banner img").filter(":visible").hide().parent().children().eq(curIndex).show();
   index=curIndex;
}

});

来源：https://www.cnblogs.com/leiting/p/7285650.html

标签

轮播

广告条

jquery