jQuery:
$(function(){
function slideImg(i){
var showWidth = $("#show").width();
$("#slides li").stop().animate({left:-showWidth * i},400);
}
var _numList = $("#num li");
_numList.mouseover(function(){
var index = _numList.index(this);
slideImg(index);
$(this).addClass("current").siblings().removeClass("current");
});
});
<div id="show">
<ul id="slides">
<li><img src="images/banner_1.jpg" width="980" height="450" /></li>
<li><img src="images/banner_2.jpg" width="980" height="450" /></li>
<li><img src="images/banner_3.jpg" width="980" height="450" /></li>
<li><img src="images/banner_4.jpg" width="980" height="450" /></li>
<li><img src="images/banner_5.jpg" width="980" height="450" /></li>
</ul>
</div>
<ul id="num">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。