用jquery做一个大图自动切换

品味人生 • 发布于 2019-02-01 21:37:02

这个家伙很害羞,不想介绍自己!

<div class="min ">
<div class="widget-slidew" id="widget-slidew">
<div class="widget-slidew-contents" id="widget-slidew-contents">
<div class="widget-slidew-content bgcurrent">
<a href="#"><img src="#" width="400" height="300" title="p9p9.cn"></a>
</div>
<div class="widget-slidew-content">
<a href="#"><img src="#" width="400" height="300" title="p9p9.cn"></a>
</div>
<div class="widget-slidew-content">
<a href=#"><img src="#" width="400" height="300" title="p9p9.cn"></a>
</div>
<div class="widget-slidew-content">
<a href="#"><img src="#" width="400" height="300" title="p9p9.cn"></a>
</div>
<div class="widget-slidew-content">
<a href="#"><img src="#" width="400" height="300" title="p9p9.cn"></a>
</div>
</div>
<div class="widget-slidew-ctrl">
<ul id="widget-slidew-tabs">
<li class="smcurrent"><a href="#"><img src=#" width="60" height="45"></a><h5><a href="#" target="_blank">谁能保证一款手机网游永</a></h5>
</li>
<li><a href="#" target="_blank"><img src="#" width="60" height="45"></a><h5><a href="#" target="_blank">魔法球,仙女棒,飞行毯</a></h5>
</li>
<li><a href="#" target="_blank"><img src="#" width="60" height="45"></a><h5><a href="#" target="_blank">你Q 我Q 大家Q!将可爱进行</a></h5>
</li>
<li><a href="#" target="_blank"><img src="#" width="60" height="45"></a><h5><a href="#">还在单机?你OUT了</a></h5>
</li>
<li><a href=#"><img src="#" width="60" height="45"></a><h5><a href="#" target="_blank">2012上船必要手机网络游戏</a></h5>
</li>
<script>
num = 0 ;//计数器
time = 2000; //自动切换的时间
t = setInterval ("autoScoll()",time)
$(function(){
$('#widget-slidew-tabs li').click(function(){
var qhmm= $('#widget-slidew-tabs li').index($(this)[0]);
$('#widget-slidew-tabs li').eq(qhmm).addClass('smcurrent').siblings().removeClass();
$('#widget-slidew-contents > div').eq(qhmm).addClass('bgcurrent').fadeIn().siblings().fadeOut();
});
});
function autoScoll(){
if (num == 5){
num=0;
scrllNext ()
}else {
scrllNext ()
}
}
$(function(){
$("#widget-slidew").hover(function(){
clearTimeout (t);
},function(){
setInterval ("scrllNext ()",time)
})
})
function scrllNext (){
$('#widget-slidew-tabs li').eq(num).addClass('smcurrent').siblings().removeClass();
$('#widget-slidew-contents > div').eq(num).addClass('bgcurrent').fadeIn().siblings().fadeOut();
num++;
}
</script>
</ul>
</div>
</div>
这是一个大图自动切换 案例可以参见 http://www.p9p9.cc/spec/