商城轮播图

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

代码如下：

  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             width: 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             width: 100%;
 29 
 30         }
 31         .outer .num li{
 32             height: 20px;
 33             width: 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             width: 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>

 

posted @ 2019-02-01 21:06  飞鸟_山东  阅读(427)  评论(0)  编辑  收藏  举报