|
|
@@ -0,0 +1,67 @@
|
|
|
+var imgBox = document.querySelectorAll("img");
|
|
|
+var points = document.querySelectorAll("#list li");
|
|
|
+var prev = document.querySelector(".prev");
|
|
|
+var next = document.querySelector(".next");
|
|
|
+var container = document.getElementById("container");
|
|
|
+var currentIndex = 0;
|
|
|
+
|
|
|
+// 封装切换方法
|
|
|
+function autoPlay(ind) {
|
|
|
+ // 清空所有样式
|
|
|
+ for(var i=0;i<points.length;i++) {
|
|
|
+ imgBox[i].className = "choose";
|
|
|
+ points[i].className = "";
|
|
|
+ }
|
|
|
+ // 添加点击下标的样式
|
|
|
+ imgBox[ind].className = "choose active";
|
|
|
+ points[ind].className = "selected";
|
|
|
+}
|
|
|
+
|
|
|
+// 点击按钮切换图片
|
|
|
+for(var i=0;i<points.length;i++) {
|
|
|
+ points[i].index = i;
|
|
|
+ points[i].onclick = function() {
|
|
|
+ console.log("点击")
|
|
|
+ currentIndex = this.index;
|
|
|
+ autoPlay(currentIndex);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 上一页
|
|
|
+prev.onclick = function() {
|
|
|
+ currentIndex--;
|
|
|
+ if(currentIndex < 0) {
|
|
|
+ currentIndex = imgBox.length - 1;
|
|
|
+ }
|
|
|
+ autoPlay(currentIndex);
|
|
|
+}
|
|
|
+
|
|
|
+// 下一页
|
|
|
+next.onclick = function() {
|
|
|
+ currentIndex++;
|
|
|
+ if(currentIndex == imgBox.length) {
|
|
|
+ currentIndex = 0;
|
|
|
+ }
|
|
|
+ autoPlay(currentIndex);
|
|
|
+}
|
|
|
+
|
|
|
+// 自动轮播
|
|
|
+var timer = setInterval(function() {
|
|
|
+ next.onclick();
|
|
|
+},1000)
|
|
|
+
|
|
|
+// 鼠标划入事件
|
|
|
+container.onmousemove = function() {
|
|
|
+ prev.style.display = 'block';
|
|
|
+ next.style.display = 'block';
|
|
|
+ clearInterval(timer)
|
|
|
+}
|
|
|
+
|
|
|
+// 鼠标划出事件
|
|
|
+container.onmouseout = function() {
|
|
|
+ prev.style.display = 'none';
|
|
|
+ next.style.display = 'none';
|
|
|
+ timer = setInterval(function() {
|
|
|
+ next.onclick();
|
|
|
+ },1000)
|
|
|
+}
|
e
