js无缝轮播图(手动轮播+自动轮播+定时器+过渡动画)

最新推荐文章于 2022-11-05 16:33:29 发布

唐璜Taro

最新推荐文章于 2022-11-05 16:33:29 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/weixin_44067347/article/details/107874471

版权

问题汇总专栏收录该内容

12 篇文章 0 订阅

订阅专栏

为了方便大家使用，我把Html，CSS，以及js 和用到图片都放在下面了。**

特此说明：这个无缝轮播的代码是可以直接复制粘贴使用，嘻嘻！

1.先新建一个文件，随意命名即可。
2.然后打开文件夹，再新建。
3.把文章底部的5张图片保存到images文件夹里面。
4.用你的编辑器打开这个文件夹
5.剩下的就是复制粘贴到对应的里面就可以了
在这里插入图片描述
Html和Css
这里再说一下我是直接把css样式直接写在了style里面，这个没有引入，js的代码比较长，直接外部引入的js，就是这两句

<script src="无缝轮播.js"></script>
<script src="animate.js"></script>

Html和Css代码在这里开始

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="无缝轮播.js"></script>
    <script src="animate.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .banner {
            position: relative;
            width: 1000px;
            height: 428px;
            margin: 100px auto;
            cursor: pointer;
            /* overflow: hidden; */
        }

        .banner .ul {
            position: absolute;
            height: 428px;
          
            
        }

        .banner .ul img {
            float: left;
            width: 1000px;
            height: 428px;
        }

        .left,
        .right {
            position: absolute;
            top: 50%;
            width: 50px;
            height: 50px;
            font-size: 40px;
            margin-top: -25px;
            color: #fff;
            cursor: pointer;      
            text-align: center;
            line-height: 40px;
            display: none;
            /* right: 10px;
            left: 10px; */
        }

        .left:hover,
        .right:hover {
            color: #ff6700;
            background-color: #eee;
        }

        .banner .left {
            left: 10px;
        }

        .banner .right {
            right: 10px;
        }

        .curcle {
            position: absolute;
            right: 0;
            bottom: 5px;
        }

        .curcle li {
            float: left;
            width: 10px;
            height: 10px;
            border: 3px solid #333;
            border-radius: 50%;
            color: #000;
            background-color: #fff;
            margin: 5px;
            cursor: pointer;
        }
        .curcle .select {
            float: left;
            width: 10px;
            height: 10px;
            border: 3px solid #fff;
            border-radius: 50%;
            color: #000;
            background-color: #ff6700;
            margin: 5px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="banner">
        <div class="ul">
            <img src="images/1.jpg" alt="">
            <img src="images/2.jpg" alt="">
            <img src="images/3.jpg" alt="">
            <img src="images/4.jpg" alt="">
            <img src="images/5.jpg" alt="">

        </div>
        <div class="curcle"></div>
        <div class="left">‹</div>
        <div class="right">›</div>

</body>

</html>

这里就是js的代码了，一共两个，一个叫无缝轮播.js,另一个叫animate.js

无缝轮播.js

window.onload = function () {
    console.log(111);
    var banner = document.querySelector(".banner");
    var bannerWidth = banner.offsetWidth;
    console.log(bannerWidth);
    var imgs = document.querySelectorAll(".ul img");
    var uls = document.querySelector(".banner .ul");
    var newImg = imgs[0].cloneNode(true);
    console.log(imgs[0].offsetWidth);
    uls.appendChild(newImg);
    var left = document.querySelector(".left");
    var right = document.querySelector(".right");
    banner.onmouseenter = function () {
        left.style.display = "block";
        right.style.display = "block";
    }
    banner.onmouseleave = function () {
        left.style.display = "none";
        right.style.display = "none";
    }

    var curcle = document.querySelector(".curcle");
    for (var i = 0; i < imgs.length; i++) {
        // console.log(imgs.length);
        // 动态创建小圆点
        var lis = document.createElement("li");
        curcle.appendChild(lis);
        //给底部的小圆点添加点击效果
        // lis.className = "select";

        // 动态修改长度
        // var uls = document.querySelector(".banner .ul");
        uls.style.width = (imgs.length + 1) * 1000 + "px";
    }
    var lis = document.querySelectorAll(".curcle li");
    console.log(lis);
    for (var i = 0; i < lis.length; i++) {
        lis[0].className = "select";
        lis[i].index = i;
        lis[i].onclick = function () {
            console.log(this.index);
            document.querySelector(".select").className = "";
            // lis[i].className = "";
            this.className = "select";
            // var bannerWidth = banner.offsetWidth;
            // console.log(bannerWidth);
            // animate(ul, -index *)
            //   var uls = document.querySelector(".banner .ul");
            animate(uls, -this.index * bannerWidth);
            // console.log(-this.index * imgs[0].offsetWidth);
        }
    }
    //点击右侧按钮，实现图片的滚动
    var num = 0;

    var circle = 0;
    //设置节流阀
    var flag = true;
    right.addEventListener('click', function () {

        console.log(num);
        if (num == imgs.length) {
            uls.style.left = 0;
            num = 0;

        }
        num++;
        animate(uls, -num * bannerWidth);
        circle++;
        if (circle == imgs.length) {
            circle = 0;
        }
        circleChange();

    });
    //点击左侧按钮，实现图片的滚动
    left.addEventListener('click', function () {
        console.log(num);
        if (num == 0) {
            num = imgs.length;
            uls.style.left = -(num) * bannerWidth + "px";
        }
        num--;
        animate(uls, -num * bannerWidth);
        circle--;
        if (circle < 0) {
            circle = imgs.length - 1;
        }
        circleChange();

    });
    function circleChange() {
        for (var i = 0; i < imgs.length; i++) {
            lis[i].className = "";
        }
        lis[circle].className = "select";
    };

    //10定时器
    var time = setInterval(function () {
        right.click();
    }, 2000);
    uls.onmouseenter = function () {
        clearInterval(time);
    }
    uls.onmouseleave = function () {
        time = setInterval(function () {
            right.click();
        }, 2000);
    }
}

ainimate.js

function animate(element,position){
    // 每次进来先把之前的定时器清空
    clearInterval(element.time);
    element.time = setInterval(function(){
    // 现获取这个标签所在的位置
    var current = element.offsetLeft;
    var step = current > position ? -10 :10;
    // 现在的位置和⽬标位置的差值⼩于 每次移动的距离 直接到达⽬标
    if (Math.abs(current - position)>step) {
    // 还需要接着⾛step
    element.style.left = current + step +"px";
    }else{
    // 如果⾛到最后⼀步 就直接让元素 到达⽬标
    element.style.left = position + "px";
    clearInterval(element.time);
    }
    },5)
    }

下面是用到的轮播图片以及我的样式目录
1.jpg

2.jpg
在这里插入图片描述
3.jpg

4.jpg

5.jpg

唐璜Taro

关注

0
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
js无缝轮播图(手动轮播+自动轮播+定时器+过渡动画)

为了方便大家使用，我把Html，CSS，以及js 和用到图片都放在下面了。**特此说明：这个无缝轮播的代码是可以直接复制粘贴使用，嘻嘻！1.先新建一个文件，随意命名即可。2.然后打开文件夹，再新建。3.把文章底部的5张图片保存到images文件夹里面。4.用你的编辑器打开这个文件夹5.剩下的就是复制粘贴到对应的里面就可以了Html和Css这里再说一下我是直接把css样式直接写在了style里面，这个没有引入，js的代码比较长，直接外部引入的js，就是这两句<script src
复制链接

扫一扫

专栏目录