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

妖狐艹你老母 2022-12-02 15:27 159阅读 0赞

### 文章目录 ###

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

### 1、轮播图写法（一） ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70_pic_center 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、轮播图写法（二） ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70_pic_center 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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/c434b73ba33440349e408a1bcc690ff6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/621a2c3e03b64e9385665ee9e1e1b78c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/10dbcc3389944484b74b5f2e4037ebc6.png