具体需求见方案一。

这种方案相比方案一更加专业。

 <!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实现图片点击切换（附带改变导航图片 方案二）的更多相关文章

  1. Js实现图片点击切换与轮播

    Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  2. JS原生隐藏显示图片,点击切换图片的效果

    今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...

  3. 3d图片点击切换

    效果图: 代码块: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  4. vue入门：实现图片点击切换

    1.实现功能 2.目录结构 3.代码 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  5. CSS3新增文本属性实现图片点击切换效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 利用DOM的方式点击切换图片及修改文字

    本案例主要学习理解,用到的几个DOM方法 01.getAttribute()方法,获取元素的属性值 02.setAttribute('src',source) 方法,用后边的值修改前边这个元素的属性值 ...

  7. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

  8. javascript总结36:DOM-点击按钮切换图片案例

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  9. jquery——左右按钮点击切换一组图片功能

    一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...

随机推荐

  1. 任务一：零基础HTML编码练习

    任务目的 了解HTML的定义.概念.发展简史 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 任务描述:完成一个HTML页面代 ...

  2. 老李推荐：第5章5节《MonkeyRunner源码剖析》Monkey原理分析-启动运行: 获取系统服务引用

    老李推荐:第5章5节<MonkeyRunner源码剖析>Monkey原理分析-启动运行: 获取系统服务引用   上一节我们描述了monkey的命令处理入口函数run是如何调用optionP ...

  3. Hibernate（三）之配置文件详解

    一.核心配置文件(hibernate.cfg.xml) <?xml version="1.0" encoding="UTF-8"?> <!DO ...

  4. Codeforces Round #384 (Div. 2).C

    C. Vladik and fractions time limit per test 1 second memory limit per test 256 megabytes input stand ...

  5. Linux的链接文件-ln命令

    Linux的链接文件 使用ln命令来创建链接文件(link) Linux链接分两种:硬链接(Hard Link),符号链接(Symbolic Link) 默认情况下,ln命令产生硬链接. [root@ ...

  6. Memcached与MySQL数据同步

    1.介绍 在生产环境中,我们经常使用MySQL作为应用的数据库.但是随着用户的增多数据量的增大,我们将会自然而然的选择Memcached作为缓存数据库,从而减小MySQL的压力.但是memcached ...

  7. 1px 究竟是多大

    一.引言 1px 究竟是多大?这应该是一道很不错的面试题.且看: 1.iphone6s 的分辨率是1920px * 1080px 2.iphone6s 全屏截图文件的尺寸是1242px * 2208p ...

  8. python 面向对象编程（二）

    在上一篇文章中谈到了类的基本定义和使用方法,这只体现了面向对象编程的三大特点之一:封装. 下面就来了解一下另外两大特征:继承和多态. 在Python中,如果需要的话,可以让一个类去继承一个类,被继承的 ...

  9. 原生态JS实现banner图的常用所有功能

    虽然,用jQuery实现banner图的各种效果十分简单快捷,但是我今天用css+js代码实现了几个banner图的常用功能,效果还不错. 此次,主要想实现以下功能: 1. banner图循环不间断切 ...

  10. 关于sql、mysql语句的模糊查询分类与详解，包括基本用法和mapper.xml文件里插入写法

    欢迎猿类加qq:2318645572,共同学习进步 实际例子: ssm框架:service业务层->dao层->mappers.xml->junit/test测试 1:service ...