如何jQuery实现图片轮播的同时左右按钮可以实现切换？

Posted 2023-04-26

轮播效果已经实现，如何实现在自动轮播的同时左右按钮做到切换效果

参考技术A 建议，在当前轮播图的div添加类active，设置.active display：block；，.bandisplay:none;;这样可以通过添加或移除active就可以了；这样以下就比较方便很多，要不然又要做循环，麻烦（swiper插件做轮播效果不错）
$(".left").click(function()

var $index = $(".ban").hasClass("active").index();//获取当前轮播图的下标
if($index === 0 ) //当前为第一张轮播图
$(".ban").eq($(".ban").length-1).addClass("active)
.siblings(".ban").removeClass("active");
//这里写成你自动切换的代码，我这里只是一个无动态切换效果的方法
else
$(".ban").eq($index-1).addClass("active)
.siblings(".ban").removeClass("active");
)
$(".right").click(function()

var $index = $(".ban").hasClass("active").index();//获取当前轮播图的下标
if($index === ($(".ban").length-1) ) //当前为最后一张轮播图
$(".ban").eq($(".ban").length-1).addClass("active)
.siblings(".ban").removeClass("active");
//这里写成你自动切换的代码，我这里只是一个无动态切换效果的方法
else
$(".ban").eq($index+1).addClass("active)
.siblings(".ban").removeClass("active");
)
//大体思路是这样了，代码可能有个别字母写得不对，毕竟是手敲的，但是大概思路是这样了

JQuery实现简单的轮播图基本思路

demo点这里

需要达到的效果

常见的轮播图组件
自动翻页，左右跳转按钮，下方是index
index显示了当前图片位置，左右按钮就是更改当前位置
第一个版本暂时不定义api了，写简单点

大概思路

用banner隐藏超出部分的图片
imageList是inline
要显示的话就float到标签位置

首先是html

从sublime换了webstorm，自带了emmet插件
也就是可以这样写
div.wrapper>div.banner>ul.imageList>(li>img)*4^img+img>ul.indexList>(li>img)*4
tab之后就是这个效果了：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<div class="wrapper"> <div class="banner"> <ul class="imageList"> <li><img src="" alt=""></li> <li><img src="" alt=""></li> <li><img src="" alt=""></li> <li><img src="" alt=""></li> </ul> <img src="" alt=""><img src="" alt=""> <ul class="indexList"> <li><img src="" alt=""></li> <li><img src="" alt=""></li> <li><img src="" alt=""></li> <li><img src="" alt=""></li> </ul> </div> </div>

 

emmet还是挺方便的

css

为了使banner遮挡其他元素，overflow:hidden
然后 imgList的li 全部都float:left,display:inline
这样的话就可以在后面左右滑了
左右按键和indexList需要用position:absolute来定位
这俩就用绝对值50%再margin一个负值来居中

jquery

主要是通过一个changeTo()来完成到指定图片的跳转
三个直接事件：自动换、点击左右、点击indexList
都是对changeTo()的不同调用：

1 2 3 4 5

function changeTo(num){ var goLeft = num * 800; $(".imgList").animate({left: "-" + goLeft + "px"},500); $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn"); }

 

还有就是通过设置全局变量的方法来添加一个循环：

1 2 3 4 5 6 7 8

var autoChange = setInterval(function () { if(index<3){ index++ }else { index=0 } changeTo(index) },1000);

 

js代码中需要用到重新开始循环（如wrapper:hover）
只需要重新为autoChange赋相同的值即可再开始循环