<html>
<head>
<title></title>
<script type="text/javascript">
function $(e) { return document.getElementById(e)}
function jq(e) { return document.getElementsByTagName(e)}
var scroll = 0
function load() {
var jud = 50 * (jq("img").length - 3)
if (scroll ==jud )
{ $("d").scrollTop = 0scroll = 0}
else {
$("d").scrollTop += 5
scroll += 5
}
}
var auto = setInterval(load, 300)
function stop() {
auto = clearInterval(auto)
}
function start() {
auto = setInterval(load, 300)
}
</script>
<style type="text/css">
#d{width:50pxheight:200pxoverflow:hidden}
</style>
</head>
<body onload="load()">
<div id="d" onmouseover="stop()" onmouseout="start()">
<img width="50px" height="50px" src="images/1.jpg" />
<img width="50px" height="50px" src="images/2.jpg" />
<img width="50px" height="50px" src="images/3.jpg" />
<img width="50px" height="50px" src="images/4.jpg" />
<img width="50px" height="50px" src="images/5.jpg" />
<img width="50px" height="50px" src="images/6.jpg" />
<img width="50px" height="50px" src="images/7.jpg" />
<img width="50px" height="50px" src="images/8.jpg" />
<img width="50px" height="50px" src="images/9.jpg" />
<img width="50px" height="50px" src="images/10.jpg" />
</div>
</body>
</html>
css和div做滚动效果的我没实现过，都用的js实现的；
效果如下图
完整代码以及引用的插件直接压缩包了，查看请下载附件。
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>点击左走或右走</title>
<style>
#body .middle{
width:1024px
height:180px
margin:5px auto
overflow:hidden
position:relative
}
#body .middle .bt .l{
position:absolute
left:10px
top:70px
background:#000
z-index:20
width:30px
height:30px
font-size:20px
opacity:0.7
border-radius:15px
cursor:pointer
color:#fff
text-align:center
line-height:30px}
#body .middle .bt .r{
position:absolute
right:10px
top:70px
background:#000
z-index:20width:30px
height:30px
font-size:20px
opacity:0.7
border-radius:15px
cursor:pointer
color:#fff
text-align:center
line-height:30px
}
#body .middle .gd ul{
position:absolute
width:1022px
margin-top:5px
}
#body .middle .gd li{
float:left
width:159px
height:160px
margin-left:10px }
#body .middle .gd li img{
width:100%
height:100%
}</style>
<link href="my.css" rel="stylesheet" type="text/css">
<script src="jquery-1.3.2.min.js"></script>
<script>
$(function(){ //载入后
var d=$('#body .middle .gd ')
var ul=d.find('ul')
var li=ul.find('li')
var l=$('#body .middle .bt .l')
var r=$('#body .middle .bt .r')
//设置ul的宽
ul.width( (li.width()+10)*li.length )
var zy=false
//给左右加事件
l.click(function(){ zy=true zou(true) })
r.click(function(){ zy=false zou(false) })
//自动切换
window.setInterval(function(){
if(zy){
l.click() //自动点击
}else{
r.click() //自动点击
}
},2000)
/*
zuozou 向左或向右走
*/
function zou(zuozou){
var k=$('#body .middle .gd ul li').width()*-1
var t=$('#body .middle .gd ul li').length-1
if(zuozou){
//向左
$('#body .middle .gd ul').stop(true,true).animate({'left':k},function(){ //执行完动画后
$('#body .middle .gd ul li').eq(0).appendTo($('#body .middle .gd ul'))
$('#body .middle .gd ul').css({ 'left':0 })
})
}else{
//向右
$('#body .middle .gd ul li').eq(t).prependTo($('#body .middle .gd ul'))
$('#body .middle .gd ul').css({ 'left':k})
$('#body .middle .gd ul').stop(true,true).animate({'left':0})
}
}
})
</script>
</head>
<body>
<div id="body">
<div class="middle">
<div class="bt">
<strong class="l"><</strong>
<strong class="r">></strong>
</div>
<div class="gd">
<ul>
<li><a href="http://weibo.com/guokq"><img src="img/27.jpg" /></a></li>
<li><a href="http://weibo.com/guokq"><img src="img/28.jpg" /></a></li>
<li><a href="http://weibo.com/guokq"><img src="img/29.jpg" /></a></li>
<li><a href="http://weibo.com/guokq"><img src="img/26.jpg" /></a></li>
<li><a href="http://weibo.com/guokq"><img src="img/25.jpg" /></a></li>
<li><a href="http://weibo.com/guokq"><img src="img/24.jpg" /></a></li>
<li><a href="http://weibo.com/guokq"><img src="img/23.jpg" /></a></li>
<li><a href="http://weibo.com/guokq"><img src="img/22.jpg" /></a></li>
<li><a href="http://weibo.com/guokq"><img src="img/21.jpg" /></a></li>
<li><a href="http://weibo.com/guokq"><img src="img/20.jpg" /></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
<marquee><ul>
<li><a href="#"><img src="images/tianyuan.png">新闻</a></li>
<li><a href="#"><img src="images/tianyuan.png">冬天</a></li>
<li><a href="#"><img src="images/tianyuan.png">中文意思</a></li>
<li><a href="#"><img src="images/tianyuan.png">夏天</a></li>
<li><a href="#"><img src="images/tianyuan.png">秋天</a></li>
<li><a href="#"><img src="images/tianyuan.png">春天</a></li>
</ul>
</marquee>
