26行JS代码实现简单左右轮播图效果

最新推荐文章于 2024-09-03 15:05:46 发布

@阿猫阿狗~

最新推荐文章于 2024-09-03 15:05:46 发布

阅读量697

点赞数 1

本文链接：https://blog.csdn.net/qq_25741071/article/details/108332251

版权

文章目录

- - 1、轮播图写法（一）
  - 2、轮播图写法（二）

1、轮播图写法（一）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<link rel="stylesheet" type="text/css" href="https://img1.tiancitycdn.com/project1/csol/event/cs160203act/css/basic.css">
<style>
.total{width: 600px;height: auto;overflow: hidden;}
.total .banner{width: 3000px;}
.total .banner li{width: 600px;float: left;}
.total .banner li img{width: 100%;}
</style>
<body>
	<div class="total">
		<ul id="banner" class="banner">
			<li><img src="http://shp.qpic.cn/ishow/2735081209/1597196301_84828260_17286_sProdImgNo_2.jpg/0" alt=""></li>
			<li><img src="http://shp.qpic.cn/ishow/2735081209/1597195884_84828260_6274_sProdImgNo_2.jpg/0" alt=""></li>
			<li><img src="http://shp.qpic.cn/ishow/2735081209/1597195981_84828260_15756_sProdImgNo_2.jpg/0" alt=""></li>
			<li><img src="http://shp.qpic.cn/ishow/2735082609/1598406105_84828260_10892_sProdImgNo_2.jpg/0" alt=""></li>
			<li><img src="http://shp.qpic.cn/ishow/2735081209/1597196031_84828260_7625_sProdImgNo_2.jpg/0" alt=""></li>
		</ul>
	</div>
	<script>
		var curindex = 0;
		var totalbanner = document.getElementById("banner")
		var maxlen = totalbanner.getElementsByTagName("li").length-1;
		var timer = null;
		timer = setInterval(change_auto,2000);
		function change_auto() {
			console.log(curindex)
			if(curindex<maxlen){
				curindex++;
				get_next();
			}else{
				curindex = 0;
				get_reset()
			}
		}
		var width = 600
		function get_next() {
			totalbanner.style.marginLeft = "-"+width*curindex+"px"
			totalbanner.style.transition = 0.3+"s"
		}
		function get_reset() {
			totalbanner.style.marginLeft = "0px"
			totalbanner.style.transition = 0.1+"s"
		}
	</script>
</body>
</html>

2、轮播图写法（二）

在这里插入图片描述

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="https://img1.tiancitycdn.com/project1/csol/event/cs160203act/css/basic.css">
<script src="https://image.tiancity.com/others/Scripts/jquery-1.7.2.min.js"></script>
</head>
<body>
<style type="text/css">
.wrap{width:800px;height:600px;position: relative;}
.wrap .list{width:100%;height:100%;position: relative;padding-left:0px;}
.wrap .item{position: absolute;width:100%;height:100%;opacity:0;transition:all .8s;}
.wrap .item.active{opacity:1;transition:all .8s;}
.wrap .item img{width:100%;height:100%;}
.wrap .point{width: 18px;height: 18px;background: rgba(0,0,0,1);border-radius:100%;float:left;margin-right:14px;cursor: pointer;}
.wrap .point.active{background: rgba(255,255,255,1);}
.wrap .pointList { position: absolute; bottom: 30px; right: 30px;z-index:9999; }
.wrap .btn{width: 30px;height: 60px;font-size: 30px;position: absolute;top: 50%;margin-top: -30px;}
.goNext {right: 0;}
.goPre {left: 0;}
</style>
<div class="wrap">
	<ul class="list">
		<li class="item active"><img src="http://shp.qpic.cn/ishow/2735081209/1597196031_84828260_7625_sProdImgNo_2.jpg/0" alt=""></li>
		<li class="item"><img src="http://shp.qpic.cn/ishow/2735081209/1597196301_84828260_17286_sProdImgNo_2.jpg/0" alt=""> </li>
		<li class="item"><img src="http://shp.qpic.cn/ishow/2735081209/1597195884_84828260_6274_sProdImgNo_2.jpg/0" alt="">   </li>
		<li class="item"><img src="http://shp.qpic.cn/ishow/2735081209/1597195981_84828260_15756_sProdImgNo_2.jpg/0" alt=""> </li>
		<li class="item"><img src="http://shp.qpic.cn/ishow/2735082609/1598406105_84828260_10892_sProdImgNo_2.jpg/0" alt=""> </li>
	</ul>
	<ul class="pointList">
		<li class="point active" data-index="0"></li>
		<li class="point" data-index="1"></li>
		<li class="point" data-index="2"></li>
		<li class="point" data-index="3"></li>
		<li class="point" data-index="4"></li>
	</ul>
	<button type="button" class="btn goPre" id="goPre"> < </button>
	<button type="button" class="btn goNext" id="goNext"> > </button>
</div>
<script type="text/javascript">
	var items = document.getElementsByClassName('item');//图片
	var points = document.getElementsByClassName("point");//点
	var goPreBtn = document.getElementById('goPre');
	var goNextBtn = document.getElementById('goNext');
	var index = 0; //index表示第几张图片在展示----》第 index 张图片有active这个类名 第几个在展示
	var clearActive = function(){
		for(var i = 0; i < items.length ; i ++ ){
			items[i].className = 'item';
		}
		for(var i = 0; i < points.length ; i ++ ){
			points[i].className = 'point';
		}
	}
	var goIndex = function(){
		clearActive();
		console.log(index);
		points[index].className = 'point active';
		items[index].className = 'item active';
	}
	var goNext = function(){
		if( index < 4 ){
			index++;
		}else{
			index = 0;
		}
		goIndex();
	}
	var goPre = function(){
		if( index == 0 ){
			index=4;
		}else{
			index--;
		}
		goIndex();
	}
	goNextBtn.addEventListener('click',function(){
		goNext()
	})
	goPreBtn.addEventListener('click',function(){
		goPre()
	})
	for(var i = 0; i < points.length ; i ++ ){
		points[i].addEventListener('click',function(){
			var pointIndex = this.getAttribute('data-index');
			index = pointIndex;
			goIndex();
		})
	}
</script>
</body>
</html>