原生JS写带缩略图的无限平移轮播

最新推荐文章于 2024-06-01 15:19:20 发布

音色丽敏

最新推荐文章于 2024-06-01 15:19:20 发布

阅读量1k

点赞数 1

分类专栏：原生javascript 文章标签：原生JS写带缩略图的无限平移轮播

本文链接：https://blog.csdn.net/qq_40756247/article/details/90641284

版权

原生javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

带缩略图的简单的轮播效果图

效果图如下：
在这里插入图片描述
下面是代码：
html部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
	</head>
	<body>
		<div class="box">
			<ul>
				<li>
					<img src="img/1.jpg" style="top: 0;">
				</li>
				<li>
					<img src="img/2.jpg">
				</li>
				<li>
					<img src="img/3.jpg" >
				</li>
				<li>
					<img src="img/4.jpg" >
				</li>
				<li>
					<img src="img/5.jpg" >
				</li>
				<li>
					<img src="img/6.jpg" >
				</li>
				<li>
					<img src="img/1.jpg">
				</li>
			</ul>
			<div class="ser">
				<div class="left">
				</div>
				<div class="left right">	
				</div>
			</div>
		</div>
		<div class="sbox">
			<ul>
				<li>
					<img src="img/5.jpg" >
				</li>
				<li>
					<img src="img/6.jpg" >
				</li>
				<li>
					<img src="img/1.jpg" >
				</li>
				<li>
					<img src="img/2.jpg" >
				</li>
				<li>
					<img src="img/3.jpg" >
				</li>
				<li>
					<img src="img/4.jpg" >
				</li>
				<li>
					<img src="img/5.jpg" >
				</li>
				<li>
					<img src="img/6.jpg" >
				</li>
				<li>
					<img src="img/1.jpg" >
				</li>
				<li>
					<img src="img/2.jpg" >
				</li>
			</ul>
			<div class="gray">
				<div class="grayon">
					
				</div>
				<div class="grayon" style="opacity: 0;">
					
				</div>
				<div class="grayon">
					
				</div>
			</div>
		</div>
		
		<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

CSS部分：

* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.box {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.box ul{
	position: relative;
	width: 300px;
    height: 300px;
	display: flex;
}
.box ul li{
	width: 300px;
	height: 300px;
}
.box ul li img{
	width: 300px;
	height: 300px;
	position: absolute;
	left: 0;
	top: -300px;
	transition: all 0.5s ease;
}
.sbox{
	width: 300px;
	height: 100px;
	margin: 0 auto;
	position: relative;
	left: 0;
	overflow: hidden;
}
.sbox ul{
	position: relative;
	width: 800px;
	height: 100px;
	display: flex;
	left: -100px;
}
.sbox ul li{
	width: 100px;
	height: 100px;
	float: left;
	background-color: gray;
}
.sbox ul li img{
	width: 80px;
	height: 80px;
	padding: 10px 10px 10px 10px;
}
.ser{
	margin: 0 auto;
	width: 300px;
	height: 60px;
	position: absolute;
	top: 120px;
	z-index: 10;
}
.left{
	display: none;
	float: left;
	width: 60px;
	height: 60px;
	background:url(../img/btn.gif) 0 0 no-repeat;
}
.right{
	float: right;
	background:url(../img/btn.gif) 0 -60px no-repeat;
}
.gray{
	width: 300px;
	height: 100px;
	margin: 0 auto;
	position: absolute;
	top: 0;
}
.grayon{
	width: 100px;
	height: 100px;
	float: left;
	background: rgb(202,203,202,.7);
	cursor: pointer;
}
.grayon:hover{
	background: rgb(202,203,202,0);
}

JS部分：

function $c(cl) {
	return document.getElementsByClassName(cl);
}
var oBox=$c("box")[0];
var oUl = $c("sbox")[0].getElementsByTagName("ul")[0];
var oLi = oUl.getElementsByTagName("li");
var bUL=$c("box")[0].getElementsByTagName("ul")[0];
var bImg=bUL.getElementsByTagName("img");
var arrBtn = $c("left");
var pSha=$c("grayon");
var g = 0,
	kai = true;
arrBtn[0].addEventListener("click", left);
pSha[0].addEventListener("click", left);
arrBtn[1].addEventListener("click", right);
pSha[2].addEventListener("click", right);
oBox.onmousemove=function(ev){
	var oevent = ev || event;
    var distanceX = oevent.clientX-oBox.offsetLeft;
	if(distanceX<150){
		arrBtn[0].style.display="block"
		arrBtn[1].style.display="none"
	}else{
		arrBtn[0].style.display="none"
		arrBtn[1].style.display="block"
	}
}
oBox.onmouseout=function(ev){
	var oevent = ev || event;
    arrBtn[0].style.display="none"
    arrBtn[1].style.display="none"
}

function right() {
	if (kai) {
			kai = false;
			g++;
			bImg[g-1].style.zIndex="4";
            bImg[g].style.zIndex="5";
			bImg[g].style.transition="all 0.5s ease";
		    bImg[g].style.top="0px";
			setTimeout(function() {
			if(g==6){
				bImg[5].style.transition="none";
			}
			bImg[g-1].style.top="-300px";
			if (oUl.style.left == "-700px") {
				g = 0;
				oUl.style.transition = "none";
				oUl.style.left = -100 + "px";
			}
			}, 500);
			setTimeout(function() {
				if(g==0){
			   bImg[6].style.transition="none";
			   bImg[0].style.transition="none";
			   bImg[0].style.top="0px";
			   bImg[6].style.top="-300px";
			}
			pSha[1].style.opacity="0";
			}, 510);
				
			for(i=0;i<pSha.length;i++){
				pSha[i].style.opacity="0.5";
			}
			oUl.style.transition = "all 0.5s ease";
			oUl.style.left = -(g+1)* 100 + "px";
				
			setTimeout(function() {
				kai = true;
			}, 1000);
		}
	}

	function left() {
		if (kai) {
				kai = false;
				g--;
				if(g==-1){
					bImg[6].style.transition="none";
					bImg[6].style.zIndex="4";
					bImg[5].style.zIndex="5";
					bImg[0].style.transition="none";
					bImg[6].style.top="0px";
					bImg[0].style.top="-300px";
					bImg[5].style.transition="all 0.5s ease";
					bImg[5].style.top="0px";
					setTimeout(function() {
						bImg[6].style.top="-300px";
					}, 500);
				}else{
				bImg[g+1].style.zIndex="4";
				bImg[g].style.zIndex="5";
				bImg[g].style.transition="all 0.5s ease";
				bImg[g].style.top="0px";
				setTimeout(function() {
					bImg[g+1].style.transition="none";
					bImg[g+1].style.top="-300px";
					}, 500);
				}
				for(i=0;i<pSha.length;i++){
					pSha[i].style.opacity="0.5";
				}
				oUl.style.transition = "all 0.5s ease";
				oUl.style.left = -(g+1)* 100 + "px";
				setTimeout(function() {
					if (oUl.style.left == "0px") {
						g = 5;
						oUl.style.transition = "none";
						oUl.style.left = -600 + "px";
					}
					}, 500);
				setTimeout(function() {
					pSha[1].style.opacity="0";
				}, 510);	
				setTimeout(function() {
					kai = true;
				}, 1000);
			}
		}
    
    setInterval(right,1000)

（注：图片请自行添加这里是欠缺的）

音色丽敏

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
原生JS写带缩略图的无限平移轮播

带缩略图的简单的轮播效果图效果图如下：下面是代码：html部分：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="c...
复制链接

扫一扫

专栏目录