一个简易的轮播图效果，可以根据这个来进行完善

  1 <!doctype html>
  2 <html>
  3 <head>
  4     <style type="text/css">
  5         .container {
  6             width: 500px;
  7             height: 100px;
  8             overflow: hidden;
  9             position: relative;
 10         }
 11             .container ul {
 12                 width: 50000px; /** 越大越好，也可以精确的计算出来，就是所有轮播图的总宽度 **/
 13                 margin: 0px;
 14                 padding: 0px;
 15                 position: absolute;
 16                 border:0px;
 17                 font-size:0px;
 18             }
 19             .container ul::after {
 20                 display: block;
 21                 clear: both;
 22             }
 23             .containerItem {
 24                 float: left;
 25                 width: 500px;
 26                 height: 100px;
 27                 line-height:100px;
 28                 text-align:center;
 29                 font-size:30px;
 30                 color:#ffffff;
 31                 display: inline-block;
 32                 background-color: aqua;
 33                 border:0px;
 34             }
 35         .container .prev, .container .next {
 36             padding: 0px;
 37             margin:0px;
 38             position: absolute;
 39             width: 30px;
 40             height: 40px;
 41             line-height:40px;
 42             background-color: #000000;
 43             opacity: 0.5;
 44             color: #ffffff;
 45             text-align: center;
 46             top: 50%;
 47             margin-top: -20px;
 48 
 49         }
 50             .container .prev:hover, .container .next:hover{
 51                 cursor:pointer;
 52                 cursor:hand;
 53             }
 54             .container .prev {
 55                 left: 0px;
 56             }
 57         .container .next{
 58             right:0px;
 59         }
 60         .containerCircle{
 61             position:absolute;
 62             padding:0px;
 63             margin:0px;
 64             bottom:0px;
 65             text-align:center;
 66             width:100%;
 67             height:20px;
 68             line-height:20px;
 69             background-color:#000000;
 70             opacity:0.5;
 71             font-size:0px;
 72         }
 73         .containerCircle span{
 74             border:0px;
 75             display:inline-block;
 76             vertical-align:middle;
 77             width:10px;
 78             aspect-ratio:1 / 1;
 79             background-color:#ffffff;
 80             border-radius:50%;
 81             margin:0px 3px;
 82         }
 83        .containerCircle span:hover{
 84            cursor:pointer;
 85            cursor:hand;
 86        }
 87     </style>
 88     
 89 </head>
 90 
 91 <body>
 92     <div class="container">
 93         <ul id="wheelimage">
 94             <li class="containerItem" style="background-color:#4cff00">1</li>
 95             <li class="containerItem" style="background-color:#ff6a00">2</li>
 96             <li class="containerItem" style="background-color:#bf1e1e">3</li>
 97             <li class="containerItem" style="background-color:#953fae">4</li>
 98             <li class="containerItem" style="background-color:#32b213">5</li>
 99         </ul>
100         <span class="prev" onclick="wheelImage.left()"><</span>
101         <span class="next" onclick="wheelImage.right()">></span>
102         <div class="containerCircle">
103             <span onclick="wheelImage.moveto(0)"></span>
104             <span onclick="wheelImage.moveto(1)"></span>
105             <span onclick="wheelImage.moveto(2)"></span>
106             <span onclick="wheelImage.moveto(3)"></span>
107             <span onclick="wheelImage.moveto(4)"></span>
108         </div>
109     </div>
110     <script>
111         let wheelImage = (function () {
112             let start = 0;
113             let maxCount = 5; //轮播的总个数
114             let currentIndex = 0;
115             let _width = 500; //每个轮播图片的宽度
116             let wheelimageObj = document.getElementById("wheelimage");
117             let anim = function () { };
118             anim.prototype.move = function () {
119                 start = -currentIndex * _width;
120                 wheelimageObj.style.left = start + "px";
121             }
122             anim.prototype.left = function () {
123                 if (currentIndex >= maxCount - 1) { currentIndex = maxCount - 1; } else { currentIndex += 1; }
124                 this.move();
125             }
126             anim.prototype.right = function () {
127                 if (currentIndex <= 0) { currentIndex = 0; } else { currentIndex -= 1; }
128                 this.move();
129             }
130             anim.prototype.moveto = function (idx) {
131                 currentIndex = idx;
132                 this.move();
133             }
134             return new anim();
135         })();
136     </script>
137 </body>
138 </html>
效果图如下：
如果还需要进一步的效果图，可以完善上面的代码，我这只是提供了一个思路。供互相学习之用。
posted on 2025-07-09 10:21 华安阅读(10) 评论(0) 收藏举报
刷新页面返回顶部
huaan011

一个简易的轮播图效果，可以根据这个来进行完善

导航

公告
