页面幻灯效果在各个平台经常使用, 尤其是左右滑动尤为常见,这里分享一个实例供大家参考
核心点:
通过改变索引序号的大小实现左移或者右移
$(".slides > ul").finish().animate({left:nowIndex*-li_width},1000);
效果如下:
HTML代码:
<div class="slides"> <ul> <li class="green"> 1 </li> <li class="orange"> 2 </li> <li class="red"> 3 </li> </ul> <a href="javascript:;" class="left"> < </a> <a href="javascript:;" class="right"> > </a> </div>
CSS代码:
*{ padding:0; margin:0; } a{ text-decoration: none; } li{ list-style: none; } img{ vertical-align: top; border: none; } body{ font-size: 14px; font-family: '微软雅黑'; } .slides{ width: 300px; height: 250px; position: relative; margin: 50px auto; overflow: hidden; } .slides > ul{ position: absolute; width: max-content; background-color: antiquewhite; } .slides > ul > li{ float: left; width: 300px; height: 250px; line-height: 250px; color:#fff; font-size: 50px; text-align: center; } .slides > ul > li.green{ background-color: green; } .slides > ul > li.red{ background-color: red; } .slides > ul > li.orange{ background-color: orange; } .slides .left,.slides .right{ position: absolute; top: 170px; width: 20px; height: 20px; line-height: 20px; text-align: center; background-color: rgba(0, 0, 0, .3); color: #fff; } .slides .left{ left:10px; } .slides .right{ right: 10px; }
JS代码:
$(function(){ let nowIndex = 0 let li_width = $(".slides > ul > li").width() let nums = $(".slides > ul > li").length function slide(dircetion = "left"){ dircetion == "left" ? nowIndex++ : nowIndex-- if(nowIndex === nums){ //最后一个结束时,先把第一个克隆到最后一份,待移动效果结束,再移除同时迅速移到第一个 $(".slides > ul > li").first().clone().appendTo($(".slides > ul")); $(".slides > ul").finish().animate({left:nowIndex*-li_width},1000,function(){ $(".slides > ul > li").last().remove(); $(".slides > ul").css({left:0}); nowIndex = 0; }) }else if(nowIndex == -1){//到了最左边时,先把最后一个克隆到第一份, 待移动效果结束,再移除,同时移动到最后一个 $(".slides > ul > li").last().clone().prependTo($(".slides > ul")); $(".slides > ul").css({left:-li_width}); $(".slides > ul").finish().animate({left:0},1000,function(){ $(".slides > ul > li").first().remove(); nowIndex = nums-1; $(".slides > ul").css({left:nowIndex*-li_width}); }) } else{ $(".slides > ul").finish().animate({left:nowIndex*-li_width},1000); } console.log('left值',nowIndex*-li_width, 'nowIndex值',nowIndex); } $(".left").click(function(){ //查看左边的图片 slide("right"); }) $(".right").click(function(){ //查看右边图片 slide("left"); }) })
下载文件: