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>
<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(); } }
相关文章推荐
- JSPatch
- jsp el表达式,for循环
- 轻松掌握JavaScript中的Math object数学对象
- enclosejs打包工具的使用方法
- JavaScript监听事件传参
- 2016年5月26日下午(妙味课堂js基础-1笔记三)
- 分享一个插件-水珠自动下落效果
- JSON.parse()和JSON.stringify()
- [Effective JavaScript 笔记]第19条:熟练掌握高阶函数
- jsp中绝对路径显示图片
- Js内存泄露问题总结
- js获取其他页面的变量
- JS在一定时间内跳转页面及各种刷新页面的实现方法
- JavaScript的String字符串对象常用操作总结
- Eclipse去除js(JavaScript)验证错误
- RegExp-js正则表达式对象
- jsp中获取数据中查询出的记录数
- js判断主流浏览器类型和版本号
- 【jcp jsr】 JCP JSR 认识
- js获取select标签选中的值