自动切换图片

码深

于 2019-09-26 16:42:34 发布

阅读量281

点赞数

分类专栏：自动切换图片：文章标签：自动切换图片：

本文链接：https://blog.csdn.net/weixin_43158701/article/details/101452720

版权

自动切换图片：专栏收录该内容

1 篇文章 0 订阅

订阅专栏

自动切换图片：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="测试js.js"></script>
</head>
<body>
    <div id="showpic">
        <img src="./img/p-detail-1.jpg" alt="" id="img" style="width: 100px;height: 100px">
    </div>
   
</body>
</html>

js代码:

var cur = 1;
function changPic(){
    if(cur > 1){
        cur--;
    }else if(cur < 4){
        cur++;
    }
    var img = document.getElementById('img');
    img.src = "./img/p-detail-" + cur + ".jpg";
    setTimeout(changPic,2000);
}
window.onload = function(){
    changPic();
}

优惠劵

码深

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自动切换图片

自动切换图片：html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
复制链接

扫一扫