js轮播（三种方式）

方式一

1.先将图片信息封装成一个数组的全局变量。
2.创建一个全局变量 i 用于操作数组的下标。
3.点击上、下一个按钮时，触发函数，使 i 自增或自减
4.通过字符串拼接的方式，拼接 url。

js代码：

<script type="text/javascript">
	//images 用于存储图片信息。可通过下标获取
	var images = [
		"01.webp",
		"02.webp",
		"03.jpg",
		"04.webp",
	];
	var i = 0;//用于操作数组的下标
	
	//点击下一个按钮时，触发的函数。
	function next(){
   
		i++;
		i = i>images.length-1 ? 0:i ;//控制i的范围在 数组元素的取值范围内。实现循环播放
		update(i);
	}
	
	function prev(){
   
		i--;
		i = i<0 ? images.length-1 : i ;//控制i的范围在 数组元素的取值范围内。实现循环播放
		update(i);
	}
	
	//接收不同的下标，将对应下标的图片，写进url。
	function update(n){
   
		var div = document.getElementById("pic_show");
		div.style.backgroundImage="url(img/"+images[i]+")" ;
	}
	
</script>

效果截图

方式二

根据定位。
通过dom操作元素的位置，实现轮播。

js代码

<script type="text/javascript">
	var arr = document.getElementsByClassName("show_pic");//获取显示图片的元素。
	var brr = new Array(arr.length); //创建一个数组用来保存图片的定位信息。

	//点击下一个按钮时触发
	function next(){
   
		
		//为brr赋值
		for(var i=0;i<=arr.length-1;i++){
   
			
			brr[i] = arr[i].offsetLeft - 220 ;//获取元素的位置信息，并且改变
			
			//控制图片的循环播放
			if (brr[i] < -200 ){
   
				brr[i] += 1320;
			} 
			//console.log(brr[i]);
		}
		//重写元素的位置
		for(var i =0;i<=brr.length