核心提示：鼠标不移动到显示的数字上时，图片自己根据设定的时间轮流播放，当鼠标移到某一个显示数字上，显示该图片，并且停止播放。鼠标移开，图片继续从该图片播放html代码：bodyp id=listImgimg s...
鼠标不移动到显示的数字上时，图片自己根据设定的时间轮流播放，当鼠标移到某一个显示数字上，显示该图片，并且停止播放。鼠标移开，图片继续从该图片播放
html代码：
<body>
<p id="listImg">
<img src="img/1.jpg" id="img"/>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</p>
</body>
CSS代码：
<style>
*{margin: 0px;padding: 0px;}
#listImg{
width: 500px;
height: 300px;
margin: 0px auto;
padding: 2px;
border: 1px solid #ccc;
}
#listImg li{
list-style: none;
float: left;
width: 26px;
height: 26px;
line-height: 26px;
border: 1px solid #999;
text-align: center;
margin: 3px;
}
.bg{
background: #ccc;
color: red;
cursor: pointer;
}
</style>
JS代码：
<script>
var i = 1; //从第一张图片开始
var croll = true;
setInterval(function(){
if(croll){
i++;
if(i==7){
i=1;
}
$("#img").attr("src","img/"+i+".jpg");
$("li:eq('+(i-1)+')").addClass("bg").siblings().removeClass("bg");
}
},2000);
$(function(){
$("li").hover(
function(){
croll = false;
$("#img").attr("src","img/"+$(this).html()+".jpg");
i=$(this).html();
$(this).addClass("bg");
},
function(){
croll = true;
$(this).removeClass("bg");
}
)
});
</script>
