jquery图片滚动插件

<!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>jQuery Seamless Image Horizontal Scrolling</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript"> jQuery.fn.imageScroller = function(params) { var p = params || { next: "buttonNext", prev: "buttonPrev", frame: "viewerFrame", child: "a", auto: true }; var _btnNext = $("#" + p.next); var _btnPrev = $("#" + p.prev); var _imgFrame = $("#" + p.frame); var _child = p.child; var _auto = p.auto; var _itv; var turnLeft = function() { _btnPrev.unbind("click", turnLeft); if (_auto) autoStop(); _imgFrame.animate({ marginLeft: -95 }, 'fast', '', function() { _imgFrame.find(_child + ":first").appendTo(_imgFrame); _imgFrame.css("marginLeft", 0); _btnPrev.bind("click", turnLeft); if (_auto) autoPlay(); }); }; var turnRight = function() { _btnNext.unbind("click", turnRight); if (_auto) autoStop(); _imgFrame.find(_child + ":last").clone().show().prependTo(_imgFrame); _imgFrame.css("marginLeft", -95); _imgFrame.animate({ marginLeft: 0 }, 'fast', '', function() { _imgFrame.find(_child + ":last").remove(); _btnNext.bind("click", turnRight); if (_auto) autoPlay(); }); }; _btnNext.css("cursor", "hand").click(turnRight); _btnPrev.css("cursor", "hand").click(turnLeft); var autoPlay = function() { _itv = window.setInterval(turnLeft, 3000); }; var autoStop = function() { window.clearInterval(_itv); }; if (_auto) autoPlay(); }; </script> <style type="text/css"> *{ list-style: none;font-size: 12px; padding: 0;margin: 0;} #list li{width: 90px; height: 18px;line-height: 18px;text-align: center;padding: 41px 0;float: left;margin: 0 5px;background-color: Aqua;} #btnPrev, #btnNext, #listBox{float: left;} #btnPrev, #btnNext{width: 30px;height: 18px;line-height: 18px;padding: 41px 0;background: #ff9;text-align: center;} #listBox{width: 400px;height: 100px;overflow: hidden;background: #000;} #container{width: 460px;height: 100px;background: red; position: absolute;} </style> <script type="text/javascript"> $(function () { $("#listBox").imageScroller({ next: "btnNext", prev: "btnPrev", frame: "list", child: "li", auto: true }); }); </script> </head><body> <div id="container"> <div style="" id="btnNext" title="Previous"> << </div> <div id="listBox"> <ul id="list"> <li>003</li> <li>004</li> <li>005</li> <li>006</li> <li>007</li> <li>008</li> <li>009</li> <li>001</li><li>002</li></ul> </div> <div style="" id="btnPrev" title="Next"> >> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

ps:IE浏览器下，运行后，请刷新页面看效果

这篇文章由濯焰发表于2010-7-30 14:22:44
原文地址 http://www.xumin.info/index.php/archives/574
有必要的话，你可以收藏/分享一下
更多濯焰的文章»

« Android与iPhone应用程序界面布局对比产品经理面孔第九期人物：西祠胡同谷巍 »

ITFeed

jquery图片滚动插件

更多荣誉成员...