jq实现滑动轮播效果

it2024-06-27 43

1、简单版本（无循环轮播，同时展示多张图片）

https://juejin.im/post/6844903799115497479

2、复杂版本（循环、自动轮播，同时展示一张图片）

效果图

源代码

html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滑动轮播案例</title> <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script> <link href="lunbo2.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <div id="show-area"> <ul>     <li>img1</li> <li>img2</li> <li>img3</li> <li>img4</li> </ul> <div id="button-left"><</div> <div id="button-right">></div> <div id="indicator"></div> </div> </div> <script src="lunbo2.js"></script> </body> </html>

css

*{ padding:0px; margin:0px; border:0px; } li{ list-style-type:none; } /*给a标签去除下划线*/ a{ text-decoration:none; } #wrapper{ margin:20px auto; } #show-area{/*宽度在js代码中设置的*/ height:500px; position:relative; margin:0px auto; overflow:hidden; } /*注意：找bug找了很久，这里自动插入一张，父容器要加上他的宽度(在js代码中动态计算了)，否则怎么显示呢？小问题大解决*/ #show-area ul{ position:relative; right:0; } #show-area ul li{/*宽度在js代码中设置的*/ float:left; height:500px; text-align: center; line-height: 500px; } #show-area ul li:nth-of-type(1){ background-color: #4c3da8; } #show-area ul li:nth-of-type(2){ background-color: #a83c39; } #show-area ul li:nth-of-type(3){ background-color: #8da86f; } #show-area ul li:nth-of-type(4){ background-color: #1492a8; } #show-area ul li:nth-of-type(5){ background-color: #4c3da8; } /*指示器*/ #indicator{ display: flex; justify-content: space-between; width:140px; position:absolute; top:450px; left:0; right: 0; margin: auto; z-index:1; } #indicator div{ height:12px; width:12px; border-radius:12px; background-color:#ccc; float:left; margin-left:5px; opacity:0.9; filter:Alpha(opacity=90);/*为了适应旧的浏览器*/ transition: all .8s; } #button-left,#button-right{ position: absolute; width: 50px; height: 110px; z-index: 2; background-color: #cccccc; font-size: 40px; color: #FFFFFF; text-align: center; line-height: 110px; opacity:0; filter:Alpha(opacity=50);/*为了适应旧的浏览器*/ cursor: default; } #button-left{ top: 180px; left: 0px; } #button-right{ top: 180px; right: 0px; } .onclick{ width: 30px !important; background-color:#FFF !important; }

$(function () { $('#show-area').css({ width:window.screen.width }) $('#show-area ul li').css({ width:window.screen.width }) /*设置鼠标移动到整个show区域则左右按钮显示出来，否则不显示*/ $("#show-area").mouseenter(function () { $("#button-right,#button-left").css({opacity:0.5,transition:'all .5s'}); }); $("#show-area").mouseleave(function () { $("#button-right,#button-left").css({opacity:0,transition:'all .5s'}); }); var i=0; /*假装自己很智能，自动获取一下，在后面left值移动时就可以用它了*/ var imgWidth = $("#show-area ul li").width(); var clone = $("#show-area ul li").first().clone(true); /*copy 第一张的照片并且添加到最后已达到无缝对接的效果*/ $("#show-area ul").append(clone); /*get 所有li的个数,只有length才是属性*/ var size = $("#show-area ul li").length; $('#show-area ul').css({ width:imgWidth*size }) /*step 1: */ //一开始循环添加按钮 //为什么要size - 1？因为最后一张图片只是作一个过渡效果我们显示的始终还是4张图片 //所以添加按钮的时候我们也应该添加4个按钮 for(var j=0;j<size -1 ;j++){ $("#indicator").append("<div></div>"); } $("#indicator div").eq(i).addClass("onclick"); /*step 2: */ //左按钮 $("#button-left").click(function () { toLeft(); }); //右按钮 $("#button-right").click(function () { toRight(); }); /*step 3：*/ //按钮指示器鼠标移出移入事件 $("#indicator div").hover(function () { i = $(this).index(); clearInterval(timer); $("#show-area ul").stop().animate({left:-i * imgWidth}); $(this).addClass("onclick").siblings().removeClass("onclick"); },function () { timer = setInterval(function () { toRight(); },2000) }); //两个方向按钮鼠标移出移入事件 $("#button-left,#button-right").mouseenter(function () { clearInterval(timer); }).mouseleave(function () { timer = setInterval(function () { toRight(); },2000); }); //定时器,注意，这里是最开始启动的，所以呢，这里不设值，会导致页面开始刷新出现错误。 var timer = setInterval(function () { toRight(); },2000); /*step 2-2*/ //左按钮实现的函数 function toLeft(){ //同理，如果当前图片位置是第一张图片我再按一下右按钮那么我们也利用css的快速变换使它的位置来到最后一张图片的位置（size-1），并且让倒数第二张图片滑动进来 i--; if(i==-1){ $("#show-area ul").css({left:-(size - 1)*imgWidth}); i=size-2; } $("#show-area ul").animate({left:-i*imgWidth},1000); $("#indicator div").eq(i).addClass("onclick").siblings().removeClass("onclick"); } /*step2-2:*/ //右按钮的实现函数 function toRight() { i++; /*当前图片为最后一张图片的时候（我们一开始复制并且添加到ul最后面的图片）并且再点击了一次左按钮，这时候我们就利用css的快速转换效果把ul移动第一张图片的位置并且第二张图片滑入达到无缝效果（css的变换效果很快我们肉眼是很难看见的）*/ if(i==size){ $("#show-area ul").css({left:0}); i=1; } $("#show-area ul").stop().animate({left: -i * imgWidth}, 1000); //设置下面指示器的颜色索引 if(i == size-1){ $("#indicator div").eq(0).addClass("onclick").siblings().removeClass("onclick"); }else{ $("#indicator div").eq(i).addClass("onclick").siblings().removeClass("onclick"); } } });

最新回复(0)

jq实现滑动轮播效果

1、简单版本（无循环轮播，同时展示多张图片 ）

2、复杂版本（循环、自动轮播，同时展示一张图片）

效果图

源代码

1、简单版本（无循环轮播，同时展示多张图片）