JavaScript学习小项目------JavaScript轮播图

最新推荐文章于 2024-04-27 13:18:52 发布

Sylcoooool

最新推荐文章于 2024-04-27 13:18:52 发布

阅读量544

点赞数 1

分类专栏： JavaScript学习笔记文章标签： JavaScript轮播图

本文链接：https://blog.csdn.net/weixin_43666333/article/details/86570518

版权

JavaScript学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript轮播图

思路：设定一个div作为显示框，在框内添加一个超长的ul包裹图片，把每张图片的大小设置为div显示框的大小，设置css属性使第一张图片位于div显示框内，并且给div显示框设置overflow：hidden，把其他图片全部隐藏。js设置定时器，每隔3000毫秒ul向右移动一张图片的宽度。

先写HTML代码 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./index.js"></script>
</head>
<body>
    <div class="lbt">
        <ul style="left: 0px">
            <li><img class="img1" src="./pic/pic1.jpg" alt="pic"></li>
            <li><img class="img2" src="./pic/pic2.jpg" alt="pic"></li>
            <li><img class="img3" src="./pic/pic3.gif" alt="pic"></li>
            <li><img class="img4" src="./pic/pic4.jpg" alt="pic"></li>
            <li><img class="img5" src="./pic/pic5.jpg" alt="pic"></li>
        </ul>
    </div>
</body>
</html>

css样式：

*{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.lbt{
    margin: 82px auto 0;
    position: relative;
    width: 800px;
    height: 400px;
    overflow: hidden;
}


.lbt ul{
    position: absolute;
    display: block;
    top: 0;
    width: 4000px;
    height: 400px;
}

.lbt li{
    float: left;
    width: 800px;
    height: 400px;
}

.lbt img{
    width: 800px;
    height: 400px;
}

我们通过使用div显示框(.lbt) position：relative和ul的position：absolute进行定位，使轮播图的第一张图片刚好位于div显示框(.lbt)上。

效果如下：
在这里插入图片描述

接下来写JavaScript代码：

var ul = document.getElementsByTagName('ul');  //获取一个元素组
var i = 0;   //用于计数
setInterval(function (){
    //添加定时器Interval
    if(i == 4){
        //当轮播到第六张图片时，回到第一张图片
        ul[0].style.left = '0px';
        i=0;
    }else{
        ul[0].style.left = (parseInt(ul[0].style.left) - 800) + 'px'; //每过3000ms执行ul向左移动一张图片的距离    
    }
    i++;
},3000);

易混淆点：

当使用position来定位时，left必须写为行间样式，因为行JavaScript的ul[0].style只能获取行间样式信息，引入css样式无法查看。
使用setInterval()定时器，第一次执行是等待3000ms后，所以为3000ms后left = -800px，所以执行播放第二张图，在 i++ 执行以前，i = 0。即：

图片 ————> i

pic1 ————> 0

pic2 ————> 0

pic3 ————> 1

pic4 ————> 2

pic5 ————> 3

所以当i==4时，已经没有pic6可供展示，直接跳回最开始的pic1。

– 不会接gif图片，所以没有效果图了，抱歉！–

Sylcoooool

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习小项目------JavaScript轮播图

JavaScript轮播图思路：设定一个div作为显示框，在框内添加一个超长的ul包裹图片，把每张图片的大小设置为div显示框的大小，设置css属性使第一张图片位于div显示框内，并且给div显示框设置overflow：hidden，把其他图片全部隐藏。js设置定时器，每隔3000毫秒ul向右移动一张图片的宽度。先写HTML代码 :&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;ht...
复制链接

扫一扫