js輪播圖

//js輪播圖：

  1 <style type="text/css">
  2 * {
  3 margin: 0;
  4 padding: 0;
  5 list-style: none;
  6 }
  7 
  8 div {
  9 width: 665px;
 10 height: 442px;
 11 margin: 0 auto;
 12 border: 1px solid #000;
 13 position: relative;
 14 }
 15 
 16 ul {
 17 width: 665px;
 18 height: 442px;
 19 position: relative;
 20 }
 21 
 22 ul>li {
 23 width: 665px;
 24 height: 442px;
 25 position: absolute;
 26 left: 0;
 27 top: 0;
 28 display: none;
 29 }
 30 
 31 ul>li.active {
 32 display: block;
 33 }
 34 
 35 ol {
 36 width: 100px;
 37 height: 14px;
 38 position: absolute;
 39 left: 50%;
 40 margin-left: -50px;
 41 bottom: 20px;
 42 }
 43 
 44 ol>li {
 45 width: 14px;
 46 height: 14px;
 47 float: left;
 48 margin: 0 3px;
 49 border-radius: 50%;
 50 background-color: #fff;
 51 }
 52 
 53 ol>li.active {
 54 background-color: #f00;
 55 }
 56 
 57 a {
 58 color: #eee;
 59 width: 30px;
 60 height: 60px;
 61 font-size: 20px;
 62 line-height: 60px;
 63 text-align: center;
 64 text-decoration: none;
 65 background-color: rgba(0, 0, 0, 0.5);
 66 position: absolute;
 67 top: 191px;
 68 }
 69 
 70 a.prev {
 71 left: 0;
 72 }
 73 
 74 a.next {
 75 right: 0;
 76 }
 77 
 78 a:hover {
 79 background-color: #000;
 80 }
 81 </style>
 82 
 83  
 84 
 85 <div>
 86 <ul>
 87 <li class="active"><img src="img/1.jpeg" /></li>
 88 <li><img src="img/2.jpeg" /></li>
 89 <li><img src="img/3.jpeg" /></li>
 90 <li><img src="img/4.jpeg" /></li>
 91 <li><img src="img/5.jpeg" /></li>
 92 </ul>
 93 <ol>
 94 <li class="active"></li>
 95 <li></li>
 96 <li></li>
 97 <li></li>
 98 <li></li>
 99 </ol>
100 <a class="prev" href="javascript:;">&lt;</a>
101 <a class="next" href="javascript:;">&gt;</a>
102 </div>
103 
104 <script type="text/javascript">
105 //由於鼠標移入我裏面我須要中止動畫 因此獲取一下div
106 var div = document.getElementsByTagName("div")[0];
107 //獲取按鈕 圖片 點點點
108 var prev = document.getElementsByClassName("prev")[0];
109 var next = document.getElementsByClassName("next")[0];
110 
111 var ul_lis = document.getElementsByTagName("ul")[0].getElementsByTagName("li");
112 var ol_lis = document.getElementsByTagName("ol")[0].getElementsByTagName("li");
113 
114 var timer = null; //全局
115 
116 var n = 0; //聲明一個變量用來記錄你當前是在第幾張圖
117 //下一個
118 next.onclick = function() {
119 loopBanner(1, ul_lis.length, 0)
120 }
121 //上一個
122 prev.onclick = function() {
123 loopBanner(-1, -1, ul_lis.length - 1)
124 }
125 //下面點點點
126 for(var i = 0; i < ol_lis.length; i++) {
127 //給每個點點點定義一個自定義屬性名爲index
128 ol_lis[i].index = i;
129 
130 ol_lis[i].onclick = function() {
131 for(var j = 0; j < ol_lis.length; j++) {
132 ol_lis[j].className = "";
133 ul_lis[j].className = "";
134 }
135 //點擊哪一個點點點 哪一個點點點變色
136 this.className = "active";
137 //與點點點對應的圖片顯示
138 ul_lis[this.index].className = "active";
139 //讓左右按鈕和點點點進行關聯
140 n = this.index;
141 }
142 }
143 //自動輪播
144 timer = setInterval(function() {
145 //下一個的代碼
146 loopBanner(1, ul_lis.length, 0);
147 }, 1000)
148 //鼠標移入清除定時器
149 div.onmouseenter = function() {
150 clearInterval(timer);
151 }
152 //鼠標移出再度開啓定時器
153 div.onmouseleave = function() {
154 timer = setInterval(function() {
155 //下一個的代碼
156 loopBanner(1, ul_lis.length, 0);
157 }, 1000)
158 }
159 
160 //把下一張和上一張封裝成一個函數
161 function loopBanner(val, limit, target) {
162 n = n + val;
163 if(n === limit) {
164 n = target;
165 }
166 //先把全部的圖片和點點點清空
167 for(var i = 0; i < ul_lis.length; i++) {
168 ul_lis[i].className = "";
169 ol_lis[i].className = "";
170 }
171 ul_lis[n].className = "active";
172 ol_lis[n].className = "active";
173 }
174 </script>