初学js之多组图片切换实例
需求是以上效果展示。话不多说，直接代码显示，不涉及代码优化。已实现功能为目的。
先看html部分：
<body>
<div class="dream" id="dream">
<div class="top">
<input type="button" value="上一组">
<input type="button" value="下一组">
</div>
<div class="footer">
<div class="b_left" id="b_left">
<img src="" alt="">
<span>图片描述加载中...</span>
<strong>图片数量计算中...</strong>
</div>
<div class="b_right" id="b_right">
<img src="" alt="">
<span>图片描述加载中...</span>
<strong>图片数量计算中...</strong>
</div>
</div>
</div>
</body>
然后是CSS部分：
<style>
body{
background-color: #000;
}
*{
margin: 0;
padding: 0;
}
.dream{
width: 875px;
height: 500px;
background: url(bg.jpg)no-repeat;
margin: 50px auto;
}
.dream .top{
padding-top: 50px;
margin-left: 20px;
}
.dream .top input{
width: 75px;
border-radius: 5px;
background: #fff; }
.footer{
width: 810px;
height:350px;
background-color: #ccc;
margin: 10px 39px 0 25px;
}
.footer .b_left{
float: left;
width: 495px;
height: 350px;
background-color: #fff;
text-align: center;
position: relative;
}
.footer .b_left span,
.footer .b_right span{
position: absolute;
width: 90px;
bottom: 50px;
left: 50%;
margin-left:-45px;
font: 600 13px "微软雅黑";
}
.footer .b_right{
float:right;
width: 300px;
height: 350px;
background-color: #fff;
margin-left: 10px;
text-align: center;
position: relative;
}
.footer .b_left img{
position: absolute;
top:20px;
left: 20px;
width: 450px;
height: 250px; }
.footer .b_right img {
position: absolute;
top:20px;
right: 20px;
width: 250px;
height: 250px;
}
.footer .b_left strong,
.footer .b_right strong{
position: absolute;
bottom: 20px;
left: 20px;
font: 300 12px "宋体";
}
</style>
最后是JS部分：
<script>
window.onload = function(){
var oDream = document.getElementById('dream');
var aInp = oDream.getElementsByTagName('input');//找到所有input
var oBlft = document.getElementById('b_left');
var oImg = oBlft.getElementsByTagName('img')[0];
var oSpan = oBlft.getElementsByTagName('span')[0];
var oStrong = oBlft.getElementsByTagName('strong')[0];
var oBright = document.getElementById('b_right');
var oImg2 = oBright.getElementsByTagName('img')[0];
var oSpan2 = oBright.getElementsByTagName('span')[0];
var oStrong2 = oBright.getElementsByTagName('strong')[0]; var arrUrl_l = ['img1/belle.jpg','img1/city.jpg','img1/flower.jpg','img1/rouse.jpg','img1/smail.jpg'];
var arrUrl_r =['img2/load.jpg','img2/pencil.jpg','img2/watch.jpg','img2/water.jpg'];
var arrText_l = ['第一组第1张', '第一组第2张', '第一组第3张', '第一组第4张', '第一组第5张'];
var arrText_r = ['第二组第1张','第二组第2张','第二组第3张','第二组第4张']; var num = 0; //初始化左边
oImg.src = arrUrl_l[num];
oSpan.innerHTML = arrText_l[num];
oStrong.innerHTML = (num+1) + ' / ' + arrUrl_l.length;
oImg.onclick = function(){
if(num == arrUrl_l.length){
num = 0;
}
oImg.src = arrUrl_l[num];
oSpan.innerHTML = arrText_l[num];
oStrong.innerHTML = (num + 1) + ' / ' + arrUrl_l.length;
num++;
} //初始化右边
oImg2.src = arrUrl_r[num];
oSpan2.innerHTML = arrText_r[num];
oStrong2.innerHTML = (num + 1) + ' / ' + arrUrl_r.length;
oImg2.onclick = function () {
if (num == arrUrl_r.length) {
num = 0;
}
oImg2.src = arrUrl_r[num];
oSpan2.innerHTML = arrText_r[num];
oStrong2.innerHTML = (num + 1) + ' / ' + arrUrl_r.length;
num++;
} //关联左右图片联动
for(var i = 0; i<aInp.length;i++){
aInp[i].index = i;
aInp[i].onclick = function(){
if (this.index == arrUrl_l.length) {
this.index = 0;
}
oImg.src = arrUrl_l[this.index];
oSpan.innerHTML = arrText_l[this.index];
oStrong.innerHTML = (this.index + 1) + ' / ' + arrUrl_l.length;
if (this.index == arrUrl_r.length) {
this.index = 0;
}
oImg2.src = arrUrl_r[this.index];
oSpan2.innerHTML = arrText_r[this.index];
oStrong2.innerHTML = (this.index + 1) + ' / ' + arrUrl_r.length;
this.index++;
}
} }
</script>
初学js之多组图片切换实例的更多相关文章
- 原生js实现多组图片切换
这几天一直在练习原生js写效果,需要理清自己的逻辑,做了一个切换多组图片的效果: css样式: * { margin: 0; padding: 0; } body { background: #303 ...
- 极简的js点击组图切换效果
程序员进行前端开发时,时常要用到点击切换组图的动画效果,网上确实有很多此类插件,但是都很麻烦,乌糟糟无数代码,有那个看的时间,自己都能把功能写完了.在这里我提供一段极简的js点击组图切换效果代码,包含 ...
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- js基础练习--控制多组图片切换
js基础练习题,一个按钮控制两组图片的切换,做这题的时候我忽然想到了将num1.mun2……都存放在一个数组中,根据索引值匹配到对应相应组的图片,这样不管有多少组图片都简单的搞定切换,可惜js基础都没 ...
- js应用之实现图片切换效果
数组的操作与应用 数组的定义 var 数组名=new Array(); //创建空数组 var 数组名=new Array(size);//创建指定数组长度的数组 var 数组名=new Array( ...
- JS案例练习：图片切换+切换模式
先附图: CSS样式部分: <style> *{;} body{font-family:'Microsoft YaHei';} .menu{margin:20px auto 0; widt ...
- JS实现简单的图片切换效果
使用图片进行点击切换效果 <!doctype html> <html lang="en"> <head> <meta charset=&q ...
- js带缩略图的图片切换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 2018.7.2 如何用js实现点击图片切换为另一图片，再次点击恢复到原图片
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
随机推荐
- mybatis使用说明
起步:1.创建一个maven项目工程.2.打开pom.xml配置文件,3.设置源代码编码方式为UTF-8.4.设置编译源代码的JDK版本.最好大于1.6版本.5. 重点--添加Mybatis的相关依赖 ...
- ElasticsearchIllegalArgumentException[failed to find analyzer [ik]]问题解决
ElasticsearchIllegalArgumentException[failed to find analyzer [ik]] 没有找到分词器 请查看本博客经得住实践的文章:http://bl ...
- asp.net MVC 4.0 Model元数据回顾——HtmlHelper的ModelMetadata
模板方法包括Display/DisplayFor.Editor/EditorFor.DisplayForModel/EditForModel提供辅助生成Html的模型元数据信息 public stat ...
- 项目开发bug记录
项目开发中遇到了一个问题,类中出现未知属性 ‘ $jacocoData ’,准确的来说,实际上在集成测试阶段,系统自动运行测试用例时,抛出来的异常提示信息,但是在开发阶段是不存在的.这个问题是以前没有 ...
- Struts2笔记3--OGNL
一.OGNL入门 1.简介 OGNL的全称是对象图导航语言(Object-Graph Navigation Language),它是一种功能强大的开源表达式语言,使用这种表达式语言,可以通过某 ...
- ASP.NET MVC中使用窗体验证出现上下文的模型在数据库创建后发生更改，导致调试失败（一）
在ASP.NET MVC中使用窗体验证.(首先要明白,验证逻辑是应该加在Model.View和Controller哪一个里面?由于Model的责任就是负责信息访问与商业逻辑验证的,所以我们把验证逻辑加 ...
- 华为服务器操作系统EulerOS V2.0
平台: linux 类型: 虚拟机镜像 软件包: java-1.8.0 php-5.4.16 python-2.7.5 qt-4.8.5 tomcat-7.0.69 basic software eu ...
- 打包ios软件并发布到应用商店
真心感慨程序员是一个神奇的动物. 昨天接到任务,将项目打包并发布到apple商店.于是乎... 利用Hbuilder打包 需要的3个文件: AppId,描述文件profile,以及私钥证书 必须条件: ...
- 自行解决12306页面显示异常的问题（长城宽带下WWW。12306无法正常使用）
前二天突然发现家里所用的长城宽带的www.12306.cn无法正常显示,点击余票查询或者车票预订均打不开,加载时间非常长,现象好似CSS等资源文件未载入成功(如图所示)更换chrome.firefox ...
- Dynamic typing 动态类型
https://developer.apple.com/library/content/documentation/General/Conceptual/DevPedia-CocoaCore/Dyna ...