`
csh081
  • 浏览: 16280 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js-轮播图

    博客分类：
  • js
轮播图 
阅读更多
<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>
分享到：
| maven 常用到的三个地址
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics