$(function(){
function onImgChange(){
var $imgLi=$("#scroll_img").find("li");
var $imgLi=$("#scroll_img li");
var $pageLi=$("#scroll_number li");
var index=0;
var stop=false;
$imgLi.eq(index).show().siblings().hide();
$pageLi.eq(index).addClass("scroll_number_over").siblings().removeClass("scroll_number_over");
setInterval(function(){
if(stop) return;
index++;
if(index>$imgLi.length) index=0;
$imgLi.eq(index).show().siblings().hide();
$pageLi.eq(index).addClass("scroll_number_over").siblings().removeClass("scroll_number_over");
},1000);
$pageLi.mouseover(function(){
stop=true;
index=$pageLi.index($(this));
$imgLi.eq(index).show().siblings().hide();
$pageLi.eq(index).addClass("scroll_number_over").siblings().removeClass("scroll_number_over");
}).mouseout(function(){
stop=false;
});
}
onImgChange();
});
<div class="scroll_top"></div>
<div class="scroll_mid">
<ul id="scroll_img">
<li><img src="images/dd_scroll_1.jpg"/></li>
<li><img src="images/dd_scroll_2.jpg"/></li>
<li><img src="images/dd_scroll_3.jpg"/></li>
<li><img src="images/dd_scroll_4.jpg"/></li>
<li><img src="images/dd_scroll_5.jpg"/></li>
<li><img src="images/dd_scroll_6.jpg"/></li>
</ul>
<ul id="scroll_number">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
.scroll_number_out{
}
.scroll_number_over{
background-color:#F96;
color:#FFF;
}