轮播原理

轮播图切换算法

最新推荐文章于 2021-06-02 15:34:32 发布

转载最新推荐文章于 2021-06-02 15:34:32 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dudu123/p/9881347.html

本文详细介绍了使用jQuery实现轮播图切换的算法，通过修改ul元素的margin-left属性和利用slice方法来动态调整图片显示，实现左右滑动效果。

初始状态：

1、向左走

1》 ul 就margin-left ：- 小正方形宽度*个数4=792px

2》前面4个要重新添加到后面

3》 ul要拽回来 margin-left：0

具体如下图：

1》ul 就margin-left ：- 小正方形宽度*个数4=792px

2》前面4个要重新添加到后面，预想的效果是下图1，但是实际上是下图2

3》 ul要拽回来 margin-left：0

2、向右走

1> margin-left: - 小正方形宽度*个数4=792px

2> 倒着截取4个 slice（-4），前置追加prepend到ul，追加后ul会被拉回来

3> ul要拽回来 margin-left：0

利用slice截取实现轮播

　　　　　　$(function(){
                $(":button[value*=左]").click(function(){
                    $("ul").css("margin-left","-792px");
                    $("ul").append($("ul li").slice(0,4));//追加到后面
                    $("ul").css("margin-left","0");    
                })
                $(":button[value*=右]").click(function(){
                    $("ul").css("margin-left","-792px");
                    $("ul").prepend($("ul li").slice(-4));//-4表示倒着截取4个，prepend放置到前面
                    $("ul").css("margin-left","0");    
                })
            })