关于使用JavaScript实现图片点击切换（附带改变导航图片 方案二）
具体需求见方案一。
这种方案相比方案一更加专业。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#main{
border: solid 1px red;
margin: 20px auto;
width: 500px;
}
#top{
text-align: center;
}
#imgl,#imgr{
margin-bottom: 70px;
}
#img{
margin: 0px 50px;
}
.initClass{
width: 50px;
border: solid 2px #fff;
margin:10px 5px;
}
.focusClass{
width: 50px;
border: solid 2px red;
margin:10px 5px;
}
</style>
<script type="text/javascript" src="js/system.js"></script>
</head>
<body>
<div id="main">
<div id="top">
<img src="data:images/left.png" id="imgl">
<img src="data:images/1.jpg" id="img">
<img src="data:images/right.png" id="imgr">
</div>
<div id="bottom">
<img src="data:images/1.jpg" id="img1" class="focusClass" data-index="1">
<img src="data:images/2.jpg" id="img2" class="initClass" data-index="2">
<img src="data:images/3.jpg" id="img3" class="initClass" data-index="3">
<img src="data:images/4.jpg" id="img4" class="initClass" data-index="4">
<img src="data:images/5.jpg" id="img5" class="initClass" data-index="5">
<img src="data:images/6.jpg" id="img6" class="initClass" data-index="6">
<img src="data:images/7.jpg" id="img7" class="initClass" data-index="7">
</div>
</div>
<script type="text/javascript">
var slide={
arrImg:new Array("images/1.jpg","images/2.jpg","images/3.jpg",
"images/4.jpg","images/5.jpg","images/6.jpg","images/7.jpg"),
initClass:"initClass",
focusClass:"focusClass",
index:1,
arrMax:7,
imgMain:"img"
}
slide.top= {
navEvent: function () {
//上部分大图片显示累加后下标对应的图片
$$(slide.imgMain).src = slide.arrImg[slide.index - 1];
//根据焦点下标值组合成导航图片名称
var n = "img" + slide.index;
//执行对应导航图片的单击事件
$$(n).click();
},
//处理页面上一部分的逻辑
clickRight: function () {
//点击向右按钮处理事件
console.log(slide.index);
//当下标小于或等于最大图片数量时
if (slide.index < slide.arrMax) {
//累加当前焦点下标值
slide.index++;
//执行点击右键时的图片导航效果
slide.top.navEvent();
}
},
clickLeft: function () {
//点击向右按钮处理事件
console.log(slide.index);
if (slide.index > 1) {
//累加当前焦点下标值
slide.index--;
//执行点击左键时的图片导航效果
slide.top.navEvent();
}
}
}
slide.bottom= {
initImgClass: function () {
//初始化全部底部图片的样式
for (var i = 1; i <= slide.arrMax; i++) {
var n = "img" + i;
$$(n).className = slide.initClass;
}
},
initPage: function () {
//处理页面下一部分的逻辑
$$("imgl").onclick=function(){
slide.top.clickLeft();
}
$$("imgr").onclick=function(){
slide.top.clickRight();
}
//获取所有的底部下图片
for (var i = 1; i <= slide.arrMax; i++) {
//为每一张图片绑定点击事件
var n = "img" + i;
$$(n).onclick = function () {
//初始化全部样式
slide.bottom.initImgClass();
//图片元素本身获取焦点样式
this.className = slide.focusClass;
//在上部图片中显示点击小图的对应大图片
$$(slide.imgMain).src=slide.arrImg[this.getAttribute("data-index")-1];
//重新记录焦点图片在数组中的对应下标位置
slide.index=this.getAttribute("data-index");
}
}
}
}
slide.bottom.initPage();
</script>
</body>
</html>
关于使用JavaScript实现图片点击切换（附带改变导航图片 方案二）的更多相关文章
- Js实现图片点击切换与轮播
Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- JS原生隐藏显示图片,点击切换图片的效果
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...
- 3d图片点击切换
效果图: 代码块: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- vue入门：实现图片点击切换
1.实现功能 2.目录结构 3.代码 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- CSS3新增文本属性实现图片点击切换效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 利用DOM的方式点击切换图片及修改文字
本案例主要学习理解,用到的几个DOM方法 01.getAttribute()方法,获取元素的属性值 02.setAttribute('src',source) 方法,用后边的值修改前边这个元素的属性值 ...
- 一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id= ...
- javascript总结36:DOM-点击按钮切换图片案例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- jquery——左右按钮点击切换一组图片功能
一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...
随机推荐
- javascript . 05 json的组成、for...in 遍历对象、简单数据类型与复杂数据类型的传值与传址、内置对象
对象字面量 JSON var obj = { aaa :999}; var json={"aaa":999,"bbb":888}; "kay&quo ...
- MYSQL性能优化--分库分表
1.分库分表 1>纵向分表 将本来可以在同一个表的内容,人为划分为多个表.(所谓的本来,是指按照关系型数据库的第三范式要求,是应该在同一个表的.) 分表理由:根据数据的活跃度进行分离,(因为不同 ...
- 解决子元素用css float浮动后父级元素高度自适应高度
1.在最后一个子元素后面清除浮动 2.父元素加over-flow:hidden;(副作用:子元素定位不能超出父元素的范围) 3.父元素也一样浮动(最笨的方法): 4.子元素使用inline-block ...
- nginx 入门配置
这个星期公司的定期分享内容是Nginx,于是就要写作业了. 一.动静分离 1.下载Windows 版本的Nginx,解压,放到C盘下.进入目录,然后按然shift键右键,打开命令行,输入: start ...
- android开发之-Android 开发之4.0界面设计原则-整理
设计原则: 一.让人着迷: 1.给人惊喜:使用漂亮的界面.精心的动画.适时的音乐. 2.真实的对象比按钮和菜单更有趣 这句话的意思是:使用描述描述性的图标作为快捷方式,界面美观 当然这个快捷方 ...
- 华为C8812E 手机logcat不出日志解决方案
最近在弄Android,使用的测试机为华为C8812E,无论如何也打印不出来日志,在网上搜索了一圈,尝试了很久终于解决了,留作备忘. 华为手机logcat不出日志解决方案 进入拨号界面输入:*#*#2 ...
- web开发与IC卡读卡器
前段时间有个项目在客户端web下使用IC卡读卡器,试了很多种方案都觉得麻烦,最后在网上找了个现成的方案,采用了YW-605HA读卡器,厂家就不说了,免得说做广告.开发起来也挺简单. 他们将IC卡读卡器 ...
- activity生命周期分析（两个activity之间跳转的生命周期执行顺序）
NoteMainActivity点击跳转至NoteListActivity 我们都了解: 当A界面点击进入B界面时,此时 A===onPause--->onStop ...
- 你的计算机也可以看懂世界——十分钟跑起卷积神经网络（Windows+CPU）
众所周知,如果你想研究Deep Learning,那么比较常用的配置是Linux+GPU,不过现在很多非计算机专业的同学有时也会想采用Deep Learning方法来完成一些工作,那么Linux+GP ...
- Mac OS平台下应用程序安装包制作工具Packages的使用介绍（补充）
上一篇:Mac OS平台下应用程序安装包制作工具Packages的使用介绍 补充说明 上一篇文章中介绍了如何使用Packages如何创建mac下的安装包.但是这样制作出来的安装包只能安装到系统的文件路 ...