js-轮播图

csh081

于 2014-07-10 09:48:40 发布

阅读量90

点赞数

分类专栏： js 文章标签：轮播图

本文链接：https://blog.csdn.net/csh081/article/details/84613229

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<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>

csh081

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-轮播图

基础版轮播图 1 2 3 4 5 var oSlide = { i: 0, ex: false, aID: 0, bID: 0, slide: function(){ var len = $('.img_list...
复制链接

扫一扫

专栏目录