js实现移动端触屏滑动轮播图

最新推荐文章于 2024-06-10 21:52:46 发布

ohh58

最新推荐文章于 2024-06-10 21:52:46 发布

阅读量674

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_44692018/article/details/109629698

版权

使用js来实现轮播图

实现功能

1.索引小圆点
2.使用定时器实现过渡动画
3.滑动图片看下一张图

代码

show.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="02test.css">
    <link rel="stylesheet" href="base.css">
</head>
<body>
    <div class="box">
        <div class="banner">
            <div class="content">
                <div class="item">
                    <a href="#">
                        <img src="images/banner4.jpg" alt="">
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <img src="images/banner1.jpg" alt="">
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <img src="images/banner2.jpg" alt="">
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <img src="images/banner3.jpg" alt="">
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <img src="images/banner4.jpg" alt="">
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <img src="images/banner1.jpg" alt="">
                    </a>
                </div>

            </div>
            <ul class="dian">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
</html>
<script src="show1.js"></script>
<script src="show2.js"></script>

show1.js

function animation(ele,target) {
    clearInterval(ele.timer);

    var step = target > ele.offsetLeft? 20:-20;

    ele.timer = setInterval(function () {
        ele.style.left = ele.offsetLeft + step +"px";

        if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {
            ele.style.left = target + "px";
            clearInterval(ele.timer);
        }
    },10);
}

show2.js

var banner = document.querySelector(".banner");
var content = document.querySelector(".content");
var bannerWidth = banner.offsetWidth;
var liArr = document.querySelectorAll(".banner .dian li");

var index = 1;//索引值
var timer = null;
var startX = 0;
//使界面自动滚动
timer = setInterval(function () {
    autoMove();
},2000)

function autoMove() {
    liArr[index - 1].className = "";
    // index++
    // 执行动画（位移+过渡）
    index++;
    content.style.transition = "1s";
    content.style.transform = "translateX("+(-index * bannerWidth)+"px)";
}

banner.addEventListener("touchstart",function (e) {
    startX = e.touches[0].clientX;
      // 停止自动
    clearInterval(timer);
})

banner.addEventListener("touchend",function (e) {
    var endX = e.changedTouches[0].clientX;
    if (startX > endX) {
            // 左滑
        autoMove();
    } else {
    		//右滑
        liArr[index - 1].className = "";

        index--;
        content.style.transition = "1s";
        content.style.transform = "translateX("+(-index * bannerWidth)+"px)";
    }

    timer = setInterval(function () {
        autoMove();
    },2000);
})
//监听过渡事件
content.addEventListener("transitionend",function () {
    if (index > 4) {
        index = 1;
        content.style.transition = "";
        content.style.transform = "translateX(" + (-index * bannerWidth) + "px)";
    }
    if (index < 1 ) {
        index = 4;
        content.style.transition = "";
        content.style.transform = "translateX(" + (-index * bannerWidth) + "px)";
    }
    liArr[index - 1].className = "active";
})
content.addEventListener("touchmove",function (e) {
    var moveX = e.changedTouches[0].clientX;
    if (moveX > startX) {
        liArr[index-1].className = "";

        content.style.transition = "";
        content.style.transform  ="translateX(" +(-index * bannerWidth + Math.abs(moveX - startX))+"px)";
    } else {
        liArr[index-1].className = "";

        content.style.transition = "";
        content.style.transform  ="translateX(" +(-index * bannerWidth - Math.abs(moveX - startX))+"px)";
    }
})