Jquery实现左右轮播效果

首先展示下静态布局h5代码，代码非常简单。

　　　　</ul>

　　　　　　</ul>

　　</div>

　　以下代码为样式布局部分。通过先li左浮动，设置ul的overflow值为hidden，将其他图片隐藏。主要结构如下图，黑色框内部分为可见部分。其他部分为不可见。至于为什么多放一张图1，稍后会解释。

css样式

</style>

静态布局后，布局如下图所示

静态布局后，最后开始写入JS代码，实现轮播效果，其他的不说，先上代码

　　　　　　$(".next").click(function(){ //点击右按钮，调用下一张
　　　　　　　　next();
　　　　　　});

　　　　　　$(".prev").click(function(){ //点击左按钮，调用上一张
　　　　　　　　prev();
　　　　　　})

　　
　　　　　　function next(){ //右按钮
　　　　　　　　index++;
　　　　　　　　if(index > 2){
　　　　　　　　/*

　　　　　　　　　　当图片到最后一张时跳回第一张，

　　　　　　　　　　本例中在最后一张中放入了第一张的图片，

　　　　　　　　　　为实现无缝切换图片的效果。
　　　　　　　　*/
　　　　　　　　　　$(".pic-list").animate({left:-(index)*600},500);
　　　　　　　　　　index = 0;
　　　　　　　　　　$(".pic-list").animate({left:0},0);
　　　　　　　　}

　　　　　　　　$(".pic-list").animate({left:-index*600},500);
　　　　　　　　iconHover(index);
　　　　　　}

　　　　　　
　　　　　　function auto(){
　　　　　　　　timer = setInterval(function(){ //设置自动播放的定时器
　　　　　　　　　　next();
　　　　　　　　　　iconHover(index);
　　　　　　　　},2000)
　　　　　　}

　　　　　　auto(); //调用auto

　　　　　　$("#slide").mouseover(function(){ //鼠标移入定时器取消
　　　　　　　　　　clearInterval(timer);
　　　　　　　　　　$('.btn').css("opacity",0.5)
　　　　　　})

　　　　　　$("#slide").mouseleave(function(){ //鼠标离开定时器开启
　　　　　　　　　　auto();
　　　　　　　　　　$('.btn').css("opacity",0)
　　　　　　})

　　　　　　//鼠标碰触圆点图标实现图片左右轮播
　　　　　　$(".icon-list li").mouseover(function(){
　　　　　　　　　　var index = $(this).index();
　　　　　　　　　　$(".pic-list").animate({left:-index*600},500);
　　　　　　　　　　iconHover(index);
　　　　　　})

　　　　　　//实现被选图片对应圆点图标索引更新
　　　　　　function iconHover(index){
　　　　　　　　$(".icon-list li").eq(index).addClass("active").siblings().removeClass("active");
　　　　　　}

　　　　})

</script>

https://blog.csdn.net/weixin_39230257/article/details/82431354

巴特西

Jquery实现左右轮播效果

最新文章

热门文章