用js写出轮播图

C博394

于 2022-03-13 09:06:38 发布

阅读量173

点赞数

分类专栏：周记文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_63699342/article/details/123454208

版权

周记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

到了每周一记的时间了，就写在寒假在家学习js做的京东轮播图吧，当时搞了好长时间，还好老师讲的好，能理解，废话少说，上代码！

需要用到上周写的动画函数，来实现翻页的轮播的功能

1，js部分代码(cur.js)

window.onload = function () {
    var item = document.querySelector('#item');
    var ul = item.querySelector('ul');
    var ol = item.querySelector('ol');
    var itemWidth = item.offsetWidth;
    var num = 0;
    var cir = 0;
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('index', i);
        ol.appendChild(li);
        li.addEventListener('mouseenter', function () {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'change';
            var index = this.getAttribute('index');
            num = index;
            cir = index;

            animate(ul, -index * itemWidth);//用到了动画函数
        })
    }
    ol.children[0].className = 'change';
    var cloneLi = ul.children[0].cloneNode(true);
    ul.appendChild(cloneLi);
    var right = document.querySelector('.right');
    var left = document.querySelector('.left');
   
    function cirChange(){
        for (var i = 0;i < ol.children.length;i++) {
            ol.children[i].className = '';
        }
        ol.children[cir].className = 'change';
    }
    right.addEventListener('click', function () {
        if(num == ol.children.length) {
            ul.style.left = 0;
            num = 0;
        }
        num++;
        cir++;
        if(cir == ol.children.length){
            cir = 0;
        }
        animate(ul, -num * itemWidth);
        cirChange();

    })

    left.addEventListener('click', function () {
        if(num == 0) {
            num = ul.children.length - 1;
            ul.style.left = num * itemWidth +'px';
        }
        num--;
        cir--;
        animate(ul, -num * itemWidth);
        if(cir < 0){
            cir = ol.children.length - 1;
        }
        cirChange();
    })
    item.addEventListener('mouseout',function(){ //离开轮播图，添加定时器
        time = setInterval(function(){
            right.click();
        
    },3000)
})
var time = setInterval(function(){
    right.click();            //定时器，实现向右自动播放功能
},3000);
item.addEventListener('mouseover',function(){
    clearInterval(time);       //放在轮播图上清除定时器
   
})
}

2.html部分（curimg.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>
    <link rel="stylesheet" href="cur.css">
</head>
<body>
    <div id="item">
        <ul>
            <li><img src="img/cimg7.webp" alt=""></li>
            <li><img src="img/cimg8.webp" alt=""></li>
            <li><img src="img/cimg9.webp" alt=""></li>
            <li><img src="img/cimg10.webp" alt=""></li>
            <li><img src="img/cimg11.webp" alt=""></li>
            <li><img src="img/cimg12.webp" alt=""></li>
            <li><img src="img/e8a4e7daaeecc837.jpg.webp" alt=""></li>
        </ul>
        <ol></ol>
        <span class="left"><</span>
        <span class="right">></span>
    </div>
</body>
<script src="animate.js"></script>
<script src="cur.js"></script>
</html>

3.css部分（cur.css）

* {
  padding: 0;
  margin: 0;
}

body {
  background-color: pink;
}

#item {
  overflow: hidden;
  width: 500px;
  height: 300px;
  background-color: pink;
  margin: 0 auto;
  position: relative;
  top: 100px;
}

#item ul {
  width: 900%;
  position: absolute;
  padding: 0;
  height: 100%;
  left: 0;
}

#item ul li {
  height: 100%;
  width: 500px;
  float: left;
  list-style: none;
}

#item ul li img {
  height: 100%;
  width: 500px;
}

#item .left {
  position: absolute;
  background-color: black;
  top: 40%;
  width: 50px;
  height: 50px;
  color: white;
  font-size: 35px;
  text-align: center;
  line-height: 35px;
  left: 0px;
}

#item .right {
  position: absolute;
  background-color: black;
  top: 40%;
  width: 50px;
  height: 50px;
  color: white;
  font-size: 35px;
  text-align: center;
  line-height: 35px;
  right: 0px;
}

#item ol {
  position: absolute;
  z-index: 999;
  bottom: 1px;
  left: 10px;
}

#item ol li {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10px;
  background-color: red;
}

#item ol .change {
  background-color: blue;
}

一起加油吧！！！

C博394

关注

0
点赞
踩
0

收藏

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

到了每周一记的时间了，就写在寒假在家学习js做的京东轮播图吧，当时搞了好长时间，还好老师讲的好，能理解，废话少说，上代码！需要用到上周写的动画函数，来实现翻页的轮播的功能1，js部分代码(cur.js)window.onload = function () { var item = document.querySelector('#item'); var ul = item.querySelector('ul'); var ol = item.querySelector
复制链接

扫一扫