稍微困难点的HTML自动轮播（可手动）

HTML

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>明</title>
 6         <link rel="stylesheet" type="text/css" href="css/页面效果.css"/>
 7     </head>
 8     <body>
 9         <div id="kuang">
10             <a href="index.html" class="tu1"><img src="img/www.acg.gy_07.jpg"     style="width: 1280px;height: 720px;"></a>
11             <a href="index.html" class="tu1"><img src="./img/www.acg.gy_11.jpg" style="width: 1280px;height: 720px;"></a>
12             <a href="index.html" class="tu1"><img src="./img/www.acg.gy_31.png" style="width: 1280px;height: 720px;"></a>
13             <a href="index.html" class="tu1"><img src="./img/www.acg.gy_41.png" style="width: 1280px;height: 720px;"></a>
14             <a href="index.html" class="tu1"><img src="./img/www.acg.gy_09.jpg" style="width: 1280px;height: 720px;"></a>
15             <a href="index.html" class="tu1"><img src="./img/www.acg.gy_47.png" style="width: 1280px;height: 720px;"></a>
16             <a href="index.html" class="tu1"><img src="./img/www.acg.gy_05.png" style="width: 1280px;height: 720px;"></a>
17             <a href="index.html" class="tu1"><img src="./img/www.acg.gy_48.jpg" style="width: 1280px;height: 720px;"></a>
18             <div class="but1"><p>上一张</p></div>
19             <div class="but2"><p>下一张</p></div>
20             <ul id="nav">
21                 <li class="but3">1</li>
22                 <li class="but3">2</li>
23                 <li class="but3">3</li>
24                 <li class="but3">4</li>
25                 <li class="but3">5</li>
26                 <li class="but3">6</li>
27                 <li class="but3">7</li>
28                 <li class="but3">8</li>
29             </ul>
30         </div>
31         <script src="./js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
32         <script type="text/javascript">
33             var i=0;
34             var auto;  
35             $(document).ready(function(){
36                 $(".tu1").eq(0).show().siblings(".tu1").hide();
37                 $(".but1").click(function(){
38                     clearInterval(auto);
39                     if(i == 0){
40                         i = 8;
41                     }
42                     i--;
43                     show();
44                     autoPlay();
45                 })
46                 $(".but2").click(function(){
47                     clearInterval(auto);
48                     //判断轮播的显示和隐藏 
49                     if(i == 7){
50                         i = -1;
51                     }
52                     i++;
53                     show();
54                     autoPlay();
55                 })
56                 $(".but3").hover(function(){
57                     i = $(this).index();
58                     show();
59                     clearInterval(auto);
60                 },function(){
61                     autoPlay();
62                 })
63             })
64             function autoPlay(){
65                 auto = setInterval(function(){
66                     show();
67                     i++;
68                     if(i==8){
69                         i = 0;
70                     }
71                 },2000)
72             }
73             function show(){
74                 $(".tu1").eq(i).fadeIn(700).siblings(".tu1").fadeOut(700);
75                 $(".but3").eq(i).addClass("bianse").siblings(".but3").removeClass("bianse")
76             }
77         </script>
78     </body>
79 </html>

CSS

 1 *{
 2     margin: 0;
 3     padding: 0;
 4 }
 5 body{
 6     background-color: #60a0ff;
 7 }
 8 #kuang{
 9     position: relative;
10     margin: 20px auto;
11     width: 1280px;
12     height: 720px;
13 }
14 .tu1{
15     position: absolute;
16 }
17 .but1{
18     background-color: #ffffff;
19     position: absolute;
20     left: 3%;
21     top:45%;
22     text-align: center;
23     width: 80px;
24     height: 80px;
25     line-height: 80px;
26     color: #ff0000;
27     font-size: 17px;
28     font-weight: bold;
29     border-radius: 20%;
30     transition: 0.6s;
31 }
32 .but2{
33     background-color: #ffffff;
34     position: absolute;
35     left: 93%;
36     top:45%;
37     border-radius: 10px;
38     text-align: center;
39     width: 80px;
40     height: 80px;
41     line-height: 80px;
42     color: #ff0000;
43     font-size: 17px;
44     font-weight: bold;
45     transition: 0.6s;
46 }
47 #nav{
48     position: absolute;
49     left: 40%;
50     top:94%;
51 }
52 .but3{
53     float: left;
54     list-style: none;
55     width: 28px;
56     height: 28px;
57     line-height: 28px;
58     text-align: center;
59     background-color: whitesmoke;
60     overflow: hidden;
61     border-radius: 50%;
62     margin-left: 15px;
63     color: red;
64 }
65 .but1:hover{
66     background-color: #55aaff;
67     color: #000000;
68     transition: 0.5s;
69 }
70 .but2:hover{
71     background-color: #55aaff;
72     color: #000000;
73     transition: 0.5s;
74 }
75 .bianse{
76     background-color: sandybrown;
77 }

JS使用jquery-3.5.1.js就可以

效果图

 

posted @ 2021-03-15 15:26  outsider078  阅读(300)  评论(0)    收藏  举报