使用方法

js

$(function(){                var slideBox=$(".slideBox");                var ul =slideBox.find("ul");                var oneWidth=slideBox.find("ul li").eq(0).width();                var num=slideBox.find(".spanBox span");                var length=$(".slideBox ul li").length;                var length02=$(".slideBox ul li").length-1;                var timer=null;                var sw=0;                //每个span绑定click事件，完成切换颜色和动画，以及读取参数值                num.on("click",function(){                    sw=$(this).index();                    ul.animate({                        "right":oneWidth*sw                    });                   $(".spanBox span").removeClass("active");                                       $(".spanBox span").eq(sw).addClass("active");                });                //左右按钮的控制效果                $(".prev").click(function(){                    clearInterval(timer);                    sw++;                    if(sw>length02)                    {                        sw=length02;                    }                    ul.animate({                        "right":oneWidth*sw                    });                     $(".spanBox span").removeClass("active");                  $(".spanBox span").eq(sw).addClass("active");                });                $(".next").click(function(){                    clearInterval(timer);                    sw--;                    if(sw<0)                    {                        sw=0;                    }                    ul.animate({                        "right":oneWidth*sw                    });                   $(".spanBox span").removeClass("active");                  $(".spanBox span").eq(sw).addClass("active");                });                 //定时器的使用，自动开始                timer = setInterval(function (){                sw++;                if(sw==length){sw=0};                num.eq(sw).trigger("click");                },2000);                //选中是去除定时器                $(".slideBox").hover(function(){                clearInterval(timer);                },function(){                timer = setInterval(function (){                sw++;                if(sw==num.length){sw=0};                num.eq(sw).trigger("click");                },2000);                    })            });

本插件的原理不过是加载js以后往页面里插入几个节点，非常简单，使用者可以修改源码来获得自己想要的效果

预览地址：