现在上网的jquery效果都有现成的可以自己调用就可以使用了，但是推荐如果一些简单的效果还是尽量自己写比较好，这里讲解下一些对于新手如果实现jquery的自动滚动效果。
首先，我们的html要写成这样：
[code]<div id=”slide”>
<ul class=”slideul1″>
<li class=”slideli1″>
<ul class=”slideul2″>
<li><img src=”images/1.jpg”/></li>
<li><img src=”images/2.jpg”/></li>
<li><img src=”images/3.jpg”/></li>
<li><img src=”images/4.jpg”/></li>
<li><img src=”images/5.jpg”/></li>
</ul>
</li>
<li class=”slideli2″></li>
</ul>
</div>
<span></span>[/code]
js代码写成：
[code]<script type=”text/javascript”>
var _speed=10; //控制速度
var _slide = $(“#slide”);
var _slideli1 = $(“.slideli1”);
var _slideli2 = $(“.slideli2”);
$(“.slideli2”).html($(“.slideli1”).html());
function Marquee(){
if($(“#slide”).scrollLeft() > $(“.slideli1”).width()) <!– 当#slide水平滚动轴的值大于.slideli1宽度是1500的时候 –>
$(“#slide”).scrollLeft(0); <!– 当#slide水平滚动轴的值重新回到0 –>
else{
$(“#slide”).scrollLeft($(“#slide”).scrollLeft()+1); <!– 自增加1–>
}
}
$(function(){
//两秒后调用
var set = setInterval(Marquee,_speed);
$(“#slide”).hover(function() {
//鼠标移动DIV上停止
clearInterval(set);
},function(){
//离开继续调用
set = setInterval(Marquee,_speed);
});
});
$(function(){
$(“#slide”).scroll(function(){
$(‘span’).text($(“#slide”).scrollLeft());
});
})
</script>[/code]
最后是样式，因为样式不是我们重点讲的所以放在最后面，但这里也要注意一个属性的设置：
[code]*{ margin:0; padding:0;}
body { font:12px/1.8 Arial; color:#666;}
h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;}
.go-back{ text-align:center; border-top:1px dashed #ccc; padding:10px; margin-top:20px; font-size:40px;}
.wrap{border:1px dashed #ccc; background:#f8f8f8; padding:20px;}
#slide{width:900px;margin:100px auto; overflow:scroll;} /*为了方便查看 这里的 overflow属性改为scroll，如果改成hidden就是最终效果*/
ul{list-style:none;}
li{float:left;}
.slideul1{width:3999px;}[/code]
首先是分析一下html代码记住他的结构，主要是由ul 和 li组成。
js代码部分才是重点分析的，其实前面的3行代码要不要都无所谓可以把，
[code]var _speed=10;
var _slide = $(“#slide”);
var _slideli1 = $(“.slideli1”);
var _slideli2 = $(“.slideli2”);[/code]
删除，这里写其实就是为了以后修改的方便而已如果觉得以后会修改就保留吧。
[code]$(“.slideli2”).html($(“.slideli1″).html());[/code]
这里代码其实就是把<li class=”slideli1″></li>里面的html代码复制到
<li class=”slideli2”></li>里面去，这么做其实就是为了滚动效果流畅，如果看不错的话可以把这段代码删除就知道为什么这么写了。
[code]function Marquee(){
if($(“#slide”).scrollLeft() > $(“.slideli1”).width()) <!– 当#slide水平滚动轴的值大于.slideli1宽度是1500的时候 –>
$(“#slide”).scrollLeft(0); <!– 当#slide水平滚动轴的值重新回到0 –>
else{
$(“#slide”).scrollLeft($(“#slide”).scrollLeft()+1); <!– 自增加1–>
}
}[/code]
这里是一个滚动循环的函数。
意思就是#slide的水平滚动值如果大于.slideli1宽度的时候，水平滚动轴就返回初始位置，否则#slide的水平滚动值就不断的自增1，来达到滚动的效果。（其实经过测试.slideli1宽度是1500）。
[code]$(function(){
//两秒后调用
var set = setInterval(Marquee,_speed);
$(“#slide”).hover(function() {
//鼠标移动DIV上停止
clearInterval(set);
},function(){
//离开继续调用
set = setInterval(Marquee,_speed);
});
});[/code]
这里的效果是鼠标移动到图层时停止当前的滚动，但是继续保留在之前滚动的位置，鼠标移除后就继续在当前停留的位置后续滚动的效果。
[code]$(function(){
$(“#slide”).scroll(function(){
$(‘span’).text($(“#slide”).scrollLeft());
});
})[/code]
这里其实就是为了更好的看到#slide的水平滚动值的变化做的。