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
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

查看全文

相关阅读:
登录注册数据库建立
 AngularJS学习小结
 响应布局
 JQuery内容从左边框移到右边框
 Jquery图片轮播和CSS图片轮播
 Bootstrap栅格系统
 用Javascript大批量收集网站数据
 如何用CSS快速布局（一）—— 布局元素详细
 怎么应用vertical-align，才能生效？
line-height系列（二）——对行内元素（文字、图片、兄弟元素）、块级元素设置line-height后的表现

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