@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
body {
font-size:12px;
}
/*左右滚动*/
#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;
}
/*上下滚动*/
#scrollDiv {
width: 300px;
height: 25px;
line-height: 25px;
border: #ccc 1px solid;
overflow: hidden;
}
#scrollDiv li {
height: 25px;
padding-left: 10px;
}
js代码
// JavaScript Document
// 左右滚动
(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"
});
});
// 上下滚动
function AutoScroll(obj) {
$(obj).find("ul:first").animate({
marginTop: "-25px"
},
500,
function() {
$(this).css({
marginTop: "0px"
}).find("li:first").appendTo(this);
});
}
$(document).ready(function() {
var myar = setInterval('AutoScroll("#scrollDiv")', 1000);
$("#scrollDiv").hover(function() {
clearInterval(myar);
},
function() {
myar = setInterval('AutoScroll("#scrollDiv")', 1000)
}); //当鼠标放上去的时候,滚动停止,鼠标离开的时候滚动开始
});
html代码
<!-- 左右滚动 -->
<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>
<!-- 上下滚动 -->
<div id="scrollDiv">
<ul>
<li><a href="http://www.sina.com">欢迎浏览新浪网</a></li>
<li><a href="http://www.163.com">欢迎浏览网易</a></li>
<li><a href="http://www.csdn.com">欢迎进入程序员之家</a></li>
<li><a href="http://www.51aspx.com">很好的源代码下载区</a></li>
<li><a href="http://www.msdn.com">msdn</a></li>
<li><a href="http://www.baidu.com">欢迎浏览百度网</a></li>
</ul>
</div