js-轮播图

最新推荐文章于 2024-11-11 10:03:40 发布

原创最新推荐文章于 2024-11-11 10:03:40 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#轮播图

js 专栏收录该内容

4 篇文章

订阅专栏

<BODY>
<div class="wrapper">
<h1>基础版轮播图</h1>
<div class="slide" id="oSlide">
<div class="img_list">
<a href=""><img src="http://ossweb-img.qq.com/upload/adw/image/201305/1369090318281627599.jpg" alt="" /></a>
<a href=""><img src="http://ossweb-img.qq.com/upload/adw/image/201305/1369091497468585125new.jpg" alt="" /></a>
<a href=""><img src="http://ossweb-img.qq.com/upload/adw/image/201305/1369091555230427210.jpg" alt="" /></a>
<a href=""><img src="http://ossweb-img.qq.com/upload/adw/image/201305/1369091647802017426.jpg" alt="" /></a>
<a href=""><img src="http://ossweb-img.qq.com/upload/adw/image/201305/1369091708549002379.jpg" alt="" /></a>
</div>
<ul class="num">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<script src="http://gamevip.qq.com/portal/v1/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var oSlide = {
i: 0,
ex: false,
aID: 0,
bID: 0,
slide: function(){
var len = $('.img_list a').length;
if (oSlide.i < (len - 1)){
oSlide.i++;
}else{
oSlide.i=0;
}
$('.img_list a').fadeOut('fast').eq(oSlide.i).fadeIn('fast');
$('.num li').removeClass('on').eq(oSlide.i).addClass('on');
},

guideHover: function(){
$('.num li').mouseover(function(){
if (!$(this).hasClass('on')){
oSlide.i = ($(this).index())-1;
oSlide.slide();
}
});
},

init: function(){
if (!$('#oSlide')){
return;
}
oSlide.aID = setInterval(oSlide.slide,3000);
oSlide.guideHover();
}
};
oSlide.init();
</script>
</BODY>