• 商城轮播图


    实现目的:进入网页自动轮播,悬浮停止,左右按钮可翻看图片,底下序号可翻看图片。

    代码如下:

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <meta charset="UTF-8">
      5     <title>轮播图</title>
      6     <style>
      7         *{
      8             margin: 0;
      9             padding: 0;
     10         }
     11         ul li{
     12             list-style: none;
     13         }
     14         .outer{
     15              590px;
     16             height: 470px;
     17             border:dashed cadetblue 5px;
     18             margin: 0 auto;
     19             position: relative;
     20         }
     21         .outer .num{
     22             position: absolute;
     23             left: 0;
     24             /*top: 0;*/
     25             bottom: 10px;
     26             font-size: 0;
     27             text-align: center;
     28              100%;
     29 
     30         }
     31         .outer .num li{
     32             height: 20px;
     33              20px;
     34             background-color:darkgray ;
     35             border-radius: 60%;
     36             text-align: center;
     37             line-height: 20px;
     38             display: inline-block;
     39             font-size: 16px;
     40             margin: 5px;
     41             cursor: pointer;
     42         }
     43         .outer .img li{
     44             position: absolute;
     45             left: 0;
     46             top: 0;
     47 
     48         }
     49         .button{
     50             height: 60px;
     51              40px;
     52             background-color: gray;
     53             position: absolute;
     54             /*left: 0px;*/
     55             top: 50%;
     56             margin-top: -30px;
     57             opacity: 0.6;
     58             font-size: 40px;
     59             font-weight: bolder;
     60             text-align: center;
     61             display: none;
     62         }
     63         .btn_right{
     64             right: 0;
     65         }
     66         .outer:hover .button{
     67             display: block;
     68         }
     69         .outer .num li.current{
     70             background-color: red;
     71         }
     72     </style>
     73 </head>
     74 <body>
     75     <div class="outer">
     76         <ul class="img">
     77             <li><img src="image/1.jpg"></li>
     78             <li><img src="image/2.jpg"></li>
     79             <li><img src="image/3.jpg"></li>
     80             <li><img src="image/4.jpg"></li>
     81             <li><img src="image/5.jpg"></li>
     82         </ul>
     83         <ul class="num">
     84             <li>1</li>
     85             <li>2</li>
     86             <li>3</li>
     87             <li>4</li>
     88             <li>5</li>
     89         </ul>
     90         <div class="btn_left button"> < </div>
     91         <div class="btn_right button"> > </div>
     92     </div>
     93 <script src="jquery-1.8.2.js"></script>
     94 <script>
     95     $(function () {
     96         $('.num li').first().addClass('current');
     97         $('.num li').mouseover(function () {
     98             $(this).addClass('current').siblings().removeClass('current');
     99             var index = $(this).index();
    100             i = index;
    101             $('.img li').eq(index).fadeIn(1000).siblings().fadeOut(1000);
    102         });
    103 
    104         var i = 0;
    105         function move() {
    106             i++;
    107             if(i==5){
    108                 i=0;
    109             };
    110             $('.num li').eq(i).addClass('current').siblings().removeClass('current');
    111             $('.img li').eq(i).fadeIn(1000).siblings().fadeOut(1000);
    112         };
    113         var time = setInterval(move,1500);
    114 
    115         $('.outer').hover(function () {
    116             clearInterval(time);
    117         },function () {
    118             time = setInterval(move,1500);
    119         });
    120 
    121         $('.btn_right').click(function () {
    122             move();
    123         });
    124         $('.btn_left').click(function () {
    125             if(i==0){
    126                 i=5
    127             };
    128             i = i - 2;
    129             move();
    130         });
    131     })
    132 </script>
    133 </body>
    134 </html>
  • 相关阅读:
    递归
    匿名函数
    迭代器、可迭代对象、生成器
    日期
    大文件读写
    面向对象
    魔术方法
    进程与线程
    numpy常用函数
    shell编程
  • 原文地址:https://www.cnblogs.com/wenxianfeng/p/10347014.html
Copyright © 2020-2023  润新知