<script src="common.js"></script>
<script>
var box=my$("box");
var screen=box.children[0]
var imgWidth=screen.offsetWidth;
var ulObj=screen.children[0];
var list=ulObj.children;
var olObj=screen.children[1];
var arr=my$("arr")
var index=0;
for(var i=0;i<list.length;i++){
var liObj=document.createElement("li");
olObj.appendChild(liObj);
liObj.innerHTML=i+1;
liObj.setAttribute("index",i);
liObj.onmouseover=function () {
for (var j=0;j<olObj.children.length;j++) {
olObj.children[j].removeAttribute("class");
}
this.className="current";
index=this.getAttribute("index");
f(ulObj,-index*imgWidth);
}
}
olObj.children[0].className="current";
ulObj.appendChild(ulObj.children[0].cloneNode(true));
var timeId=setInterval(move,2000);
box.onmouseover=function () {
arr.style.display="block";
clearInterval(timeId)
}
box.onmouseout=function () {
arr.style.display="none";
timeId=setInterval(move,2000)
}
my$("right").onclick=move;
my$("left").onclick=function () {
if (index == 0) {
index = 5;
ulObj.style.left = -index*imgWidth + "px";
}
index--;
f(ulObj,-index*imgWidth);
for(var i=0;i<olObj.children.length;i++) {
olObj.children[i].removeAttribute("class");
}
olObj.children[index].className="current";
}
function move() {
if(index==list.length-1){
ulObj.style.left=0+"px";
index=0;
}
index++;
f(ulObj,-index*imgWidth);
if(index==list.length-1){
olObj.children[0].className="current";
olObj.children[olObj.children.length-1].className="";
}else{
for(var i=0;i<olObj.children.length;i++){
olObj.children[i].removeAttribute("class")
}
olObj.children[index].className="current";
}
}
</script>
轮播图原生js代码
猜你喜欢
转载自blog.csdn.net/weixin_44387746/article/details/86482386
今日推荐
周排行