JS 利用鼠标切换图片（无定时器）

最新推荐文章于 2020-01-08 20:40:40 发布

枫思然

最新推荐文章于 2020-01-08 20:40:40 发布

阅读量1.2k

点赞数 2

分类专栏： js 文章标签： js图片切换

本文链接：https://blog.csdn.net/qq_38318589/article/details/99050117

版权

js 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

实现效果如下图，可以利用鼠标移动在对应的小点点上，或者点击左右两侧的箭头切换图片，并在图片的上方显示出图片的页数，下方显示出对应图片的标题。

全部代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片切换</title>
    <style>
        .picture {
            position: relative;
            width: 500px;
            height: 333px;
            margin: 0 auto;
            border: 2px solid rgb(231, 127, 217);
            overflow: hidden;
        }

        .radius {
            width: 100%;
            height: 10px;
            position: absolute;
            bottom: 30px;
            text-align: center;
        }

        .pg {         //图片上方页码
            position: absolute;
            margin: 0;
            width: 100%;
            height: 20px;
            background-color: rgba(0, 0, 0, .4);
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            color: #fff;
        }

        .title {
            position: absolute;
            width: 100%;
            bottom: 0px;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            color: rgb(21, 223, 72);
        }

        span {
            display: inline-block;
            border: 10px solid #fdfdfd;
            border-radius: 50%;
        }

        .active {
            border: 10px solid #656466;
        }

        /* 左右箭头  */
        .arrowhead-left,
        .arrowhead-right {
            position: absolute;
            width: 41px;
            height: 69px;
            font-size: 30px;
            line-height: 70px;
            text-align: center;
            color: #D6D8D4;
            background-color: rgba(0,0,0,.3);
        }

        .arrowhead-left {
            left: 0;
            top: 40%;
        }

        .arrowhead-right {
            right: 0;
            top: 40%;
        }
    </style>
</head>

<body>
    <div class="picture">
        <!-- 图片页码 -->
        <p class="pg">封面</p>
        <img src="./image/d8.jpeg" alt="">

        <!-- 小圆点点 -->
        <p class="radius"></p>
        <!-- 图片的下面标题 -->
        <p class="title">标题</p>

        <!-- 左右箭头 -->
        <div class="arrowhead-left" id="al"> < </div> 
        <div class="arrowhead-right" id="ar"> > </div>
    </div>

    <script>
        var address = ["./image/d1.jpeg", "./image/d2.jpeg", "./image/d3.jpeg", "./image/d4.jpeg", "./image/d5.jpeg", "./image/d7.jpeg"];
        //  var imgs = document.getElementsByTagName("img");
        var imgs = document.querySelector("img");
        var len = address.length;
        var str = "";
        var pp = document.getElementsByTagName("p");//获取的是一个集合
        //  var pp  = document.querySelector("p");    //获取的是一个元素
        var al = document.getElementById("al");
        var ar = document.getElementById("ar");
        //添加span标签
        for (i = 0; i < len; i++) {
            str += ' <span></span>'
        }
        console.log(str);
        console.log(pp);
        pp[1].innerHTML = str;
        var spans = pp[1].getElementsByTagName('span');
        spans[0].className = 'active';

        for (i = 0; i < len; i++) {
            spans[i].index = i;
            spans[i].onmouseover = function () {    //所有圆点的类为空
                for (i = 0; i < len; i++) {
                    spans[i].className = "";
                }
                this.className = 'active';           //给点击的span（圆点）添加类名
                imgs.src = address[this.index];    
                pp[0].innerHTML = [this.index + 1] + "/6";
                pp[2].innerHTML = "风光" + [this.index + 1];

            }
        }
        var n = 0 ;
        ar.onclick = function () {

           for (i = 0; i < len; i++) {
                spans[i].className = "";
            }

            spans[n].className = "active";
            imgs.src = address[n];
            pp[0].innerHTML = (n+1) + "/6";
            pp[2].innerHTML = "风光" +(n+1);
            if (n<5) {
               n++; 
           }
            else {
             n=0;
           }
        }
        al.onclick = function () {

         for (i = 0; i < len; i++) {
              spans[i].className = "";
          }
         
          spans[n].className = "active";
          imgs.src = address[n];
          pp[0].innerHTML = (n+1) + "/6";
          pp[2].innerHTML = "风光" +(n+1);
          if (n>0) {
             n--; 
         }
          else {}
           n=(len-1);
         }
         }
    </script>
</body>

</html>

枫思然

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
JS 利用鼠标切换图片（无定时器）

实现效果如下图，可以利用鼠标移动在对应的小点点上，或者点击左右两侧的箭头切换图片，并在图片的上方显示出图片的页数，下方显示出对应图片的标题。全部代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" ...
复制链接

扫一扫

专栏目录