jQuery實現圖片左右輪播
阿新 • • 發佈：2017-05-11
https src play 頁面 body block relative over 圖片
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> * {margin: 0;padding:0;} div.picdiv {position: relative;width: 1920px;height: 540px;overflow: hidden;} ul.pic li {position: absolute;left:100%;list-style-type: none;} ul.pic li.on{left: 0;} ul.mark {position: absolute;left: 50%;margin-left:-100px;bottom: 10px;} ul.mark li {float: left;width:5px;height: 5px;border-radius: 15px;margin: 0 5px;background-color: red;list-style-type: none;} ul.mark li.on {width: 30px;} div.pre {position: absolute;width: 120px;height:200px;left: 300px;top: 170px;background-color: rgb(13,13,13);cursor: pointer;} div.pre:before {content:"";width: 0;height: 0;position: absolute;border-top:80px solid transparent ;border-right:80px solid #fff;border-bottom:80px solid transparent;left: 15px;top: 25px;display: block;} div.pre:after {content:"";width: 0;height: 0;position: absolute;border-top:80px solid transparent ;border-right:80px solid rgb(13,13,13);border-bottom:80px solid transparent;left: 25px;top: 25px;display: block;} div.next {position: absolute;width: 120px;height: 200px;right: 300px;top: 170px;background-color: rgb(13,13,13);cursor: pointer;} div.next:before {content: "";width: 0;height: 0;position: absolute;border-top:80px solid transparent ;border-left:80px solid #fff;border-bottom:80px solid transparent;right: 15px;top: 25px;} div.next:after {content: "";width: 0;height: 0;position: absolute;border-top:80px solid transparent ;border-left:80px solid rgb(13,13,13);border-bottom:80px solid transparent;right: 25px;top: 25px;} </style> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div class="picdiv"> <ul class="pic"> <li class="on"><img src="image/1.png"></li> <li><img src="image/2.png"></li> <li><img src="image/3.jpg"></li> <li><img src="image/4.jpg"></li> </ul> <div class="pre"></div> <div class="next"></div> </div> <script type="text/javascript"> function picplay(ele,pre,next) { var index=lastindex=0; var pic=$(ele) var prebtn=$(pre) var nextbtn=$(next) tag(pic.length); //創造標簽 $("ul.mark li").mouseover(function(){ //標簽定位圖片 var a=$(this).index() console.log(a) clearInterval(t) play(a) }) $("ul.mark li").mouseout(function(){ autoplay() }) pic.mouseover(function () { clearInterval(t) }) pic.mouseout(function () { autoplay() }) prebtn.click(function () { clearInterval(t) index--; index<0 && (index=3) play(index) }) $(pre,next).mouseout(function () { autoplay() }) nextbtn.click(function () { clearInterval(t) index++; index>pic.length-1&& (index=0) nextplay(index) }) function autoplay() { t=setInterval(function () { index++; index>pic.length-1 && (index=0) play(index) },3000) } autoplay(); function play (a) { index=a pic.eq(a).css("left","100%").stop(true,true).animate({left:"0"},1000) //使用的百分比，在css裏要給出固定的父元素寬度，不然縮小頁面會出現錯誤 pic.eq(lastindex).stop(true,true).animate({left:"-100%"},1000) $("ul.mark li").removeClass("on") $("ul.mark li").eq(a).addClass("on") lastindex=a } function nextplay(a) { index=a pic.eq(a).css("left","-100%").stop(true,true).animate({left:"0"},1000) pic.eq(lastindex).stop(true,true).animate({left:"100%"},1000) $("ul.mark li").removeClass("on") $("ul.mark li").eq(a).addClass("on") lastindex=a } } picplay("ul.pic li","div.pre","div.next"); function tag(len) { //根據圖片數量創造小標簽 var newul=$("<ul>").addClass("mark") for (var i = 0; i < len; i++) { console.log(i) newul.append($("<li>")) } newul.find("li:first").addClass("on") $("div.picdiv").append(newul) } </script> </body> </html>
jQuery實現圖片左右輪播