js轮播图自动播放和手动控制

最新推荐文章于 2024-04-13 17:28:35 发布

dylan_lwb_

最新推荐文章于 2024-04-13 17:28:35 发布

阅读量1.2w

点赞数 5

分类专栏： html/js/css 文章标签：轮播图 js

本文链接：https://blog.csdn.net/dylan_lwb_/article/details/56845751

版权

html/js/css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/circle_image.js"></script>

</head>
<body>

    <!--轮播图-->
    <div id="imageBack">
        <img src="../images/1.jpg" id="testImage" style="width: 400px;">
    </div>
    <!--手动控制按钮-->
    <div id="buttonBack">
        <button id="last" style="width: 200px;height: 40px">上一个</button>
        <button id="next" style="width: 200px;height: 40px">下一个</button>
    </div>

</body>
</html>

js文件

var currentImage = 1;   //从1开始
var imageCount = 5;     //图片总数

window.onload = function () {

    //手动点击上一张
    document.getElementById("last").addEventListener("click", function () {
        if (currentImage > 1){
            currentImage -- ;
        } else if (currentImage = 1){
            currentImage = imageCount;
        }
        handChangeImage();
    }, false);
    //手动点击下一张
    document.getElementById("next").addEventListener("click", function () {
        if (currentImage < imageCount){
            currentImage ++ ;
        } else if (currentImage = imageCount){
            currentImage = 1;
        }
        handChangeImage();
    }, false);

    //2秒后执行
    setTimeout(selfChangeImage, 2000);
};

//手动控制上一张下一张
function handChangeImage() {
    var imageObj = document.getElementById("testImage");
    imageObj.src = "../images/"+ currentImage +".jpg";
}

//自动循环
function selfChangeImage() {
    if (currentImage < imageCount){
        currentImage ++ ;
    } else if (currentImage = imageCount){
        currentImage = 1;
    }

    var imageObj = document.getElementById("testImage");
    imageObj.src = "../images/"+ currentImage +".jpg";

    //2秒后执行
    setTimeout(selfChangeImage, 2000);
}

dylan_lwb_

关注

5
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
js轮播图自动播放和手动控制

html文件 Title 上一个下一个 js文件var currentImage = 1; //从1开始var imageCount = 5; //图片总数window.onload = function
复制链接

扫一扫