4.18 图片切换【js基础应用】

最新推荐文章于 2024-08-29 10:59:18 发布

qq_31406573

最新推荐文章于 2024-08-29 10:59:18 发布

阅读量182

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_31406573/article/details/51179574

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

点击右边方块图片会切换，而且页码，图片描述会随之变化

思路：第一步---页面样式布局

右边方块由ul，li实现

第二步---js代码

获取页面上的DOM元素后，用循环给每个小方块设置onclick事件，所对应的function实现以下几个功能：更换图片，页码，图片描述，小方块颜色。

图片，图片描述信息可以用数组存放

关键点：自定义属性的应用：数组索引，通过这个属性可以更改图片数组下标来更换图片

小方块的颜色变化：颜色跟着走的两种实现方法：
思路一：全部清空，当前添加

for(var j = 0; j < aLi.length; j++)
aLi[j].className = ""; //全部清空

this.className = "active"; //当前添加

思路二:清空上一个，当前添加（这里的“上一个”的初始值为第一个小方块，也就是aLi[0])

                                                                                  oldLi.className = "";      //清空上一个已选择的
                  this.className = "active";    //当前添加,让颜色变为红色
                                                                                  oldLi = this;       //把当前变为上一个

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>图片切换综合实例</title>
   <style type="text/css">
       ul{
           padding: 0;
           margin: 0;
           list-style: none;
       }
       body{
           background-color: #000;
       }
       #pic{
           width: 600px;
           height: 500px;
           position: relative;
           margin: 50px auto;
       }
       #pic img{
           width: 600px;
           height: 500px;
       }
       #pic ul{
           position: absolute;
           top: 0;
           right: -45px;
       }
       #pic li{
           width: 40px;
           height: 40px;
           margin-bottom: 4px;
           background-color: #ababab;
       }
       #pic .active{
           background-color: red;
       }
       #pic p,span{
           width: 600px;
           height: 30px;
           line-height: 30px;
           text-align: center;
           color: #fff;
           position: absolute;
           left: 0;
           background-color: #000;
           opacity: 0.5;
           margin: 0;

       }
       #pic span{
           top: 0;
       }
       #pic p{
           bottom: 0;

       }
   </style>
   <script type="text/javascript">
       window.onload = function(){
           var oDiv = document.getElementById("pic");
           var oImg = oDiv.getElementsByTagName("img")[0];
           var oSpan = oDiv.getElementsByTagName("span")[0];
           var oP = oDiv.getElementsByTagName("p")[0];
           var oUl = oDiv.getElementsByTagName("ul")[0];
           var aLi = oUl.getElementsByTagName("li");

           var arrPic = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
           var arrTxt = ["one","two","three","four"];
           var index = 0;

           //生成li
           var str = "";
           for(var i = 0; i < arrPic.length; i++)
           {
               str += "<li></li>";
           }
           oUl.innerHTML = str;
           var oldLi = aLi[0];    //初始化上一个li

           //初始化样式
           oImg.src = arrPic[0];
           oSpan.innerHTML = 1 + index + "/" + arrPic.length;
           oP.innerHTML = arrTxt[index];
           aLi[0].className = "active";

           //给每个li添加onclick事件
           for(var i = 0; i < aLi.length; i++)
           {
               aLi[i].num = i;    //自定义属性,数组下标
               aLi[i].onclick = function(){
                   oImg.src = arrPic[this.num];
                   oSpan.innerHTML = 1 + this.num + "/" + arrPic.length;
                   oP.innerHTML = arrTxt[this.num];

                   //颜色跟着走的两种实现方法：
                   //思路一：全部清空，当前添加
                   //思路二:清空上一个，当前添加
                   // for(var j = 0; j < aLi.length; j++)
                   //    aLi[j].className = "";    //全部清空

                   oldLi.className = "";      //清空上一个已选择的
                   this.className = "active";    //当前添加
                   oldLi = this;       //把当前变为上一个
               };
           }
       };
   </script>
</head>
<body>
   <div id="pic">
       <img src="" alt="图片"/>
       <span>数量正在加载中...</span>
       <p>文字正在加载中...</p>

       <ul>

       </ul>
   </div>
</body>
</html>