只是简单的布局，没有美化，时间有限，做了个大致的意思，后面会做一个好看点的，以及使用translate的原理做一个。能够实现选择间隔时间，图片与小图相对应的功能。 css代码 `.img-contain{ margin: 20px auto; width: 400px; overflow: hidden; position: relative; } .inner { position: relative; width: 9999px; left: 0; top: 0; } .innerwraper { float: left; } .clearfix { *zoom: 1; } .clearfix:after { display: block; clear: both; visibility: hidden; content: “”; height: 0; } a { text-decoration: none; } .left-arrow { position: absolute; left: 0; top: 40%; width: 10%; height: 20px; text-align: center; line-height: 30px; font-size: 30px; } .right-arrow { position: absolute; right: 0; top: 40%; width: 10%; height: 20px; font-size: 30px; text-align: center; line-height: 30px; } .page-corner{ position: absolute; bottom: 5px; left:0; width: 100%; text-align: center; } .page-corner span{ display: inline-block; width: 20px; height: 20px; background-color: yellow; line-height: 30px; border-radius: 50%; cursor: pointer; } .page-corner .active{ background-color: red; color: #FFFFFF; } .control{ width:400px; overflow:hidden; margin:10px auto; } .sm-img-container{ width:1024px; overflow:hidden; margin:10px auto;
} .sm-img-container ul{ width:1024px; padding:0px; margin:0px; list-style-type:none; } .sm-img-container ul li{ border:1px solid transparent; float:left; } .sm-img-container ul li.img-active{ border-color:yellow; }`
html代码
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href=""> </head> <body> <div id="wrapper"> <div class="row wrapper"> <div class="img-contain"> <div class="inner clearfix"> <div class="innerwraper"><img src="static/onlineservice/img/p1.jpg" alt="" /></div> <div class="innerwraper"><img src="static/onlineservice/img/p2.jpg" alt="" /></div> <div class="innerwraper"><img src="static/onlineservice/img/p3.jpg" alt="" /></div> <div class="innerwraper"><img src="static/onlineservice/img/p4.jpg" alt="" /></div> <div class="innerwraper"><img src="static/onlineservice/img/p5.jpg" alt="" /></div> <div class="innerwraper"><img src="static/onlineservice/img/p6.jpg" alt="" /></div> <div class="innerwraper"><img src="static/onlineservice/img/p7.jpg" alt="" /></div> <div class="innerwraper"><img src="static/onlineservice/img/p8.jpg" alt="" /></div> <div class="innerwraper"><img src="static/onlineservice/img/p1.jpg" alt="" /></div> </div> <div class="page-corner"> <span class="active"></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <a href="javascript:void(0)" class="left-arrow"><</a> <a href="javascript:void(0)" class="right-arrow">></a> </div> <div class="control"> <form> <select id="time"> <option>1s</option> <option>3s</option> <option>5s</option> </select> <button type="button" class="btn">播放</button> </form> </div> <div class="sm-img-container"> <ul> <li class="img-active"><img src="static/onlineservice/img/a1.jpg"></li> <li><img src="static/onlineservice/img/a2.jpg"></li> <li><img src="static/onlineservice/img/a3.jpg"></li> <li><img src="static/onlineservice/img/a4.jpg"></li> <li><img src="static/onlineservice/img/a5.jpg"></li> <li><img src="static/onlineservice/img/a6.jpg"></li> <li><img src="static/onlineservice/img/a7.jpg"></li> <li><img src="static/onlineservice/img/a8.jpg"></li> </ul> </div> </div> </div> <script src="static/onlineservice/js/jquery-2.1.1.js"></script> <script type="text/javascript"> var innerGroup = $(".innerwraper"); var leftArrow = $(".left-arrow"); var rightArrow = $(".right-arrow"); var spanGroup = $(".page-corner span"); var imgWidth = $(".innerwraper img:first-child").eq(0).width(); var lis=$(".sm-img-container ul li"); var _index = 0; var timer = null; setTime(); rightArrow.on("click", function() { //右箭头 clearInterval(timer); _index++; if(_index==innerGroup.length){ _index=1; } selectPic(_index); }) leftArrow.on("click", function() { //左箭头 clearInterval(timer); if (_index == 0) { _index = innerGroup.length-1; } _index--; selectPic(_index); }) spanGroup.on("click", function() { //导航切换 _index = spanGroup.index($(this)); selectPic(_index); }) //图片切换 lis.on("click",function(){ _index=lis.index($(this)); selectPic(_index); }) $(".img-contain").hover(function() { //鼠标移入 clearInterval(timer); }, function() { setTime(); }); $(".sm-img-container ul").hover(function() { //鼠标移入 clearInterval(timer); }, function() { setTime(); }); function setTime(){ //设置时间间隔 var timeout=parseInt($("#time option:selected").text())*1000; console.log(timeout); timer = setInterval(go, timeout); } function go() { //计时器的函数 _index++; if(_index==innerGroup.length){ _index=1; } selectPic(_index); } function selectPic(num) { $(".page-corner span").eq(num).addClass("active").siblings().removeClass("active"); $(".sm-img-container ul li").eq(num).addClass("img-active").siblings().removeClass("img-active"); $(".inner").animate({ left: -num * imgWidth, }, 100,function(){ if(num==innerGroup.length-1){ $(".inner").css("left","0"); $(".sm-img-container ul li").eq(0).addClass("img-active").siblings().removeClass("img-active"); $(".page-corner span").eq(0).addClass("active").siblings().removeClass("active"); } }); } </script> </body>js代码包含在html中了
