<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>首页</title>
<script>
window.onload=function(){
var b_y=document.getElementsByClassName("block")[0];
b_y.onmouseenter=function(){
leftspan.style.opacity="1";
rightspan.style.opacity="1";
clearInterval(times);
}
b_y.onmouseleave=function(){
leftspan.style.opacity="0";
rightspan.style.opacity="0";
times=setInterval(function(){
fun("left");
},1500);
}
var array=[[250,200,4],
[0,150,3],
[0,100,2],
[250,50,1],
[500,100,2],
[500,150,3]
];
for(var i=1;i<7;i++){
var image=document.createElement("img");
b_y.appendChild(image);
image.className="smalling";
image.src="./image/demo"+i+".jpg";
image.style.left=array[i-1][0]+"px";
image.style.top=array[i-1][1]+"px";
image.style.zIndex=array[i-1][2];
}
var imagelist=document.getElementsByClassName("smalling");
var times=setInterval(function(){
fun("left");
},1500);
function fun(res){
if(res=="left"){
var firstimg=[imagelist[0].style.left,imagelist[0].style.top,imagelist[0].style.zIndex];
for(var i=0;i<imagelist.length;i++){
if(i<imagelist.length-1){
imagelist[i].style.left=imagelist[i+1].style.left;
imagelist[i].style.top=imagelist[i+1].style.top;
imagelist[i].style.zIndex=imagelist[i+1].style.zIndex;
}
else{
imagelist[i].style.left=firstimg[0];
imagelist[i].style.top=firstimg[1];
imagelist[i].style.zIndex=firstimg[2];
}
}
}
else{
var lastimg=[imagelist[5].style.left, imagelist[5].style.top, imagelist[5].style.zIndex];
for(var i=imagelist.length-1;i>=0;i--){
if(i!=0){
imagelist[i].style.left=imagelist[i-1].style.left;
imagelist[i].style.top=imagelist[i-1].style.top;
imagelist[i].style.zIndex=imagelist[i-1].style.zIndex;
}
else{
imagelist[i].style.left=lastimg[0];
imagelist[i].style.top=lastimg[1];
imagelist[i].style.zIndex=lastimg[2];
}
}
}
setTimeout(function fun(){
smalldian[count].style.backgroundColor="";
if(res=="left"){
count++;
if(count>smalldian.length-1){
count=0;
}
}
else{
count--;
if(count<0){
count=smalldian.length-1;
}
}
smalldian[count].style.backgroundColor="red"
},250)
}
var leftspan=document.createElement("span");
leftspan.innerHTML="<";
leftspan.className="lefts";
b_y.appendChild(leftspan);
leftspan.addEventListener("click",function(e){
if(e.detail>1){
return;
}
fun("left");
});
var rightspan=document.createElement("span");
rightspan.innerHTML=">";
rightspan.className="rights";
b_y.appendChild(rightspan);
rightspan.addEventListener("click",function(e){
if(e.detail>1){
return;
}
fun("right");
}
);
var dianpar=document.createElement("div");
b_y.appendChild(dianpar);
dianpar.className="dianpar1";
for(var k=0;k<imagelist.length;k++){
var dian=document.createElement("div");
dianpar.appendChild(dian);
dian.className="dian1"
}
var smalldian=document.getElementsByClassName("dian1");
smalldian[0].style.backgroundColor="red";
var count=0;
};
</script>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: black;
}
.block{
position: relative;
width: 900px;
height: 400px;
margin: 10% auto;
border: 1px solid white;
}
.smalling{
position: absolute;
width: 400px;
height: 200px;
transition:all 0.5s linear;
}
.lefts{
color: white;
font-size: 50px;
position: absolute;
top: 200px;
z-index: 10;
cursor: pointer;
}
.rights{
color: white;
font-size: 50px;
position: absolute;
right: 0;
top: 200px;
z-index: 10;
cursor: pointer;
}
.dian1{
width: 10px;
height: 10px;
border: 1px solid white;
border-radius:50%;
display: inline-block;
transition: all 0.5s linear;
}
.dianpar1{
position: absolute;
width: 110px;
height: 110px;
left: 395px;
top: 420px;
z-index: 10;
}
</style>
</head>
<body>
<div class="block"></div>
</body>
</html>
js写轮播图
猜你喜欢
转载自blog.csdn.net/qq_42815251/article/details/81712125
今日推荐
周排行