Native Js achieved, clicks on a button or a picture conversion

	//html代码
	<button  onclick="fn(-1)">上一张</button>
	<img id='img'/>
	<button onclick="fn(1)">下一张</button>
	
	//scc代码
	<script>
		var arr=[
				"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4276206182,2465985645&fm=26&gp=0.jpg",

				"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=125971785,2874874706&fm=26&gp=0.jpg",
				"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1750092683,3281363863&fm=26&gp=0.jpg",
				"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=739944627,1089982530&fm=26&gp=0.jpg",
				"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1119215288,1633774896&fm=26&gp=0.jpg",
				"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=487065548,1315929783&fm=26&gp=0.jpg",
				"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3260512285,4270867022&fm=26&gp=0.jpg"
		]
		var img=document.getElementById('img');
		img.src=arr[0];//给个默认图片
		window.onload=function(){//页面加载完,立马执行
			var oimg=[];
			for(var i=0;i<arr.length;i++){
				oimg[i]=new Image();//创建了一组img标签  或者创建img标签,然后在添加进去
				oimg[i].src=arr[i];
				console.log(oimg[i]);
			}
		}
		var i=0;
		function fn(n){
			if(n==1){
				i++;
				i==arr.length-1?i=0:i;//三木运算符
			}else{
				i==0?i=arr.length-1:i;
				i--;
			}
			img.src=arr[i];
		}
	</script>

Guess you like

Origin blog.csdn.net/sneer_shen/article/details/94739031