jQuery图片切换
效果如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/