首页 > 代码库 > JS+css3焦点轮播图PC端

JS+css3焦点轮播图PC端

2024-11-20 01:52:02   202人阅读

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>js原生web轮播图</title>
  6     <style>
  7         *{
  8             margin:0;
  9             padding:0;
 10             list-style: none;
 11             -moz-user-select: none;/*文字不可选择*/
 12             -khtml-user-select: none;/*文字不可选择*/
 13             user-select: none;/*文字不可选择*/
 14         }
 15         #container{
 16             width: 600px;
 17             height: 400px;
 18             position: relative;
 19             overflow: hidden;
 20         }
 21         #slider{
 22             margin-left:-600px;
 23             width: 4200px;
 24             height: 400px;
 25         }
 26         #slider li{
 27             width: 600px;
 28             height: 400px;
 29             float: left;
 30         }
 31         img{
 32             width: 600px;
 33             height: 400px;
 34         }
 35         #prev{
 36             position: absolute;
 37             top:40%;
 38             left:0px;
 39             width: 50px;
 40             height: 50px;
 41             background-color: #eee;
 42             z-index: 999;
 43             line-height:50px;
 44             text-align: center;
 45         }
 46         #prev:hover{
 47             cursor: pointer;
 48         }
 49         #next{
 50             position: absolute;
 51             top:40%;
 52             right:0px;
 53             width: 50px;
 54             height: 50px;
 55             background-color: #eee;
 56             z-index: 999;
 57             line-height:50px;
 58             text-align: center;
 59         }
 60         #next:hover{
 61             cursor: pointer;
 62         }
 63         #dotul{
 64             position: absolute;
 65             bottom:100px;
 66             left:38%;
 67             width: 150px;
 68             height: 20px;
 69         }
 70         .dot{
 71             background-color: green;
 72         }
 73         #dotul li{
 74             margin-left:10px;
 75             width: 20px;
 76             height: 20px;
 77             float: left;
 78             border-radius: 10px;
 79             z-index: 999;
 80         }
 81         li{
 82             background-color: red;
 83         }
 84     </style>
 85 </head>
 86 <body>
 87     <div id="container">
 88         <ul id="slider">
 89             <li><img src="5.jpg" alt=""></li>
 90             <li><img src="1.jpg" alt=""></li>
 91             <li><img src="2.jpg" alt=""></li>
 92             <li><img src="3.jpg" alt=""></li>
 93             <li><img src="4.jpg" alt=""></li>
 94             <li><img src="5.jpg" alt=""></li>
 95             <li><img src="1.jpg" alt=""></li>
 96         </ul>
 97         <ul id="buttons">
 98             <li id="prev">上一张</li>
 99             <li id="next">下一张</li>
100         </ul>
101         <div id="dots">
102             <ul id="dotul">
103                 <li index="1" class="dot"></li>
104                 <li index="2"></li>
105                 <li index="3"></li>
106                 <li index="4"></li>
107                 <li index="5"></li>
108             </ul>
109     </div>
110     </div>
111     
112     <script>
113         var container = document.getElementById(‘container‘);
114         var slider = document.getElementById(‘slider‘);
115         var prev=document.getElementById(‘prev‘);
116         var next=document.getElementById(‘next‘);
117         var dots=document.getElementById(‘dotul‘).getElementsByTagName(‘li‘);
118         var index=1;
119         var timer;
120         function dotsInit(){
121             for (var i = 0; i < dots.length; i++) {
122                 console.log(dots[i]);
123                 dots[i].onclick=function(){
124                     var $index=parseInt(this.getAttribute("index"));
125                     slider.style.marginLeft=($index)*(-600)+"px";
126                     index=$index;
127                 }
128             }
129         }
130         dotsInit();
131         function animate(option){
132             var sliderLeft=slider.offsetLeft;
133             slider.style.marginLeft=parseInt(sliderLeft)+option+‘px‘;
134         }
135         function dotsTurn(){
136             for(var i=0;i<dots.length;i++){
137                 if(dots[i].getAttribute(‘index‘)==index){
138                     dots[i].className=‘dot‘
139                 }else{
140                     dots[i].className=‘‘
141                 }
142             }
143         }
144         prev.onclick=function(){
145             if(slider.offsetLeft % 600 !=0){
146                 return;
147             }
148             slider.style.transition="0.5s";
149             animate(600);
150             (index==1)?(index=5):index--;
151         }
152         next.onclick=function(){
153             if(slider.offsetLeft % 600 !=0){
154                 return;
155             }
156             slider.style.transition="0.5s";
157             animate(-600);
158             (index==5)?(index=1):index++;
159         }
160         slider.addEventListener("transitionend",function(){
161             if(slider.offsetLeft==-3600){
162                 slider.style.transition="0s";
163                 slider.style.marginLeft="-600px";
164             }
165             if(slider.offsetLeft==0){
166                 slider.style.transition="0s";
167                 slider.style.marginLeft="-3000px";
168             }
169             dotsTurn();
170         });
171         function init(){
172             slider.style.transition="0.5s";
173             timer=setInterval(next.onclick,5000);
174         }
175         init();
176         slider.addEventListener(‘mouseenter‘,function(){
177             clearInterval(timer);
178         })
179         slider.addEventListener(‘mouseout‘,init)
180     </script>
181 </body>
182 </html>

 

JS+css3焦点轮播图PC端


联系
我们