阅读:4018回复:0
jquery 轮播 —— 左右滑动效果图片:lunbo.png 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> .content{ position: relative; width: 500px; height: 280px; border: 2px solid black; overflow: hidden; margin:50px auto; } .content img{ width: 500px; height: 280px; } .displayImg{ width: 1000px; } .displayImg div{ float:left; width: 500px; } #next{ right: 20px; } #prev{ left:20px; } #next,#prev{ position: absolute; width: 50px; height: 50px; text-align: center; line-height: 50px; color:white; background-color: rgba(66,66,66,.6); top:calc(50% - 25px ); } </style> </head> <body> <div class="content"> <div id="next">></div> <div id="prev"><</div> <div class="displayImg" id="displayImg" > <div><img src="img/img_1.png" alt=""></div> <div><img src="img/img_2.png" alt=""></div> </div> </div> <script src="js/jquery.3.4.0.js"></script> <script type="text/javascript"> var imgArr = ["img/img_1.png","img/img_2.png","img/img_3.png","img/img_4.png", "img/img_5.png","img/img_6.png","img/img_7.png","img/img_8.png"]; var current = 0 ; // 显示第一张,即下标为0 var displayImg = $("#displayImg"); // setInterval(next,1000); $("#next").click(next); $("#prev").click(prev); function next(){ displayImg.animate({marginLeft:"-500px"},function(){ // 显示下一张的图片 var index=current+1; if(index==imgArr.length){ index = 0; } current=index; displayImg.find("img").eq(0).attr("src",imgArr[index+1==imgArr.length?0:index+1]); displayImg.append(displayImg.find("div").first()); displayImg.css("marginLeft","0px"); }) } function prev(){ // 把最一个节点加到第一个 displayImg.css("marginLeft","-500px"); var index=current-1; if(index<0){ index = imgArr.length-1; } current=index; displayImg.find("img").last().attr("src",imgArr[index]); displayImg.prepend(displayImg.find("div").last()); displayImg.animate({marginLeft:"0px"}); } </script> </body> </html> |
|
|