#学习笔记#(40)JS单图+多图轮播切换

最新推荐文章于 2024-10-19 09:58:01 发布

游走走

最新推荐文章于 2024-10-19 09:58:01 发布

阅读量332

点赞数

分类专栏：学习笔记 web

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_24734285/article/details/50651265

版权

学习笔记同时被 2 个专栏收录

108 篇文章 0 订阅

订阅专栏

web

93 篇文章 1 订阅

订阅专栏

html代码

<!DOCTYPE html>
<html>
	<head>
		<title>轮播图</title>
		<meta charset="UTF-8" />
		<link href="carousel.css" rel="stylesheet" />
	</head>
	<body>
		<div class="container">
			<a class="pre" id="pre" οnclick="gotopre()"></a>
			<div class="box" id="box">
				<img src="carouselimgs/1.jpg" class="boximg" />
				<img src="carouselimgs/2.jpg" class="boximg" />
				<img src="carouselimgs/3.jpg" class="boximg" />
				<img src="carouselimgs/4.jpg" class="boximg" />
				<img src="carouselimgs/5.jpg" class="boximg" />
				<img src="carouselimgs/6.jpg" class="boximg" />
				<img src="carouselimgs/7.jpg" class="boximg" />
				<img src="carouselimgs/8.jpg" class="boximg" />
				<img src="carouselimgs/9.jpg" class="boximg" />
				<img src="carouselimgs/10.jpg" class="boximg" />
				<img src="carouselimgs/11.jpg" class="boximg" />
				<img src="carouselimgs/12.jpg" class="boximg" />
			</div>
			<a class="next" id="next" οnclick="gotonext()"></a>
		</div>

多图切换
<div class="container2">
			<a class="pre" id="pre2" οnclick="gotopre2()"></a>
			<div class="box2" id="box2">
				<img src="carouselimgs/1.jpg" class="boximg2" />
				<img src="carouselimgs/2.jpg" class="boximg2" />
				<img src="carouselimgs/3.jpg" class="boximg2" />
				<img src="carouselimgs/4.jpg" class="boximg2" />
			</div>
			<a class="next" id="next2" οnclick="gotonext2()"></a>
		</div>

		<div class="return"><a href="../../coding.html">点我返回</a></div>
	<body>
	<script src="carousel.js"></script>
</html>

JS代码

document.getElementById("box").children[0].className="show";
var prebtn=document.getElementById("pre");
var nextbtn=document.getElementById("next");

function gotopre(){
	var oBoxs=document.getElementById("box").children;
	if(oBoxs[0].className=="show"){//如果是第一张图片要往回切，切到最后一张吧
		oBoxs[0].className="boximg";
		oBoxs[oBoxs.length-1].className="show";
	}else{
		for(var i=1;i<oBoxs.length;i++){
			if(oBoxs[i].className=="show"){	//获取显示的图片序号i
					oBoxs[i-1].className="show";//显示前一张
					oBoxs[i].className="boximg"; //将第i张隐藏
					}
				}
		}
	}

function gotonext(){
	var oBoxs=document.getElementById("box").children;
	if(oBoxs[oBoxs.length-1].className=="show"){//如果是第一张图片要往回切，切到最后一张吧
		oBoxs[oBoxs.length-1].className="boximg";
		oBoxs[0].className="show";
	}else{
		for(var i=oBoxs.length-2;i>=0;i--){
			if(oBoxs[i].className=="show"){	//获取显示的图片序号i
					oBoxs[i+1].className="show";//显示后一张
					oBoxs[i].className="boximg"; //将第i张隐藏
				}
		}
	}
}

/*多图切换，可随意增加图片数量（目前reg的表达式允许图片名称0~999.jpg，若图片名称改变只需修改reg即可）,第一张向前切换时，显示倒数4张，最后一张向后切换时，显示前四张*/
var arr=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg","11.jpg","12.jpg"];//存储所有图片的数组

document.getElementById("box2").children[0].className="show2";
document.getElementById("box2").children[1].className="show2";
document.getElementById("box2").children[2].className="show2";
document.getElementById("box2").children[3].className="show2";

function gotopre2(){
	var oParent=document.getElementById("box2");
	var oBox2=oParent.children;
	var imgsrc=[];//存储显示的图片src
	var index=[];//存储显示的图片的序号
	var reg=/[^//]\d{0,3}.jpg$/;//正则表达式用于截取图片名称，存储在imgsrc中用来与arr中的数组作比较
	for(var i=0;i<oBox2.length;i++){
		imgsrc.push(oBox2[i].src.match(reg));
	}

	for(var i=0;i<arr.length;i++){
		for(var j=0;j<imgsrc.length;j++){
			if(arr[i]==imgsrc[j]){
				index.push(i);
				}
			}
		}

	for(var i=oBox2.length-1;i>=0;i--){//遍历显示的图片
		if(index[i]>0){//如果没显示到第一张
			oBox2[i].src="carouselimgs/"+arr[index[i]-1];//显示的图片就继续往前切
			}else{//否则就从最后一张显示
				for(var j=0;j<oBox2.length;j++){
					oBox2[oBox2.length-j-1].src="carouselimgs/"+arr[arr.length-j-1];
				}		
			}
		}
}

function gotonext2(){
	var oParent=document.getElementById("box2");
	var oBox2=oParent.children;
	var imgsrc=[];//存储显示的图片src
	var index=[];//存储显示的图片的序号
	var reg=/[^//]\d{0,3}.jpg$/;
	for(var i=0;i<oBox2.length;i++){
		imgsrc.push(oBox2[i].src.match(reg));
	}

	for(var i=0;i<arr.length;i++){
		for(var j=0;j<imgsrc.length;j++){
			if(arr[i]==imgsrc[j]){
				index.push(i);
				}
			}
		}

	for(var i=0;i<oBox2.length;i++){//遍历显示的图片
		if(index[i]<arr.length-1){//如果没显示到最后一张
			oBox2[i].src="carouselimgs/"+arr[index[i]+1];//显示的图片就继续往后切
			}else{//否则就重新从头显示
				for(var j=0;j<oBox2.length;j++){
					oBox2[j].src="carouselimgs/"+arr[j];
				}		
			}
		}
}

CSS代码

.container{
	width:320px;
	height:150px;
	margin:50px auto;
}
.box{
	width:220px;
	height:150px;
	overflow:hidden;
	float:left;
	border:1px solid #ccc;
}
.boximg{
	width:220px;
	height:150px;
	float:left;
	display:none;
}
.pre{
	width:20px;
	height:150px;
	background-image:url("carouselimgs/pre.jpg");
	background-repeat:no-repeat;
	display:block;
	float:left;
	cursor:pointer;
	margin-right:15px;
}
.next{
	width:20px;
	height:150px;
	background-image:url("carouselimgs/next.jpg");
	background-repeat:no-repeat;
	display:block;
	float:left;
	cursor:pointer;
	margin-left:15px;
}
@keyframes show{
	0%{
		display:block;
		opacity:0.1;
	}
	50%{
		display:block;
		opacity:0.5;
	}
	100%{
		display:block;
		opacity:1;
	}
}
.show{
	width:220px;
	height:158px;
	float:left;
	animation:show 1s;
	display:block;
}
.container2{
	width:968px;
	height:150px;
	margin:20px auto;
}
.box2{
	width:896px;
	height:156px;
	overflow:hidden;
	float:left;
	border:1px solid #ccc;
}
.boximg2{
	width:220px;
	height:150px;
	float:left;
	display:none;
}
.show2{
	width:220px;
	height:158px;
	padding:3px 2px;
	float:left;
	animation:show 1s;
	display:block;
}
.return{
	bottom:50px;
	right:50px;
	position:fixed;
	width:60px;
	height:60px;
	background-color:#ccc;
	opacity:0.8;
	color:green;
	font-size:12px;
	font-family:微软雅黑;
	text-align:center;
	line-height:60px;
	border-radius:50%;
}
.return:hover{
	opacity:1;
}
a{
	color:green;
	text-decoration:none;
}