实现效果：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; } });