js中用面向对象的思想——淡入淡出轮播图

首先看下效果图

明确功能 1.前后切换（边界判断） 2.按键切换  3.自动轮播

css代码

<style>
* {margin:0; padding:0;}
li{list-style:none; }

#div1 {width:850px; height:500px; margin:50px auto; overflow:hidden; position:relative;}
#div1 ul li{height:500px;opacity: 0;position: absolute;left: 0;top: 0;z-index: 0;transition: opacity 1.5s;}
#div1 ul li.ac{z-index: 5;opacity: 1;}
#div1 ol {position:absolute;right: 10%;bottom: 10px;z-index:6}
#div1 ol li{width: 20px;height: 20px;background: #fff;margin-left: 5px;float: left;line-height: 20px;text-align: center;cursor: pointer;}
#div1 ol li.ac{background: red;color: #fff;}
#div1>a{text-decoration: none;position: absolute;top: 50%;margin-top: -10px;height: 40px;line-height: 32px;text-align: center;width: 40px;font-size: 40px;vertical-align: middle;color: #fff;background: rgba(0,0,0,0.5);z-index:6;}
#goPrev{left: 0;}
#goNext{right: 0;}
img{width:850px; height:500px;}
</style>

 

body中的代码

 1 <div id="div1">
 2     <ul>
 3         <li class="ac"><a href="javascript:alert(0);"><img src="/1.jpg" /></a></li>
 4         <li><a href="javascript:alert(1);"><img src="/2.jpg" /></a></li>
 5         <li><a href="javascript:alert(2);"><img src="/3.jpg" /></a></li>
 6         <li><a href="javascript:alert(3);"><img src="/4.jpg" /></a></li>
 7         <li><a href="javascript:alert(4);"><img src="/5.jpg" /></a></li>
 8     </ul>
 9     <ol>
10         <li class="ac">1</li>
11         <li>2</li>
12         <li>3</li>
13         <li>4</li>
14         <li>5</li>
15     </ol>
16     <a href="javascript:;" id="goPrev">&laquo;</a>
17     <a href="javascript:;" id="goNext">&raquo;</a>
18 </div>

js代码

 1 class LB{
 2 
 3         constructor(){
 4 
 5             this.div = document.querySelector('#div1'),
 6             this.imgs = this.div.querySelectorAll('ul li'),
 7             this.btns = this.div.querySelectorAll('ol li'),
 8             this.goPrev = document.querySelector('#goPrev'),
 9             this.goNext = document.querySelector('#goNext');
10 
11             this.iNow = 0
12             this.iLast = 0
13             this.timer = null
14 
15             this.BtnsEvent()
16             this.goEvent()
17             this.gotimer()
18            
19         }
20 
21         BtnsEvent(){
22 
23             Array.from(this.btns).forEach((btns,i) => {
24 
25                 this.btns[i].onclick = () => {
26                     this.iLast = this.iNow
27                     this.iNow = i
28                     this.change()
29                 }
30             })
31         }
32 
33         goEvent(){
34 
35             //向->切换
36             this.goNext.onclick = () => {
37                 
38                     this.iLast = this.iNow
39                     this.iNow == this.btns.length-1? this.iNow=0:this.iNow++
40                     this.change()      
41             }
42 
43             //向<-切换  
44             this.goPrev.onclick = () => {    
45 
46                     this.iLast = this.iNow
47                     this.iNow == 0? this.iNow=this.btns.length-1:this.iNow--
48                     this.change()
49             }
50 
51         
52         }
53 
54 
55         gotimer(){
56 
57             this.timer = setInterval(this.goNext.onclick,2000)
58 
59             this.div.onmouseenter = () => {
60                 clearInterval(this.timer)
61           }
62 
63            this.div.onmouseleave = () => {
64 
65                 this.timer = setInterval(this.goNext.onclick,2000)
66            }
67         }
68 
69         //更改图片
70         change(){
71 
72             this.btns[this.iLast].className = ''
73             this.imgs[this.iLast].className = ''        
74             this.btns[this.iNow].className = 'ac'
75             this.imgs[this.iNow].className = 'ac'
76 
77         }
78 
79          
80         
81     }
82 
83 
84     var lb =new LB('#div1')
85

 效果已实现

posted @ 2019-09-17 09:44  我亦飘零久矣  阅读(418)  评论(0)  编辑  收藏  举报