关于使用JavaScript实现图片点击切换（附带改变导航图片 方案一）

这只是个人学习的记录，想要寻找干货的可以右上角了。

题目要求：（1）在点击左右箭头的时候中间图片会随着点击变换，并且下部导航图片上与大图对应的图片上会出现红色边框；

　　　　　（2）点击下部导航图片时，出现红色边框，其余无边框，且上部大图会随之变成与之对应的图片；

　　　　   （3）图片跳转到第一张或者最后一张时，继续点击图片无变化，可在控制台或者弹窗出现提示信息；

　　　　后续可能会添加功能：（1）在下部导航图片的左右添加按钮，可以实现和大图左右按钮一样的功能

                                        （2）图片轮播

方案一：

HTML代码如下：

<div id="all">
    <div id="left"><img src="images/left.png" /></div>              //定义左面箭头ID为left
    <div id="right"><img src="images/right.png" /></div>　　　　　　　　//定义右面箭头ID为right
    <img src="images/a3.png" id="mid" data-index="0"/>  　　　　　　　　//定义中间图片ID为mid ，定义它的附加属性data-index为0
    <div id="bot">
        <img src="images/a3.png" class="img1" data-index="0"/>
        <img src="images/a4.png" class="img1" data-index="1"/>
        <img src="images/a5.png" class="img1" data-index="2"/>
        <img src="images/a6.png" class="img1" data-index="3"/>
        <img src="images/a9.png" class="img1" data-index="4"/>
        <img src="images/a10.png" class="img1" data-index="5"/>
        <img src="images/a11.png" class="img1" data-index="6"/> 　　　　　　//依次定义下方导航图每个图片的附加属性date-index值
    </div>
    <div class="cb"></div>
</div>

 

以上为HTML代码。

CSS代码如下：

*{
    padding:0;
    margin: 0;
}
#all{
    width: 520px;
    height: 350px;
    margin: 30px auto;
    border: solid 1px red;
}
#left{
    width: 36px;
    padding-top: 100px;
    height: 158px;
    float: left;
}
#right{
    width: 36px;
    height: 158px;
    float: right;
    padding-top: 100px;
}
#mid{
    width: 438px;
    height: 265px;
    float: left;
}
#bot{
    margin-top: 10px;
    float: left;
}
.img1{
    width: 58px;
    height: 49px;
    padding: 3px;
    border:solid 1px #fff;　　　　　　　　　　/*为了让图片在出现边框时不跳动，预先给图片设置边框，颜色与网页背景色相同*/
}

以上为CSS代码。

JS代码如下：

function $$(id) {
    //自定义函数，用于提取元素的ID名
    return document.getElementById(id);
}
//提取并绑定导航图片的类名为imgs
var imgs = document.getElementsByClassName("img1");
//提取并绑定左按钮ID名为left
var left = $$("left");
//提取并绑定右按钮ID名为right
var right = $$("right");
//提取并绑定中间大图ID名为img　　
var img = $$("mid");
//新建一个数组，将所有图片的路径保存在数组里　
var arr = new Array("images/a3.png", "images/a4.png",
        "images/a5.png", "images/a6.png",
        "images/a9.png", "images/a10.png",
        "images/a11.png"
    );
//创建一个名为change的对象　　
var change = {
//定义对象的left方法，用于对左按钮进行操作　　　　
    left: function () {
        //将中间大图片的data-index值存储到变量n中　　　　
        var n = img.getAttribute("date-index");
        //随着向右点击，n值递减        　　　　
        n--;
        //在n的值大于等于0时        　　　　
        if (n >= 0) {
            //中间图片的地址等于数组中相对应的n值        　　　
            img.src = arr[n];
            //调用chang对象的clear方法，将导航图片样式清空            　　　　
            change.clear();
            //第n个导航图片（焦点图片）的边框样式变为红色，焦点图片与大图相对应，均为第n个            　　　　
            imgs[n].style.borderColor = 'red';
            //为大图设定新的data-index的值，值为n，既为初识data-index值减一后的值            　　　
            img.setAttribute("date-index", n);
            //n值小于0的处理方法            　　　　
        } else {
            //弹窗提示已经为第一张图片　　　　
            alert("已经是第一张了");　　　　
        }
    },
    //定义对象的right方法，用于对右按钮进行操作
    right: function () {
        //获取当前大图的data-index的值,存储在变量n中    　
        var n = img.getAttribute("date-index");
        //随着向右点击，n值递加        　　　　
        n++;
        //当n值小于图片总数的时候        　　　　
        if (n < 7) {
            //中间图片的地址等于数组中相对应的n值        　　　
            img.src = arr[n];
            //调用chang对象的clear方法，将导航图片样式清空            　　　
            change.clear();
            //第n个导航图片（焦点图片）的边框样式变为红色，焦点图片与大图相对应，均为第n个　　　
            imgs[n].style.borderColor = 'red';
            //为大图设定新的data-index的值，值为n，既为初始data-index值加一后的值            　　　　
            img.setAttribute("date-index", n);
            //n值小于0的处理方法            　　　　
        } else {
            //弹窗提示已经为第一张图片       　　
            alert("已经是最后一张了");　　　　
        }
    },

    //定义对象的清除样式方法
    clear: function () {
        //遍历7张导航图片   　　　　
        for (var i = 0; i < 7; i++) {
            //将导航图片的边框设为初识样式，白色       　　　　
            imgs[i].style.borderColor = "#fff";　　　　
        }
    },

    //定义对象的点击方法，定义两个形参
    click: function (f, n) {
        //每次点击之前先把导航图片的样式清空    　　　
        change.clear();
        //形参f的边框变红，形参f控制导航图片的样式        　　　　
        f.style.borderColor = "red";
        //中间大图地址变为数组中与形参n对应的值，形参n决定中间大图的地址与导航图片对应地址相同        　　　
        img.src = arr[n];
        //为中间大图设置data-index值为形参n的值        　　
        img.setAttribute("date-index", n);　　　　
    }
}

    //定义右按钮的点击事件
    right.onclick = function () {
    //调用change对象的right方法　　　　
    change.right();　　　　
    }

    //定义左按钮的点击事件
    left.onclick = function () {
        //调用左按钮的点击事件   　　　　
        change.left();　　　　　　
    }

//遍历7张导航图片，此处定义导航图片的点击事件
for (var i = 0; i < imgs.length; i++) {
    //第i张图片的点击事件为　　　　
    imgs[i].onclick = function () {
        //调用chang对象的click方法，并传递两个实参；
        //this指向imgs[i],即被点击的导航图片，对应形参f;
        //this.getAttribute("data-index")为第二个形参n，值为导航图片的data-index的值 　　
        change.click(this, this.getAttribute("data-index"));　　　　
    }　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
}　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

 如何将导航图片的点击切换大图与左右按钮点击切换大图并改变导航图片的样式分析：

为中间图片设置一个data-index的值，写在页面中的数值为0；然后使用getAttribute获取这个值，随着左右按钮的点击，这个值自增1或者自减1；然后重新把这个值赋给图片的data-index，这样图片的data-index值是随着点击的发生改变的。

分别为导航图片设置data-index值，从0增加，当导航图片发生点击时，获取对应的data-index的值，并且根据这个值去数组中取出对应的图片，达到改变中间大图的效果，然后把这个值赋给大图的data-index，这样导航图片点击改变了大图，也改变了大图的data-index值，这样在点击左右按钮时可以与点击导航图片联系起来。

总结：导航图片的点击事件和左右按钮的点击事件是根据data-index的动态变化联系起来的。