|
|
| 第1行： |
第1行： |
| /* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */ | | /* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */ |
|
| |
|
| |
| window.onload=function(){
| |
| var items=document.getElementsByClassName("item");
| |
| var circles=document.getElementsByClassName("circle");
| |
| var leftBtn=document.getElementById("btn-left");
| |
| var rightBtn=document.getElementById("btn-right");
| |
| var content=document.querySelector('.content');
| |
| var index=0;
| |
| var timer=null;
| |
|
| |
| //清除class
| |
| var clearclass=function(){
| |
| for(let i=0;i<items.length;i++){
| |
| items[i].className="item";
| |
| circles[i].className="circle";
| |
| circles[i].setAttribute("num",i);
| |
| }
| |
| }
| |
| /*只显示一个class*/
| |
| function move(){
| |
| clearclass();
| |
| items[index].className="item active";
| |
| circles[index].className="circle white";
| |
| }
| |
| //点击右边按钮切换下一张图片
| |
| rightBtn.onclick=function(){
| |
| if(index<items.length-1){
| |
| index++;
| |
| }
| |
| else{
| |
| index=0;
| |
| }
| |
| move();
| |
| }
| |
| //点击左边按钮切换上一张图片
| |
| leftBtn.onclick=function(){
| |
| if(index<items.length){
| |
| index--;
| |
| }
| |
| else{
| |
| index=items.length-1;
| |
| }
| |
| move();
| |
| }
| |
| //开始定时器，点击右边按钮，实现轮播
| |
| timer=setInterval(function(){
| |
| rightBtn.onclick();
| |
| },1500)
| |
| //点击圆点时，跳转到对应图片
| |
| for(var i=0;i<circles.length;i++){
| |
| circles[i].addEventListener("click",function(){
| |
| var point_index=this.getAttribute("num");
| |
| index=point_index;
| |
| move();
| |
| })
| |
|
| |
| }
| |
| //鼠标移入清除定时器，并开启一个三秒的定时器，使慢慢转动
| |
| content.onmouseover=function(){
| |
| clearInterval(timer);
| |
| timer=setInterval(function(){
| |
| rightBtn.onclick();
| |
| },3000)
| |
| }
| |
| //鼠标移出又开启定时器
| |
| content.onmouseleave=function(){
| |
| clearInterval(timer);
| |
| timer=setInterval(function(){
| |
| rightBtn.onclick();
| |
| },1500)
| |
| }
| |
| }
| |