光遇——我的朋友们

最新推荐文章于 2024-07-18 21:29:30 发布

蛞蝓不孤寡

最新推荐文章于 2024-07-18 21:29:30 发布

阅读量622

点赞数 2

分类专栏：玩乐

本文链接：https://blog.csdn.net/fish_skyyyy/article/details/109539025

版权

玩乐专栏收录该内容

1 篇文章 0 订阅

订阅专栏

写给我的朋友们（娱乐，无教学）

刚好最近学习了 js 轮播，闲来无事写了一个我们照片的轮播（没有教学，没有注释，轮播讲解个人主页里有，此篇纯属娱乐）
上结果图：
在这里插入图片描述

<div id="container">
	<div id="imglist" style="left: 0;">
		<img src="img/img01.jpg" alt="">
		<img src="img/img02.jpg" alt="">
		<img src="img/img03.jpg" alt="">
		<img src="img/img04.jpg" alt="">
		<img src="img/img05.jpg" alt="">
		<img src="img/img06.jpg" alt="">
		<img src="img/img07.jpg" alt="">
		<img src="img/img08.jpg" alt="">
	</div>
	<a href="javascript:;" id="left" class="arrow">&lt;</a>
	<a href="javascript:;" id="right" class="arrow">&gt;</a>
</div>

#container{width: 600px;height: 300px;border: 2px solid black;overflow: hidden;position: relative;}
#imglist{width: 4800px;height: 300px;position: absolute;z-index: 1;}
#imglist>img{width: 600px;height: 300px;float: left;}
.arrow{width: 40px;height: 40px;background-color:rgba(0,0,0,1);
color: #fff;text-decoration: none;line-height: 40px;position: absolute;z-index: 2;
font-weight: bold;top: 130px;text-align: center;display: none;cursor: pointer;}
.arrow:hover{background-color:rgba(0,0,0,0.8);}
#container:hover .arrow{display: block;}
#left{left: 20px;}
#right{right: 20px;}
#imglist{transition: left 1s;}
.imglist{transform: left 0.1s;}

window.onload=function(){
	var container=document.getElementById("container");
	var imglist=document.getElementById("imglist");
	var left=document.getElementById("left");
	var right=document.getElementById("right");
	var timer;
}
function animals(offset){
	var newlist=parseInt(imglist.style.left)+offset;
	imglist.style.left=newlist+"px";
	if(newlist>0){
		imglist.style.left=-4200+"px";
		imglist.setAttribute("class","imglist");
	}
	if(newlist<-4201){
		imglist.style.left=0+"px";
		imglist.setAttribute("class","imglist");
	}
}
left.onclick=function(){
	animals(600);
}
right.onclick=function(){
	animals(-600);
}
function start(){
	timer=setInterval(function(){
		right.onclick();
	},2000);
}
start();
function stop(){
	clearInterval(timer);
}
container.onmouseenter=stop;
container.onmouseleave=start;