|
|
@@ -0,0 +1,65 @@
|
|
|
+var picture = document.getElementsByClassName("selected");
|
|
|
+var point = document.getElementsByTagName("li");
|
|
|
+var prev = document.getElementById("prev");
|
|
|
+var next = document.getElementById("next");
|
|
|
+var container = document.getElementById("container");
|
|
|
+// 图片索引
|
|
|
+var isNow = 0;
|
|
|
+// 抽取方法
|
|
|
+var autoPlay = function(ind) {
|
|
|
+ for(var i=0;i<point.length;i++) {
|
|
|
+ point[i].className = '';
|
|
|
+ picture[i].className = 'selected'
|
|
|
+ }
|
|
|
+ point[ind].className = 'active';
|
|
|
+ picture[ind].className = 'selected choose';
|
|
|
+}
|
|
|
+
|
|
|
+// point操作
|
|
|
+for(var i=0;i<point.length;i++) {
|
|
|
+ point[i].index = i;
|
|
|
+ point[i].onclick = function() {
|
|
|
+ // this=>point[i]
|
|
|
+ isNow = this.index;
|
|
|
+ autoPlay(isNow);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 上一页
|
|
|
+prev.onclick = function() {
|
|
|
+ isNow--;
|
|
|
+ if(isNow < 0) {
|
|
|
+ isNow = picture.length - 1;
|
|
|
+ }
|
|
|
+ autoPlay(isNow);
|
|
|
+}
|
|
|
+
|
|
|
+// 下一页
|
|
|
+next.onclick = function() {
|
|
|
+ isNow++;
|
|
|
+ if(isNow > picture.length -1) {
|
|
|
+ isNow = 0;
|
|
|
+ }
|
|
|
+ autoPlay(isNow);
|
|
|
+}
|
|
|
+
|
|
|
+// 自动播放
|
|
|
+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
