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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
javascript dom 操作详解 js加强
Jul 13 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
微信小程序云开发之模拟后台增删改查
May 16 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中定时计划任务的实现原理
2013/01/08 PHP
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
ext 代码生成器
2009/08/07 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
python在不同层级目录import模块的方法
2016/01/31 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
幼师自荐信范文
2013/10/06 职场文书
小学生环保演讲稿
2014/04/25 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
村党支部书记承诺书
2014/05/29 职场文书
2014年设计师工作总结
2014/11/25 职场文书
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android