初学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部分：

 1     <style>
 2     body{
 3         background-color: #000;
 4     }
 5     *{
 6          margin: 0;
 7         padding: 0;
 8     }
 9     .dream{
10         width: 875px;
11         height: 500px;
12         background: url(bg.jpg)no-repeat;
13         margin: 50px auto;
14     }
15     .dream .top{
16         padding-top: 50px;
17         margin-left: 20px;
18     }
19     .dream .top input{
20         width: 75px;
21         border-radius: 5px;
22         background: #fff;
23 
24     }
25     .footer{
26         width: 810px;
27         height:350px;
28         background-color: #ccc;
29         margin: 10px 39px 0 25px;
30     }
31     .footer .b_left{
32         float: left;
33         width: 495px;
34         height: 350px;
35         background-color: #fff;
36         text-align: center;
37         position: relative;
38     }
39     .footer .b_left span,
40     .footer .b_right span{
41         position: absolute;
42         width: 90px;
43         bottom: 50px;
44         left: 50%;
45         margin-left:-45px;
46         font: 600 13px "微软雅黑";
47     }
48     .footer .b_right{
49         float:right; 
50         width: 300px;
51         height: 350px;
52         background-color: #fff;
53         margin-left: 10px;
54         text-align: center;
55          position: relative;
56     }
57     .footer .b_left img{
58         position: absolute;
59         top:20px;
60         left: 20px;
61         width: 450px;
62         height: 250px;
63         
64     }
65     .footer .b_right img {
66         position: absolute;
67         top:20px;
68         right: 20px;
69         width: 250px;
70         height: 250px; 
71     }
72     .footer .b_left strong,
73     .footer .b_right strong{
74         position: absolute;
75         bottom: 20px;
76         left: 20px;
77         font: 300 12px "宋体";
78     }
79     </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>
posted @ 2019-01-03 10:23  DreamHH  阅读(445)  评论(0)  编辑  收藏  举报