JavaScript原生实现多组图片切换

<div class="bg">
	<div>
		<button>上一组</button>
		<button>下一组</button>
	</div>
	<div class="left">
		<img class="left_img" src="img/1.png" alt="">
		<p class="title">第一组第1张图</p>
		<p class="shu">1/4</p>
	</div>
	<div class="right">
		<img class="right_img" src="img/children-1.png" alt="">
		<p class="title">第二组第1张图</p>
		<p class="shu">1/4</p>
	</div>
</div>

</pre><pre name="code" class="css"><style>
	body{
		font-size: 12px;
	}
	*{
		padding: 0;
		margin: 0;
	}
	.bg{
		background: #f2f2f2;
		display: inline-block;
		margin: 100px 100px;
		padding: 20px;
	}
	.title{
		text-align: center;
		color: #000;
		font-weight: bold;
	}
	.left ,.right{
		display: inline-block;
		margin-top: 10px;
		padding: 15px 15px 45px 15px;
		background: #fff;
	}
	.left img{
		width: 400px;
	}
	.left img , .right img{
		height: 300px;
		margin-bottom: 5px;
	}
	.right img{
		width: 250px;
	}
</style>

window.οnlοad=	function e() {
	var left_img=document.getElementsByClassName("left_img")[0];
	var right_img=document.getElementsByClassName("right_img")[0];
	var title=document.getElementsByClassName("title");
	var btn=document.getElementsByTagName("button");
	var shu=document.getElementsByClassName("shu");
	var arrUrl = ["img/1.png","img/2.png","img/3.png","img/4.png"];
	var arrUrl_two= ["img/children-1.png","img/children-2.png","img/children-3.png"];
	var iNow = 0;
	var num=0;

	function changeright() {
		right_img.src=arrUrl_two[iNow];
		title[1].innerHTML="第一组的第"+(iNow+1)+"张图片";
		shu[1].innerHTML=(iNow+1)+"/"+arrUrl_two.length;
	}
	function changleft() {
		left_img.src=arrUrl[num];
		title[0].innerHTML="第一组的第"+(num+1)+"张图片";
		shu[0].innerHTML=(num+1)+"/"+arrUrl.length;
	}
	btn[0].οnclick=function () {
		iNow--;
		num--;
		if(iNow==-1){
			iNow=arrUrl_two.length-1;
		}
		if(num==-1){
			num=arrUrl.length-1;
		}
		changleft();
		changeright();
	};
	btn[1].οnclick=function () {
		left_add();
		right_add();
	};
	left_img.οnclick=function () {
		left_add();
	};
	right_img.οnclick=function () {
		right_add();
	};
	function left_add() {
		num++;
		if(num==arrUrl.length){
			num=0;
		}
		changleft();
	}
	function right_add() {
		iNow++;
		if(iNow==arrUrl_two.length){
			iNow=0;
		}
		changeright();
	}



}




  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值