利用js写轮播图

最新推荐文章于 2023-04-06 01:30:17 发布

KILIG_yss

最新推荐文章于 2023-04-06 01:30:17 发布

阅读量76

点赞数

分类专栏： js&html 文章标签： js

本文链接：https://blog.csdn.net/Yss915/article/details/118607586

版权

js&html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的轮播图代码示例。通过鼠标悬停显示左右翻页图标，点击小圆点切换图片，并实现了无缝翻页和自动播放功能。此外，还动态生成了底部的小圆点导航，便于用户跟踪当前展示的图片。

摘要由CSDN通过智能技术生成

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="animate.js"></script>
  <script src="index.js"></script>
  <style>
    *{
      padding:0;margin:0;
    }
    .foc{
      position: relative;
      margin: 100px auto;
      width: 300px;
      height: 400px;
      overflow: hidden;
    }
    .foc .tp li img{
      width: 300px;
      height: auto;
    }
    .foc .tp{
      position: absolute;
      top: 0px;
      left: 0px;
      width:600%;
      margin: auto;
    }
    .foc li{
      float: left;
      list-style:none;
    }
    .ri{
      position: absolute;
      background-color: #629b93c9;
      right: 0px;
      top: 190px;
      width: 30px;
      height: 30px;
      z-index: 1;
    }
    .le{
      position: absolute;
      background-color: #629b93c9;
      transform: rotateY(180deg);
      left: 0px;
      top: 190px;
      width: 30px;
      height: 30px;
      z-index: 1;
    }
    .xb{
      position: absolute;
      bottom: 5px;
      left: 100px;
    }
    .xb li{
      float: left;
      margin-right: 10px;
      border: 10px solid rgb(104, 102, 102);
      border-radius: 50%;
    }
    .xb .yes{
      border-color: brown;
    }
    .xb .no{
      border-color: rgb(104, 102, 102);
    }
  </style>
</head>
<body>
  <div class="foc">
    <!-- 上一页和下一页图片 -->
    <a href="#"><img src="next.png" class="ri" alt=""></a>
    <a href="#"><img src="next.png" class="le" alt=""></a>
    <ul class="tp">
      <!-- 轮播图片 -->
      <li>
        <img src="1.jpg" alt="">
      </li>
      <li>
        <img src="2.jpg" alt="">
      </li>
      <li>
        <img src="3.jpg" alt="">
      </li>
      <li>
        <img src="4.jpg" alt="">
      </li>
    </ul>

    <ul class="xb">
      
      
    </ul>
  </div>
  
</body>
</html>

index.js

window.addEventListener('load', function () {

    function animate(obj,target,callback){
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){
            var step=(target-obj.offsetLeft)/10;
            step=step>0?Math.ceil(step):Math.floor(step);
            if(obj.offsetLeft==target){
                clearInterval(obj.timer);
                if(callback){
                    callback();
                }
            }
            obj.style.left=obj.offsetLeft+step+'px';
        },15)
    }

    //鼠标进入显示左右图标，鼠标离开图标消失
    var foc = document.querySelector('.foc');
    var le = document.querySelector('.le');
    var ri = document.querySelector('.ri');
    foc.addEventListener('mouseover', function () {
        le.style.display = 'block';
        ri.style.display = 'block';
    })
    foc.addEventListener('mouseleave', function () {
        le.style.display = 'none';
        ri.style.display = 'none';
    })

    //动态生成底部小圆圈
    var xb = document.querySelector('.xb')
    var tp = document.querySelector('.tp')
    var focwidth=foc.offsetWidth;
    var num=0;
    for (var i = 0; i < tp.children.length; i++) {
        var li = document.createElement('li')
        //设定自定义属性
        li.setAttribute('index',i);
        xb.appendChild(li);
        //点击当前小圆圈变色
        li.addEventListener('click', function (e) {
            for (var i = 0; i < xb.children.length; i++) {
                xb.children[i].className = 'no'
            }
            this.className = 'yes';
            //点击小圆圈相应图片出现
            num=this.getAttribute('index')
            var index=this.getAttribute('index');
            animate(tp,-index*focwidth)
        })
    }
    xb.children[0].className = 'yes'


    //克隆第一张图片，以此来实现无缝翻页
    var first=tp.children[0].cloneNode(true);
    tp.appendChild(first);


    //点击左右图标实现向前向后翻页
    // var num=0;
    le.addEventListener('click',function(){
        if(num==0){
            num=tp.children.length-1;
            tp.style.right=0;
        }
        num--;
        for (var i = 0; i < xb.children.length; i++) {
            xb.children[i].className = 'no'
        }
        if(num==tp.children.length-2){
            xb.children[xb.children.length-1].className = 'yes'
        }
        else{
            xb.children[num].className = 'yes'
        }
        animate(tp,-num*focwidth)
    })
    ri.addEventListener('click',function(){
        if(num==tp.children.length-1){
            num=0;
            tp.style.left=0;
        }
        num++;
        
        for (var i = 0; i < xb.children.length; i++) {
            xb.children[i].className = 'no'
        }
        if(num==tp.children.length-1){
            xb.children[0].className = 'yes'
        }
        else{
            xb.children[num].className = 'yes'
        }
        animate(tp,-num*focwidth)
    })

    //自动播放
    // var ti=setInterval(function(){
    //     ri.click();
    // },2000)
})

KILIG_yss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用js写轮播图

index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&.
复制链接

扫一扫

专栏目录