jQuery图片切换

简介: 效果如http://河池手机网.com 的banner的效果。 jQuery代码如下: View Code $(function(){ $("#bannerwenzi").

效果如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&amp;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&amp;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&amp;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&amp;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>

 

 

相关文章
|
26天前
|
JavaScript
jQuery实现无缝图片滚动效果
jQuery实现无缝图片滚动效果
129 67
|
5月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
5月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
99 1
|
4月前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
5月前
|
JavaScript 索引
jQuery 实现 图片框切换【与原生 JS 对比】
jQuery 实现 图片框切换【与原生 JS 对比】
|
5月前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
|
JavaScript
jQuery lazyload.js 懒加载可视范围图片
jQuery lazyload.js 懒加载可视范围图片
62 0
|
11月前
|
JavaScript 前端开发
jQuery点击图片来回切换功能
jQuery点击图片来回切换功能
94 0
jQuery点击图片来回切换功能
|
11月前
|
JavaScript 前端开发 数据处理
jQuery数据结构渲染(1):图片数组的渲染
jQuery数据结构渲染(1):图片数组的渲染
64 1