jQuery无缝图片横向(水平)/竖向(垂直)滚动

zoukankan html css js c++ java

jQuery无缝图片横向(水平)/竖向(垂直)滚动

jQuery的一个不错的小插件，记性越来越差了，整理一下贴在这里，方便以后Copy & Paste

<!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 type="text/javascript" src="http://img.7bazaar.com/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="http://img.7bazaar.com/js/jquery.imageScroller.js"></script> <style type="text/css"> * { list-style: none; font-size: 12px; padding: 0; margin: 0; } #container { 460px; height: 100px; background: red; position: absolute; left: 50%; top: 50%; margin-left: -230px; margin-top: -50px; } #btnPrev, #btnNext, #listBox { float: left; } #btnPrev, #btnNext { 30px; height: 18px; line-height: 18px; padding: 41px 0; background: #ff9; text-align: center; } #listBox { 400px; height: 100px; overflow: hidden; background: #000; } #list li { 90px; height: 90px; line-height: 100px; text-align: center; float: left; background-color: Aqua; overflow: hidden;margin:5px;display:inline } </style> <script type="text/javascript"> $(function () { $("#listBox").imageScroller({ next: "btnNext", prev: "btnPrev", frame: "list", child: "li", auto: false }); }); </script> </head> <body> <div id="container"> <div id="btnNext" title="上一个"> << </div> <div id="listBox"> <ul id="list"> <li>001</li> <li>002</li> <li>003</li> <li>004</li> <li>005</li> <li>006</li> <li>007</li> <li>008</li> <li>009</li> </ul> </div> <div id="btnPrev" title="下一个"> >> </div> </div> </body> </html>

(注:如果点击运行代码后报js错误，请在页面上右击选择编码为utf-8或刷新页面)

上面的jquery.imageScroller.js，如果您不想当成插件来用，里面的代码也可以单独扒出来(麦考林首页就是这么用的.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script> <style type="text/css"> * { padding: 0; margin: 0; border: 0; list-style: none; font-size: 12px; } body{height:100%;} .catalog { position: relative; height: 165px; 226px; overflow: hidden; left: 50%; top:50%; margin-left: -113px; margin-top: -82px; } .catalog .h5 { font-weight: bold; background: #e4e4e4; line-height: 20px; height: 20px; margin-bottom: 5px; text-indent: 5px; } .catalog .imgbox li { 113px; height: 140px; float: left; overflow: hidden; } .catalog .arrow { position: absolute; 90px; height: 19px; top: 1px; right: 0px; _display: inline; } .catalog .arrow li { float: left; } .catalog .arrow a.left { line-height: 15px; text-indent: -99em; 30px; display: block; background: url(http://images.24city.com/jimmy/img/ca-arrow2.gif) no-repeat 0px 0px; height: 19px; overflow: hidden; } .catalog .arrow a.right { line-height: 15px; text-indent: -99em; 30px; display: block; background: url(http://images.24city.com/jimmy/img/ca-arrow2.gif) no-repeat 0px 0px; height: 19px; overflow: hidden; } .catalog .arrow a.left { 50px; background-position: -76px 0px; } .catalog .arrow a.right { background-position: -131px 0px; margin-left: 8px; } .catalog .arrow a.left:hover { background-position: 0px 0px; } .catalog .arrow a.right:hover { background-position: -55px 0px; } </style> </head> <body> <div id="catalog" class="catalog"> <div class="h5"> 最新目录</div> <ul class="imgbox"> <li><a href="#"> <img alt="" src="http://images.24city.com/jimmy/img/mag1.jpg" /></a></li> <li><a href="#"> <img alt="" src="http://images.24city.com/jimmy/img/mag2.jpg" /></a></li> <li><a href="#"> <img alt="" src="http://images.24city.com/jimmy/img/mag3.jpg" /></a></li> <li><a href="#"> <img alt="" src="http://images.24city.com/jimmy/img/mag4.jpg" /></a></li> </ul> <ul class="arrow"> <li><a class="left" title="向左" href="#">向左</a></li> <li><a class="right" title="向右" href="#">向右</a></li> </ul> </div> <script type="text/javascript"> var slideX = { thisUl: $('#catalog ul.imgbox'), btnLeft: $('#catalog a.left'), btnRight: $('#catalog a.right'), thisLi: $('#catalog ul.imgbox li'), init: function () { slideX.thisUl.width(slideX.thisLi.length * 113); slideX.slideAuto(); slideX.btnLeft.click(slideX.slideLeft).hover(slideX.slideStop, slideX.slideAuto); slideX.btnRight.click(slideX.slideRight).hover(slideX.slideStop, slideX.slideAuto); slideX.thisUl.hover(slideX.slideStop, slideX.slideAuto); }, slideLeft: function () { slideX.btnLeft.unbind('click', slideX.slideLeft); slideX.thisUl.find('li:last').prependTo(slideX.thisUl); slideX.thisUl.css('marginLeft', -113); slideX.thisUl.animate({ 'marginLeft': 0 }, 350, function () { slideX.btnLeft.bind('click', slideX.slideLeft); }); return false; }, slideRight: function () { slideX.btnRight.unbind('click', slideX.slideRight); slideX.thisUl.animate({ 'marginLeft': -113 }, 350, function () { slideX.thisUl.css('marginLeft', '0'); slideX.thisUl.find('li:first').appendTo(slideX.thisUl); slideX.btnRight.bind('click', slideX.slideRight); }); return false; }, slideAuto: function () { slideX.intervalId = window.setInterval(slideX.slideRight, 3000); }, slideStop: function () { window.clearInterval(slideX.intervalId); } } $(document).ready(function () { slideX.init(); }) </script> </body> </html>

(注:如果点击运行代码后报js错误，请在页面上右击选择编码为utf-8或刷新页面)

当然，上面的代码稍加改造也能变成垂直滚动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script> <style type="text/css"> * { padding: 0; margin: 0; border: 0; list-style: none; font-size: 12px; } body { height: 100%; } .catalog { position: relative; height: 316px; 113px; overflow: hidden; left: 50%; top: 50%; margin-left: -56px; margin-top: -152px; } .catalog .imgbox { 113px; height: 280px; overflow: hidden; } .catalog .imgbox li { 113px; height: 140px; overflow: hidden; } .catalog .arrow { position: absolute; 52px; height: 19px; top: 1px; right: 0px; _display: inline; } .catalog a.aUp, .catalog a.aDown { display: block; background: #efefef; text-align: center; line-height: 18px; height: 18px; text-decoration: none; } </style> </head> <body> <div id="catalog" class="catalog"> <a href="javascript:void(0)" class="aUp" title="向上">∧</a> <div class="imgbox"> <ul class="imgbox"> <li><a href="#"> <img alt="1" src="http://images.24city.com/jimmy/img/mag1.jpg" /></a></li> <li><a href="#"> <img alt="2" src="http://images.24city.com/jimmy/img/mag2.jpg" /></a></li> <li><a href="#"> <img alt="3" src="http://images.24city.com/jimmy/img/mag3.jpg" /></a></li> <li><a href="#"> <img alt="4" src="http://images.24city.com/jimmy/img/mag4.jpg" /></a></li> </ul> </div> <a href="javascript:void(0)" class="aDown" title="向下">∨</a> </div> <script type="text/javascript"> var slideY = { thisUl: $('#catalog ul.imgbox'), btnUp: $('#catalog a.aUp'), btnDown: $('#catalog a.aDown'), thisLi: $('#catalog ul.imgbox li'), init: function () { slideY.thisUl.width(slideY.thisLi.length * 140); slideY.slideAuto(); slideY.btnUp.click(slideY.slideTop).hover(slideY.slideStop, slideY.slideAuto); slideY.btnDown.click(slideY.slideDown).hover(slideY.slideStop, slideY.slideAuto); slideY.thisUl.hover(slideY.slideStop, slideY.slideAuto); }, slideTop: function () { slideY.btnUp.unbind('click', slideY.slideTop); slideY.thisUl.find('li:last').prependTo(slideY.thisUl); slideY.thisUl.css('marginTop', -140); slideY.thisUl.animate({ 'marginTop': 0 }, 350, function () { slideY.btnUp.bind('click', slideY.slideTop); }); return false; }, slideDown: function () { slideY.btnDown.unbind('click', slideY.slideDown); slideY.thisUl.animate({ 'marginTop': -140 }, 350, function () { slideY.thisUl.css('marginTop', '0'); slideY.thisUl.find('li:first').appendTo(slideY.thisUl); slideY.btnDown.bind('click', slideY.slideDown); }); return false; }, slideAuto: function () { slideY.intervalId = window.setInterval(slideY.slideDown, 3000); }, slideStop: function () { window.clearInterval(slideY.intervalId); } } $(document).ready(function () { slideY.init(); }) </script> </body> </html>

(注:如果点击运行代码后报js错误，请在页面上右击选择编码为utf-8或刷新页面)

作者：菩提树下的杨过
出处：http://yjmyzz.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

查看全文

相关阅读:
古谚、评论与论断、名篇与名言
 重读《西游记》
重读《西游记》
命名之法 —— 时间、季节、地点
 命名之法 —— 时间、季节、地点
 文言的理解 —— 古时的称谓、别称、别名
 文言的理解 —— 古时的称谓、别称、别名
 Oracle GoldenGate for Oracle 11g to PostgreSQL 9.2.4 Configuration
瀑布敏捷文档
 POJ 1325 ZOJ 1364 最小覆盖点集

原文地址：https://www.cnblogs.com/yjmyzz/p/1751226.html