CSS+JavaScript实现页面的轮播图

最新推荐文章于 2024-01-05 15:23:10 发布

黛色翩翩

最新推荐文章于 2024-01-05 15:23:10 发布

阅读量549

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44015043/article/details/105817308

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

无论是在访问学校网站，或是一些电商的网站都会有轮播图的设计，如下B站的轮播图：
在这里插入图片描述

我们在不进行点击或是将鼠标放在上面的时候，就是以一个秒数进行轮播，一秒或是两秒，然后把鼠标放在图片上面，鼠标会变成一个小手，同时图片轮播停止在当前页上。
在图片轮播时候，下方会显示轮播到第几章图片会有一个比较明显显示：
在我们将鼠标放在特定的标签上这里就是一个小白点●点击时候就可以跳转到特定的页面，同时下方的标签也会有比较明显的不同，和自动轮询时候是一样的。

实现示例

我们来看我们的简约实现：

能够实现自动的轮播，每隔两秒自动更换图片和下方文字。
在变更图片和文字同时，下方标签颜色也会发生变化，由最开始的灰色变成白色。
将鼠标放在图片上，也可以实现箭头变成一个小手。
在点击（这里没有实现点击的功能，实现的是悬浮功能，悬浮在）特定的标签，就是下方的实心圆，就会立马变动到特定的图片。

实现设计思路

首先对于整个图片一定是要在一个div中，但是可能就会出现图片的大小超过div的范围，所以要实现精确的控制，控制图片的大小正好在div中。
如下图所示的半透明也是控制在一个div中，不过需要使用到rgba来控制透明度，实验半透明的暗色。
对于这个标签，一般也都是在div中，因为使用到div可以给一个id标签，使用id标签更加容易控制我们的具体信息。

当然对于这个●我们是放在一个ul中，无序标签，在li中填写上●。

实现细节

来看body中的内容：

  <div id="imgSlider">
  // 表示最外面的边框。
        <a href="#">
            <img id="pic" src="" alt="">// 表示我们的图片
            <div id="pictest"> // 表示图片下的文本信息。
            </div>
            <div id="dots">
                 <ul id="dotdiv"> // 表示实心圆标签。
            </ul>
            </div> 
        </a>
    </div>

首先是图片和文字都是一一对应的，我们并不能够写死，因为这里只是一个小小的实现，我们使用到数组，将信息存在数组中，在那些大型的网站中的设计都是存储在数据库中，所以我们有以下定义：
我们将图片的地址和文本存在在两个数组中，然后类似于我们java中的数组，使用下标进行读取。这样就可以使用到获取div标签的id信息然后通过具体的标签内容进行访问。

 var pictures=["http://maycope.cn/picture/turn-1.jpg","http://maycope.cn/picture/turn-2.jpeg","http://maycope.cn/picture/turn-3.jpeg","http://maycope.cn/picture/turn-4.jpg"];
var texts=["三潭映月","云色","祖国南疆","杭州旧宅"];

举个栗子 我们想要实现图片的轮播：

先获取到图片标签img的id，然后为其设置src（表示图片地址）：

   var pic=document.getElementById("pic");
   pic.src=pictures[currentpic];
   //currentpic 表示下标值（需要进行取模运算，不能超过我们原有图片的值）

如何实现轮播，就是如何实现每隔2s就自动更换图片？就用到了setInterval(函数名,时间（单位毫秒）)，我们定义一个函数实现图片的显示，同时第二个参数设置为2000表示为2s。
表示每隔2s调用 showImage()来进行图片的展示。
注意：关于这里的setInterval和 clearInterval可以参看函数使用链接

  timer=setInterval(changeImage,2000);
            function changeImage(){
                currentpic++;
                currentpic%=4;
                showImage();
            }
      function showImage(){
          pic.src=pictures[currentpic];
          picText.innerText=texts[currentpic];
      }

如何实现鼠标事件，当鼠标悬停时候图片轮播停止下来，就需要用到了clearInterval来将循环停止下来。函数使用链接

var imgslider=document.getElementById("imgSlider");// 表示获取到整个div的id。
            var timer=null;
            imgslider.onmouseover=function(){// 鼠标悬停在上面时候 停止时间片的轮转。
                clearInterval(timer);
            }
            imgslider.onmouseout=function(){// 鼠标移开时候，重新开始计时。
                timer=setInterval(changeImage,2000);
            }

如何控制在当前的页面第几个标签亮起。因为我们的标签是放在ul里面使用到的事实无序li。

var dotss=document.getElementById("dotdiv");
  for(var i=0;i<pictures.length;i++){
                dotss.innerHTML+="<li>●</li>";// innerhtml 具体使用参看菜鸟教程。
            }
            var alldots=dotss.getElementsByTagName("li");
            // 找出了所有的点
            for(var i=0;i<alldots.length;i++){
                alldots[i].index=i;
                alldots[i].onmouseover=function(){// 获取到鼠标悬停展示对应下标对应的图片。
                    currentpic=this.index;
                    showImage();
                }
            }
              function showImage(){
                pic.src=pictures[currentpic];// 图片
                picText.innerText=texts[currentpic];
                for(var i=0;i<pictures.length;i++){// 标签 控制颜色等。
                    alldots[i].style.color="#ccc";
                    alldots[currentpic].style.color="#fff";
                }
            }

源代码

在实现的过程中没有什么特别大的难度，就是小细节注意到即可，下面贴出完整的css+JavaScript代码，供大家参考。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
      #imgSlider{
          position: relative;
          margin: 40px auto;
          width: 600px;
          height: 400px;     
      }
      #imgSlider>a>img{
          width: 600px;
          height: 400px;
      }
      #pictest{
          position: absolute;
          height: 40px;
          line-height: 40px;
          width: 600px;
          text-align: center;
          top: 360px;
          color: white;
          background-color: rgba(0, 0,0, 0.5);
      }
      #dots{
          position: absolute;
          height: 30px;
          line-height: 30px;
          top: 330px;
          width: 600px;
          text-align: center;
      }
      #dots>ul{
          display: inline-block;
          list-style: none;  
      }
      #dots>ul>li{
          margin-left:6px ;
        float: left;
       color: #ccc;
      }
      #imgSlider:hover{
          cursor: pointer;
          /* 表示变成手 */
      }

    </style>
    <script>
        window.onload=function(){
            // 这里图片使用到自己配置的七牛云图床。
            var pictures=["http://maycope.cn/picture/turn-1.jpg","http://maycope.cn/picture/turn-2.jpeg",
            "http://maycope.cn/picture/turn-3.jpeg","http://maycope.cn/picture/turn-4.jpg"];
            var texts=["三潭映月","云色","祖国南疆","杭州旧宅"];
            var currentpic=0;
            var pic=document.getElementById("pic");
            var picText=document.getElementById("pictest");
            var dotss=document.getElementById("dotdiv");
            var imgslider=document.getElementById("imgSlider");
            var timer=null;
            imgslider.onmouseover=function(){
                clearInterval(timer);
            }
            imgslider.onmouseout=function(){
                timer=setInterval(changeImage,2000);
            }
            for(var i=0;i<pictures.length;i++){
                dotss.innerHTML+="<li>●</li>";
            }
            var alldots=dotss.getElementsByTagName("li");
            // 找出了所有的点
            for(var i=0;i<alldots.length;i++){
                alldots[i].index=i;
                alldots[i].onmouseover=function(){
                    currentpic=this.index;
                    showImage();
                }
            }
            showImage();
            timer=setInterval(changeImage,2000);
            function changeImage(){
                currentpic++;
                currentpic%=4;
                showImage();
            }
            function showImage(){
                pic.src=pictures[currentpic];
                picText.innerText=texts[currentpic];
                for(var i=0;i<pictures.length;i++){
                    alldots[i].style.color="#ccc";
                    alldots[currentpic].style.color="#fff";
                }
            }
        }
    </script>
</head>
<body>
    <div id="imgSlider">
        <a href="#">
            <img id="pic" src="" alt="">
            <div id="pictest"> 
            </div>
            <div id="dots">
                 <ul id="dotdiv"> 
            </ul>
            </div> 
        </a>
    </div>
</body>
</html>

黛色翩翩

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS+JavaScript实现页面的轮播图

前言无论是在访问学校网站，或是一些电商的网站都会有轮播图的设计，如下B站的轮播图：我们在不进行点击或是将鼠标放在上面的时候，就是以一个秒数进行轮播，一秒或是两秒，然后把鼠标放在图片上面，鼠标会变成一个小手，同时图片轮播停止在当前页上。在图片轮播时候，下方会显示轮播到第几章图片会有一个比较明显显示：在我们将鼠标放在特定的标签上这里就是一个小白点●点击时候就可以跳转到特定的页面，同时下方...
复制链接

扫一扫

专栏目录