在之前的demo上，我再修改了一下。
具体添加的内容是：添加多一种效果，让用户可以选择向左滚动还是向右滚动，当然还有其他的效果也可以加进来。但是还没实现。只是将现在做好的发上来，后期再修改了，再写一篇随笔就好了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/jquery.min.js" type="text/javascript"></script> <style type="text/css"> *{ margin:0px; padding:0px;} img{ border:0px;} .home { width:720px; height:420px; margin:0 auto; position:relative; overflow:hidden; } .home_01 { width:720px; height:360px; overflow:hidden !important; position:absolute; top:0px; left:0px; z-index:9999; } .home_01_pic { width:2880px; height:360px; position:absolute; top:0px; left:0px; } .home_01_pic ul li { width:720px; height:360px; display:inline; float:left; } .home_01_pic ul li a img { width:720px; height:360px; } .home_02 { width:720px; height:50px; padding-top:10px; } .home_left { width:30px; height:50px; background:url(images/all.png) -180px -40px no-repeat; float:left; cursor:pointer; } .home_right { width:30px; height:50px; background:url(images/all.png) -210px -40px no-repeat; float:right; cursor:pointer; } .s_Pic { width:660px; height:50px; float:left; } .s_Pic ul li { width:163px; height:50px; float:left; display:inline; text-align:center; } .s_Pic ul li a img { width:130px; height:48px; float:left; display:inline; margin-left:15px; border:1px solid gray; } .on { border:1px solid red !important; } </style> </head> <body> <div class="home"> <div style=" height:360px; width:720px;"></div> <div class="home_01"> <div class="home_01_pic"> <ul class="home_ul"> <li><a href="#"><img src="images/1.jpg" alt="" /></a></li> <li><a href="#"><img src="images/2.jpg" alt="" /></a></li> <li><a href="#"><img src="images/3.jpg" alt="" /></a></li> <li><a href="#"><img src="images/4.jpg" alt="" /></a></li> </ul> </div> </div> <div class="home_02"> <div class="home_left"></div> <div class="s_Pic"> <ul class="smallPic"> <li><a href="#"><img src="images/s1.jpg" alt="" class="simg"/></a></li> <li><a href="#"><img src="images/s2.jpg" alt="" class="simg"/></a></li> <li><a href="#"><img src="images/s3.jpg" alt="" class="simg"/></a></li> <li><a href="#"><img src="images/s4.jpg" alt="" class="simg"/></a></li> </ul> </div> <div class="home_right"></div> </div> </div> <script type="text/javascript"> $(function () { $.fn.scroll = function (options) { $.fn.scroll.options = { effect: "left", //left:向左 top 向上 leftMarquee向上无缝滚动 delayTime: 500,//图片滚动速度 cellWidth:720,//大图片的宽度 cellHeitht:360,//大图片的高度 speed:3000 //图片更换间隔 }; var o = $.extend({}, $.fn.scroll.options, options || {}); var home_pic = $(o.bigPic), small_Pic = $(o.smallPic), leftBtn = $(o.left_btn), rightBtn = $(o.right_btn); var Index = 0, timer = null; //大图片移动函数 var move = function (Index) { switch (o.effect) { case "left": leftMove(Index); break; case "top": topMove(Index); break; } }; //向左滚动函数 var leftMove = function (Index) { home_pic.stop().animate({ left: -(Index * o.cellWidth) + "px" }, o.delayTime, function () { smallPicHide(); smallPicShow(Index); }); }; //向上滚动函数 var topMove = function (Index) { home_pic.css("width", "720px").css("height", "1440px"); home_pic.stop().animate({ top: -(Index * o.cellHeitht) + "px" }, o.delayTime, function () { smallPicHide(); smallPicShow(Index); }); }; //初始化函数 var init = function () { home_pic.hover(function () { clearInterval(timer); }, function () { start(); }).trigger("mouseleave"); }; //开始滚动 var start = function () { timer = setInterval(function () { move(Index); Index++; if (Index > 3) { Index = 0; } }, o.speed); } //小图片显示边框 var smallPicShow = function (Index) { small_Pic.children("li").eq(Index).find(".simg").addClass("on"); } //小图片隐藏边框 var smallPicHide = function () { small_Pic.children("li").find(".simg").removeClass("on"); }; //初始化 init(); //点击向左事件 leftBtn.click(function () { if (Index == 0) { Index = 4; } clearInterval(timer); move(--Index); start(); }); //点击向右事件 rightBtn.click(function () { if (Index == 3) { Index = -1; } clearInterval(timer); move(++Index); start(); }); }; //页面加载 $(window).load(function () { $(".home").scroll({ bigPic: ".home_01_pic", smallPic: ".smallPic", left_btn: ".home_left", right_btn: ".home_right", effect:"left", delayTime:500 }); }); }); </script> </body> </html>
，直接上代码，效果图就不上了。