您的位置:首页 > Web前端 > JavaScript

JavaScript原生实现多组图片切换

2016-05-26 15:43 330 查看
<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.onload=	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].onclick=function () {
iNow--;
num--;
if(iNow==-1){
iNow=arrUrl_two.length-1;
}
if(num==-1){
num=arrUrl.length-1;
}
changleft();
changeright();
};
btn[1].onclick=function () {
left_add();
right_add();
};
left_img.onclick=function () {
left_add();
};
right_img.onclick=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();
}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: