基于jquery可配置循环左右滚动例子

178 阅读 0 评论 118 点赞

我是靠谱客的博主认真猫咪，最近开发中收集的这篇文章主要介绍基于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>可配置横栏滚动Demo</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
* { margin:0; padding:0;} 
body { font-size:12px;} 
</style> 
<script src="jquery-1.4.1.js" type="text/javascript"></script> 
<style type="text/css"> 
#scrollable { 
background-color:#efefef; 
border:1px solid #ddd; 
padding:10px 8px; 
width:523px; 
height:65px; 
margin-top:30px; 
} 
div.items { 
height:66px; 
margin-left:8px; 
float:left; 
width:475px !important; 
} 
div.items a { 
display:block; 
float:left; 
margin-right:8px; 
width:88px; 
height:66px; 
background:#BBB; 
font-size:50px; 
color:#ccc; 
line-height:66px; 
text-decoration:none; 
text-align:center; 
cursor:pointer; 
} 
div.items a:hover { 
color:#999; 
} 
div.items a.active { 
background-position:-174px 0; 
color:#555; 
cursor:default; 
} 
a.prev, a.next { 
background:url(left.png) no-repeat 0 0; 
display:block; 
width:18px; 
height:18px; 
float:left; 
margin:22px 0 0 0; 
cursor:pointer; 
} 
a.next { 
background-image:url(right.png) 
} 
a.prev:hover { 
background-position:0 -18px; 
} 
a.next:hover { 
background-position:0 -18px; 
} 
</style> 
<script language="javascript" type="text/javascript"> 
(function ($) { 
$.fn.extend({ 
Scroll: function (opt, callback) { 
if (!opt) var opt = {}; 
var _btnleft = $(opt.left); 
var _btnright = $(opt.right); 
var timerID; 
var _this = this.eq(0).find("div").eq(1); 
var lineW = _this.find("a:first").width(), //获取列宽 
line = opt.line ? parseInt(opt.line, 10) : parseInt(_this.width() / lineW, 10), //每次滚动的列数，默认为一屏，即父容器列宽 
speed = opt.speed ? parseInt(opt.speed, 10) : 500; //滚动速度，数值越大，速度越慢（毫秒） 
timer = opt.timer ? parseInt(opt.timer, 10) : 3000; //滚动的时间间隔（毫秒） 
if (line == 0) line = 1; 
var upWidth = 0 - line * lineW; 
//滚动函数 
var scrollLeft = function () { 
if (!_this.is(":animated")) { 
_this.animate({ 
left: upWidth 
}, speed, function () { 
for (i = 1; i <= line; i++) { 
_this.find("a:first").appendTo(_this); 
} 
_this.css({ left: 0 }); 
}); 
} 
} 
var scrollRight = function () { 
if (!_this.is(":animated")) { 
for (i = 1; i <= line; i++) { 
_this.find("a:last").show().prependTo(_this); 
} 
_this.css({ left: upWidth }); 
_this.animate({ 
left: 0 
}, speed, function () { 
}); 
} 
} //Shawphy:自动播放 
var autoPlay = function () { 
if (timer) timerID = window.setInterval(scrollLeft, timer); 
}; 
var autoStop = function () { 
if (timer) window.clearInterval(timerID); 
};　　　　　　　　　　　　//鼠标事件绑定 
_this.hover(autoStop, autoPlay).mouseout(); 
_btnleft.css("cursor", "pointer").click(scrollLeft).hover(autoStop, autoPlay); 
_btnright.css("cursor", "pointer").click(scrollRight).hover(autoStop, autoPlay); 
} 
}) 
})(jQuery); 
$(document).ready(function () { 
$("#scrollable").Scroll({ line: 5, speed: 500, timer: 3000, left: ".prev", right: ".next"}); 
}); 
</script> 
</head> 
<body> 
<div style="margin:0 auto;width:500px;"> 
<div id="scrollable"> 
<a class="prev" href="#"></a> 
<div class="items" style="overflow: hidden; position: relative; visibility: visible; width: 478px;"> 
<div style="position: absolute; width: 200000em; left: 0px;" class="scrollable_demo"> 
<a>1</a> 
<a>2</a> 
<a>3</a> 
<a>4</a> 
<a>5</a> 
<a>6</a> 
<a>7</a> 
<a>8</a> 
<a>9</a> 
<a>10</a> 
<a>11</a> 
<a>12</a> 
<a>13</a> 
<a>14</a> 
<a>15</a> 
</div> 
<br clear="all"/> 
</div> 
<a class="next" href="#"></a> 
</div> 
</div> 
</body> 
</html> 