当前位置:  编程技术>WEB前端

jQuery简单实现banner图片切换

    来源: 互联网  发布时间:2014-08-25

    本文导语:  主要运用了定时器的原理,bind,trigger应用等 代码如下:        banner切换实现            /*        * @description: banner切换样式        * @author: lanfeng(beryl)        * @time:2013-02-26        */        /* reset*/   ...

主要运用了定时器的原理,bind,trigger应用等

代码如下:




   
    banner切换实现
   
        /*
        * @description: banner切换样式
        * @author: lanfeng(beryl)
        * @time:2013-02-26
        */
        /* reset*/
        *{ margin: 0; padding: 0;}
        body{font:12px/1.5 Tahoma,'5B8B4F53',arial,Tahoma,helvetica,sans-serif; color:#333333;background-color:#ffffff;position:relative; }
        h1,h2,h3,h4,h5,h6{font-size:100%}
        address,em{font-style:normal;}
        code,kbd,pre,samp{font-family:courier new,courier,monospace;}
        ul,ol{list-style:none outside none;}
        fieldset,img{border:0;}
        img{vertical-align:middle}
        table{border-collapse:collapse;border-spacing:0;font-size:inherit;*font-size:100%;}
        input,button,textarea,select{vertical-align:middle;font:100% Helvetica,Arial,sans-serif; color:inherit}
        .clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden;}
        .clearfix{*zoom:1;}
        .clear{font-size:0;line-height:0;height:0;clear:both;visibility:hidden;overflow:hidden;}

        .d-ftab{ width:510px; height: 180px;position: relative; margin: 100px auto;}
        .d-fShow ul li{ float: left; width: 510px; height: 180px;}
        .d-fShow{ width: 510px; height: 180px; overflow: hidden;}
        .d-fShow img{ width: 510px; height: 180px; float: left;}
        .d-fs-control{ position: absolute; width:510px; position: absolute; left: 0; bottom: 0; height: 25px; line-height: 25px;


background: rgba(0,0,0,0.4);
        filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#66000000',

EndColorStr='#66000000') ;  }
        :root  .d-fs-control{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#66000000'

,EndColorStr='#66000000')9 ;}
        .d-fs-control ul{ position: absolute; bottom:3px; right: 5px; height: 16px;}
        .d-fs-control ul li{width:16px;height:16px; background:#777675;border-radius: 2px 2px 2px 2px; float:left;margin-left:5px;

color:#dcdcdc;text-align:center;font-weight:700;cursor:pointer;line-height:16px;filter: alpha(opacity=70); opacity: 0.7;}
        .d-fs-control ul li:hover,.d-fs-control ul li.select{background:#ffffff;color:#ff6700;}

   
   
   
      $(function(){
        var wrap =$('.d-ftab');
          var imgs = wrap.find('.d-fShow ul >li');
          var len=imgs.length  ;
          var tabTime=100;
          var outTime=4000;
          var select='select';
          var num =0 ;
          var interval;
          var type = 'click';
          var btns=wrap.find('.d-fs-control ul>li');
    btns.bind(type,function(){
              var _this=$(this);
              _this.addClass('select').siblings ().removeClass('select');
              num=_this.prevAll().length;
              imgs.stop().eq(num).fadeTo(tabTime,1)  ;
              imgs.not(':eq('+num+')').filter(':visible').fadeOut(tabTime) ;
              return false;
}).eq(num).trigger(type);
          var interFunc=function(){
              num=(num+1)%len;
              btns.eq(num).triggerHandler(type);
          }
          wrap.bind('mouseover',function(){
              clearInterval(interval);
          }).bind('mouseout',function(){
                      interval=setInterval(interFunc,outTime)
                  })

      })
   



   

       
   

   

       

               
  • 1

  •            
  • 2

  •            
  • 3

  •            
  • 4

  •            
  • 5

  •        

   





效果如下图:

    
 
 

您可能感兴趣的文章:

  • jQuery图片切换插件 ImageSwitch
  • jQuery 开关切换插件 On-Off Toggle Switches
  • WEB前端 iis7站长之家
  • jQuery的对象切换插件 sochange-juqeryplugin
  • jQuery回车键切换文本框焦点
  • jQuery实现回车键(Enter)切换文本框焦点的代码实例
  • jQuery 页面切换插件 browserSwipe.js
  • jquery 新闻循环切换的实现代码
  • jQuery 随机切换图片的例子
  • jquery图片淡入淡出与图片切换效果的例子
  • jQuery字体大小切换的实现代码
  • jquery自动切换淡入淡出效果的例子
  • Jquery 点击切换图片并隐藏与显示内容的实现代码
  • Jquery实例 动态切换图片
  • jquery限制只能输入数字 禁止复制粘贴与输入法切换
  • jQuery导航条背景切换效果的实现代码(图文)
  • jQuery图片切换插件jquery.cycle.js使用示例
  • jquery自动切换tabs选项卡的实现代码
  • jQuery切换网页皮肤并保存到Cookie示例代码
  • jquery自动切换tabs选项卡的具体实现
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • JQuery实现元素屏幕居中显示的代码
  • jquery 回车登录的实现方法
  • 基于jQuery实现的MVC开发框架 CorMVC
  • 简单的代码实现jquery定时器
  • jQuery Trim去除字符串首尾空字符的实现方法说明
  • jquery插件开发之实现jquery手风琴功能分享
  • jquery实现的导航固定效果
  • jquery实现点击消失的代码
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jquery淡化版banner异步图片文字效果切换图片特效
  • jQuery概述,代码举例及最新版下载
  • jQuery鼠标动画插件 jquery-ahover
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery向导插件 Jquery Wizard Plugin
  • jQuery圆角插件 jQuery Corners
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar
  • jQuery的中文日历插件 jQuery.datePickerCn
  • jQuery的CSV插件 jQuery CSV
  • jQuery的气泡提示插件 jquery.ns_bub.js
  • jQuery气泡提示插件 jquery-rollover-tooltip
  • jQuery对话框 jQuery Modal Dialog
  • jQuery 插件 jQuery Ripples
  • 精简版的jQuery jQuery.ish
  • jQuery的OpenSocial插件 OpenSocial jQuery
  • jQuery链接插件 jquery.biggerlink
  • 在线客服jQuery 插件 jQuery.onServ
  • jQuery日历插件 jQuery Verbose Calendar


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3