zoukankan      html  css  js  c++  java
  • 无缝动态轮播图

     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     5     <title></title>
     6     <link href="css/demo2.css" rel="stylesheet" />
     7     <script src="js/jquery-1.10.2.min.js"></script>
     8     <script src="js/demo2.js"></script>
     9 </head>
    10 <body>
    11     <div id="dlunbo">
    12         <div id="igs">
    13             <div class="ig"><img src="img/1.jpg" /></div>
    14             <div class="ig"><img src="img/2.jpg" /></div>
    15             <div class="ig"><img src="img/3.jpg" /></div>
    16             <div class="ig"><img src="img/4.jpg" /></div>
    17             <div class="ig"><img src="img/5.jpg" /></div>
    18             <div class="ig"><img src="img/1.jpg" /></div><!--无缝需要再放一个1-->
    19         </div>
    20         <ul id="tabs">
    21             <li class="bg"></li>
    22             <li></li>
    23             <li></li>
    24             <li></li>
    25             <li></li>
    26         </ul>
    27         <div class="btn btn1">&lt;</div>
    28         <div class="btn btn2">&gt;</div>
    29     </div>
    30 </body>
    31 </html>
     1 *{
     2     padding:0px;
     3     margin:0px;
     4     font-family:"微软雅黑";
     5     list-style-type:none;
     6 }
     7 #dlunbo{
     8     width:520px;
     9     height:280px;
    10     position:absolute;
    11     top:50%;
    12     margin-top:-140px;
    13     left:100px;
    14     overflow:hidden;/*超出部分隐藏*/
    15 }
    16 #tabs{
    17     position:absolute;
    18     bottom:10px;
    19     left:200px;
    20 }
    21 #tabs li{
    22     width:20px;
    23     height:20px;
    24     border:solid 1px #fff;
    25     float:left;
    26     margin-right:5px;
    27     border-radius:100%;
    28     cursor:pointer;
    29 }
    30 .btn{
    31     position:absolute;
    32     width:30px;
    33     height:50px;
    34     background:rgba(0,0,0,0.5);
    35     color:#fff;
    36     text-align:center;
    37     line-height:50px;
    38     font-size:30px;
    39     top:50%;
    40     margin-top:-25px;
    41     cursor:pointer;
    42     display:none;
    43 }
    44 .ig{
    45     float:left;
    46 }
    47 #igs{
    48     width:3500px;
    49     height:280px;
    50     position:absolute;
    51 }
    52 .btn1{
    53     left:0px;
    54 }
    55 .btn2{
    56     right:0px;
    57 }
    58 #tabs .bg{
    59     background-color:#ff0000;
    60 }
     1 /// <reference path="jquery-1.10.2.min.js" />
     2 var i = 0;
     3 var timer;
     4 $(function () {
     5     $("#dlunbo").hover(function () {
     6         $(".btn").show();
     7     }, function () {
     8         $(".btn").hide();
     9     });
    10     timer = setInterval(function () {
    11         i++;
    12         Move();
    13     }, 4000);
    14     $("#tabs li").hover(function () {
    15         clearInterval(timer);
    16         i = $(this).index();
    17         Move();
    18     }, function () {
    19         StartLunbo();
    20     });
    21     $(".btn1").click(function () {
    22         clearInterval(timer);
    23         i--;
    24         if (i == -1) {
    25             $("#igs").css("left", -520 * 5);//无缝连接需要css过渡,实际看不出来
    26             i = 4;
    27         }
    28         Move();
    29         StartLunbo();
    30     });
    31     $(".btn2").click(function () {
    32         clearInterval(timer);
    33         i++;
    34         Move();
    35         StartLunbo();
    36     });
    37 });
    38 
    39 function Move()
    40 {
    41     if (i < 5) {
    42         $("#igs").stop(true,true).animate({ "left": -520 * i },200);
    43     }
    44     else {
    45         $("#igs").stop(true, true).animate({ "left": -520 * i }, 500, function () {
    46             $("#igs").css("left", "0px");
    47         });
    48         i = 0;
    49     }
    50     $("#tabs li").eq(i).addClass("bg").siblings().removeClass("bg");
    51 }
    52 function StartLunbo()
    53 {
    54     timer = setInterval(function () {
    55         i++;
    56         Move();
    57     }, 4000);
    58 }
  • 相关阅读:
    原型设计工具比较及实践
    原型设计工具比较及实践
    原型设计工具比较及实践
    原型设计工具比较及实践
    原型设计工具比较及实践
    原型设计工具比较及实践
    原型设计工具比较及实践
    软件工程基础大作业感想
    博客园里留下你的成长足迹
    软件工程培训—粗读《构建之法》
  • 原文地址:https://www.cnblogs.com/snow52132/p/7234908.html
Copyright © 2011-2022 走看看