ag旗舰厅官网_ag旗舰厅下载客户端

热门关键词: ag旗舰厅官网,ag旗舰厅下载客户端

ag旗舰厅

当前位置:ag旗舰厅官网 > ag旗舰厅 > 图片切换编号,用jQuery完毕banner图片切换

图片切换编号,用jQuery完毕banner图片切换

来源:http://www.pedaLyourcycLe.com 作者:ag旗舰厅官网 时间:2019-11-26 14:56

图表切换效果(准期+编号卡塔 尔(阿拉伯语:قطر‎,图片切换编号

js库引用地址:jquery-1.8.3.min.js

效果:

    图片 1

代码:

图片 2 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "; 2 <html> 3 <head> 4 <title> New Document </title> 5 <meta name="Generator" content="EditPlus"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <script type="text/javascript" src="js/jquery-1.8.0.js"></script> 10 <style type="text/css"> 11 *{margin:0;padding:0;} 12 body{font-size:12px;} 13 .imgFloat{ 14 width:500px; 15 height:400px; 16 padding:2px; 17 border:1px solid #999; 18 position:relative; 19 margin:0 auto; 20 } 21 .imgFloat ul{list-style:none;overflow:hidden;height:398px;} 22 .imgFloat img{ 23 width:498px; 24 height:398px; 25 } 26 .imgFloat ul li{ 27 opacity:'0'; 28 position:absolute; 29 top:2px; 30 left:2px; 31 } 32 .imgBtn{ 33 margin:0 auto; 34 width:120px; 35 height:30px; 36 z-index:9999; 37 position:absolute; 38 text-align:right; 39 top:5px; 40 right:10px; 41 } 42 .imgBtn span{ 43 display:block; 44 width:15px; 45 height:15px; 46 float:left; 47 text-align:center; 48 line-height:15px; 49 margin-right:5px; 50 border:1px solid #999; 51 cursor:pointer; 52 background-color:#FFFCE7; 53 } 54 .imgBtn .setColor{ 55 color:Red; 56 width:20px; 57 height:20px; 58 line-height:20px; 59 font-size:14px; 60 } 61 </style> 62 63 </head> 64 65 <body> 66 <div class="imgFloat"> 67 <ul> 68 <li> 69 <li><img src="images/2.jpg" alt="图片二" /></li> 70 <li><img src="images/3.jpg" alt="图片三" /></li> 71 <li><img src="images/4.jpg" alt="图片四" /></li> 72 <li><img src="images/5.jpg" alt="图片五" /></li> 73 </ul> 74 <div class="imgBtn"></div> 75 </div> 76 <script type="text/javascript"> 77 var num=0; 78 function showDiv(i){ 79 if(i!=undefined){ 80 num=i-1; 81 } 82 var numBtn=$(".imgFloat ul li").length; 83 if(num==numBtn){ 84 num=0; 85 } 86 else{ 87 num+=1; 88 } 89 90 $(".imgBtn span").eq(num).addClass("setColor").siblings().removeClass("setColor"); 91 //$(".imgFloat ul li").eq(num).siblings().fadeOut(600,function(){$(".imgFloat ul li").eq(num).fadeIn(600);}); 92 $(".imgFloat ul li").eq(num).siblings().animate({opacity:'0'},2000); 93 $(".imgFloat ul li").eq(num).animate({opacity:'1'},2000); 94 } 95 96 $(function(){ 97 var numBtn=$(".imgFloat ul li").length-1; 98 var html; 99 for(var i=0;i<5;i++) 100 { 101 i1=i+1; 102 html+="<span onclick='showDiv("+i+")'>"+i1+"</span>"; 103 } 104 $(".imgBtn").html(html.substring(9)); 105 $(".imgBtn span:first").addClass("setColor"); 106 107 var timer=setInterval("showDiv()",4000); 108 $(".imgFloat").mouseover(function(){ 109 clearInterval(timer); 110 }).mouseout(function(){ 111 timer=setInterval("showDiv()",4000); 112 }); 113 }); 114 </script> 115 </body> 116 </html> View Code

 

 

juery中怎做出依期切换图片的成效

试试那个图形切换
有12345数字一同切换
鼠标点一下数字会转变来另一张图纸,不点就能够活动换
中间有学科和源码
参照他事他说加以考察资料:www.blueidea.com/...=10895  

珍视选择了沙漏的原理,bind,trigger应用等

助图片定期切换代码(html)网页

查究那些图形切换
有12345数字一齐切换
鼠标点一下数字会转换成另一张图纸,不点就能够自行换
当中有学科和源码
参照他事他说加以考察资料:www.blueidea.com/...=10895  

js库援引地址:jquery-1.8.3.min.js 效果: 代码: 1 !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E...

 

  <!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,'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;}

 

    </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> www.2cto.com

            </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>

功效如下图:

图片 3

!DOCTYPE html html head meta charset=utf-8 titlebanner切换实现/title style type=text/css /* * @description: banner切换...

本文由ag旗舰厅官网发布于ag旗舰厅,转载请注明出处:图片切换编号,用jQuery完毕banner图片切换

关键词: