jQuery图片切换-阿里云开发者社区

开发者社区> 冰点沐雪> 正文

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>

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery 图片滚动特效制作 slide 图片类似窗帘式滚动
jquery特效制作用标题当按钮控制图片窗帘式滚动实现幻灯片效果。   感觉这个效果太好了,做相册绝对完美! 下载的时候提示积分不足,我非常不喜欢下载需要积分这个玩意儿,没办法先弄点积分再说。下载完毕后再免费分享给大家。    下载!
648 0
jQuery全屏图片焦点图
在线演示 本地下载
599 0
jquery 图片全屏切换
效果是模拟这个:http://killingthemsoftlymovie.com/?section=photos 直接上代码吧,不多解释了,jquery 控制图片隐藏和显示。  下载!! 原文首发:138国际资讯网!
412 0
Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
  Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本。目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色:  16个独特的过渡效果  简洁和有效的标记  加载参数设置 ...
1343 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4480 0
10款基于jQuery 的图片360度旋转插件
之前的文章向大家分享了实现网站功能的各种优秀的jQuery 插件,今天这篇文章向大家推荐10款基于jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1228 0
js设置随机切换背景图片
var imgs =["http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_2.jpg", "http://images.
759 0
功能强大的jQuery图片查看器插件
功能强大的 jQuery 图片查看器插件 : viewer image.png image.png $(function () { TaskReport.
768 0
+关注
冰点沐雪
专业从事软件开发(asp.net)近10年。
434
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载