0
点赞
收藏
分享

微信扫一扫

jQuery图片切换

古得曼_63b6 2022-08-22 阅读 69

jQuery图片切换_ide

效果如http://河池手机网.com 的banner的效果。

jQuery代码如下:

View Code

<script type="text/javascript">
$(function(){
$("#bannerwenzi").each(function(){
$("#bannerdv a:eq(0)").show();
$("#bannerwenzi div").click(function(){
$(this).addClass("bwenzishow").siblings("div").removeClass("bwenzishow");
$("#bannerpic a:eq("+$(this).index()+")").show().siblings("a").hide();
});

});
xx=0;
function setTab() {
$("#bannerwenzi div:eq("+xx+")").addClass("bwenzishow").siblings("div").removeClass("bwenzishow");
$("#bannerpic a:eq("+xx+")").show().siblings("a").hide();
xx+=1;
if(xx>3) xx=0;

}
var jiange=6000;
timerID=setInterval(setTab,jiange);
$("#bannerpic").mousemove(function(){
clearInterval(timerID);

}).mouseout(function(){
timerID=setInterval(setTab,jiange);
});

$("#bannerwenzi").mousemove(function(){
clearInterval(timerID);

}).mouseout(function(){
timerID=setInterval(setTab,jiange);
});

});
</script>

html的部分代码:

View Code

<div id="bannerdv">
<div id="bannerpic">

<a href='affiche.php?ad_id=10&uri=http%3A%2F%2F2119889.user.d-jet.com%2Fgoods.php%3Fid%3D866'

target='_blank'><img src='data/afficheimg/1338458404799049505.jpg' width='990' height='288'

border='0' /></a>



<a href='affiche.php?ad_id=11&uri=http%3A%2F%2F2119889.user.d-jet.com%2Fgoods.php%3Fid%3D878'

target='_blank'><img src='data/afficheimg/1338694945885976412.jpg' width='990' height='288'

border='0' /></a>



<a href='affiche.php?ad_id=12&uri=http%3A%2F%2F2119889.user.d-jet.com%2Fgoods.php%3Fid%3D880'

target='_blank'><img src='data/afficheimg/1338694745278666369.jpg' width='990' height='288'

border='0' /></a>



<a href='affiche.php?ad_id=13&uri=http%3A%2F%2F2119889.user.d-jet.com%2Fgoods.php%3Fid%3D867'

target='_blank'><img src='data/afficheimg/1338283442660191408.jpg' width='990' height='288'

border='0' /></a>



</div>
<div id="bannerwenzi">
<div class="bwenzishow">三星“Galaxy SIII”盖世出击</div>
<div>诺基亚808 4100万像素</div>
<div>TCL 臻智S900 将世界藏至我心</div>
<div style="width:248px;">诺基亚610“不炫耀,只炫彩”</div> </div>
</div>

 

 



作者:沐雪

文章均系作者原创或翻译,如有错误不妥之处,欢迎各位批评指正。本文版权归作者所有,如需转载恳请注明。

​​​ 为之网-热爱软件编程 http://www.weizhi.cc/​​


举报

相关推荐

0 条评论