jQuery简单实现banner图片切换


Posted in Javascript onJanuary 02, 2014

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>banner切换实现</title>
    <style type="text/css">
        /*
        * @description: banner切换样式
        * @author: lanfeng(beryl)
        * @time:2013-02-26
        */
        /* reset*/
        *{ margin: 0; padding: 0;}
        body{font:12px/1.5 Tahoma,'\5B8B\4F53',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;}
    </style>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
      $(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)
                  })
      })
    </script>
</head>
<body>
<div class="d-ftab">
    <div class="d-fShow">
        <ul>
            <li>
                <a href="#"><img alt="" src=" images/1.jpg"/>
                </a>
            </li>
            <li >
                <a href="#"><img alt="" src="images/2.png">
                </a>
            </li>
            <li>
                <a href="#"><img alt=""  src="images/3.jpg">
                </a>
            </li>
            <li>
                <a href=""><img alt="" src="images/4.jpg">
                </a>
            </li>
            <li>
                <a href="#"><img alt="" src="images/5.jpg">
                </a>
            </li>
        </ul>
    </div>
    <div class="d-fs-control">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li class="select">5</li>
        </ul>
    </div>
</div>
</body>
</html>

效果如下图:
jQuery简单实现banner图片切换
Javascript 相关文章推荐
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
javascript css float属性的特殊写法
Nov 13 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 Javascript
手把手教你如何编译打包video.js
Dec 09 Javascript
JavaScript实现队列结构过程
Dec 06 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 #Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 #Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 #Javascript
js/jQuery简单实现选项卡功能
Jan 02 #Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 #Javascript
js判断字符长度以及中英文数字等
Dec 31 #Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 #Javascript
You might like
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
分享一段PHP制作的中文拼音首字母工具类
2014/12/11 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
JavaScript 变量作用域分析
2011/07/04 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
Vue性能优化的方法
2020/07/30 Javascript
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
Python聊天室程序(基础版)
2018/04/01 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
Python识别验证码的实现示例
2020/09/30 Python
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
网络维护中文求职信
2014/01/03 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
跳蚤市场口号
2014/06/13 职场文书
大专学生求职信
2014/07/04 职场文书
保研推荐信格式
2015/03/25 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python