zoukankan      html  css  js  c++  java
  • JQuery轮播图

    代码:

      1 <!DOCTYPE html>
      2 <html>
      3 
      4 <head>
      5     <meta charset="utf-8" />
      6     <title></title>
      7 
      8     <style type="text/css">
      9         * {
     10             margin: 0;
     11             padding: 0;
     12         }
     13         
     14         ul li {
     15             list-style: none;
     16         }
     17         
     18         #main {
     19             width: 760px;
     20             height: 300px;
     21             position: relative;
     22             margin: 50px auto;
     23         }
     24         
     25         #main .pic {
     26             width: 760px;
     27             height: 300px;
     28             overflow: hidden;
     29         }
     30         
     31         #main .pic ul li {
     32             width: 760px;
     33             height: 300px;
     34             position: relative;
     35         }
     36         
     37         #main .pic ul li .img1 {
     38             position: absolute;
     39             top: 0;
     40             left: -760px;
     41         }
     42         
     43         #main .pic ul li .img2 {
     44             position: absolute;
     45             top: 0;
     46             left: -20px;
     47             display: none;
     48         }
     49         
     50         #main .nav {
     51             position: absolute;
     52             right: 20px;
     53             bottom: 20px;
     54         }
     55         
     56         #main .nav ul li {
     57             width: 10px;
     58             height: 10px;
     59             border: 1px solid #fff;
     60             float: left;
     61             margin-left: 5px;
     62         }
     63         
     64         #main .nav ul li.select {
     65             background: #fff;
     66         }
     67     </style>
     68 </head>
     69 
     70 <body>
     71     <div id="main">
     72         <div class="pic">
     73             <ul>
     74                 <li style="background: url(https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160050282-869469669.jpg);">
     75                     <img class="img1" src="https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160350568-207116465.png" />
     76                     <img class="img2" src="https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160511378-435102902.png" />
     77                 </li>
     78                 <li style="background: url(https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160101771-90113100.jpg);">
     79                     <img class="img1" src="https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160418898-1260530940.png" />
     80                     <img class="img2" src="https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160526616-615957204.png" />
     81                 </li>
     82                 <li style="background: url(https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160113610-141132604.jpg);">
     83                     <img class="img1" src="https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160428651-975833118.png" />
     84                     <img class="img2" src="https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160537171-1201294812.png" />
     85                 </li>
     86                 <li style="background: url(https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160123518-906000678.jpg);">
     87                     <img class="img1" src="https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160441432-1967832324.png" />
     88                     <img class="img2" src="https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160547981-2056537771.png" />
     89                 </li>
     90                 <li style="background: url(https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160222918-1630561788.jpg);">
     91                     <img class="img1" src="https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160449193-173313957.png" />
     92                     <img class="img2" src="https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160558063-388291405.png" />
     93                 </li>
     94             </ul>
     95         </div>
     96         <div class="nav">
     97             <ul>
     98                 <li class="select"></li>
     99                 <li></li>
    100                 <li></li>
    101                 <li></li>
    102                 <li></li>
    103             </ul>
    104         </div>
    105     </div>
    106     <div style=" 100px; height: 100px; background: red; display: none;"></div>
    107     <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
    108 
    109     <script type="text/javascript">
    110         $(function() {
    111             $(".pic li")
    112                 .eq(0)
    113                 .find(".img1")
    114                 .stop()
    115                 .animate({
    116                     left: 0
    117                 }, 800)
    118                 .next()
    119                 .stop()
    120                 .show()
    121                 .animate({
    122                     left: 0
    123                 }, 800);
    124             var i = 0;  //先执行第一个li
    125             setInterval(function() {    //从第二个li开始循环
    126                 i++;
    127                 if (i == $(".pic li").length) {
    128                     i = 0;
    129                 }
    130                 $(".pic li")
    131                     .eq(i)
    132                     .fadeIn()
    133                     .find(".img1")
    134                     .stop()
    135                     .animate({
    136                         left: 0
    137                     }, 800)
    138                     .next()
    139                     .stop()
    140                     .show()
    141                     .animate({
    142                         left: 0
    143                     }, 800)
    144                     .end()
    145                     .end()  //回到li
    146                     .siblings()
    147                     .fadeOut()
    148                     .find(".img1")
    149                     .css({
    150                         left: "-760px"
    151                     })
    152                     .next()
    153                     .hide()
    154                     .css({
    155                         left: "-20px"
    156                     });
    157                 $(".nav li")
    158                     .eq(i)
    159                     .addClass("select")
    160                     .siblings()
    161                     .removeClass("select");
    162             }, 2000);
    163         });
    164     </script>
    165 </body>
    166 
    167 </html>
  • 相关阅读:
    通用权限管理设计 之 数据库结构设计
    jQuery LigerUI 插件介绍及使用之ligerDateEditor
    jQuery LigerUI 插件介绍及使用之ligerTree
    jQuery LigerUI V1.01(包括API和全部源码) 发布
    jQuery liger ui ligerGrid 打造通用的分页排序查询表格(提供下载)
    jQuery LigerUI V1.1.5 (包括API和全部源码) 发布
    jQuery LigerUI 使用教程表格篇(1)
    jQuery LigerUI V1.0(包括API和全部源码) 发布
    jQuery LigerUI V1.1.0 (包括API和全部源码) 发布
    nginx keepalived
  • 原文地址:https://www.cnblogs.com/strongerPian/p/13115850.html
Copyright © 2011-2022 走看看