<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>11111</title>
<link rel="stylesheet" href="reset.css">
<style type="text/css">
.box {margin: 30px auto; width: 500px; height: 120px; background: #eaeaea;}
.left {width: 30px;height: 100px; top: 10px; left: 10px; background: #ddd; cursor: pointer;}
.right {width: 30px;height: 100px; top: 10px; right: 10px; background: #ddd;cursor: pointer;}
.list {left: 50px; top: 10px; width: 400px; height: 100px;}
.list li {float: left; width: 90px; height: 100px; margin-right: 10px;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
function gd_click(left,tagname,subname,right){
// 自动播放函数
function autoPlay(){
timer = setInterval(function(){
$(tagname).animate({left:'50px'},1000,function(){
$(this).find(subname + ":first").appendTo(this);
});
},2000);
}
// 自动播放
autoPlay();
// 鼠标停留是不滚动，离开时继续滚动
$(left).hover(function(){
if(timer){
clearInterval(timer);
}
},function(){
autoPlay();
});
$(right).hover(function(){
if(timer){
clearInterval(timer);
}
},function(){
autoPlay();
});
// 点击按钮滚动
$(left).click(function(){
$(tagname + " " + subname + ":first").css('left','-100px').appendTo(tagname);
});
$(right).click(function(){
$(tagname + " " + subname + ":last").css('right','-100px').prependTo(tagname);
});
}
$(function(){
new gd_click(".left",".list","li",".right");
})
</script>
</head>
<body>
<div>
<div>left</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div>right</div>
</div>
</body>
</html>
浙公网安备 33010602011771号