js 轮播图案例思路

最新推荐文章于 2024-04-17 09:52:42 发布

前进的胖子

最新推荐文章于 2024-04-17 09:52:42 发布

阅读量167

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_44593999/article/details/109340136

版权

在这里插入代码片<!-- 图片命名为1-2-3 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_2轮播图</title>
    <style>
        .lu{
            width: 600px;
            height: 800px;
            position: relative;
            margin: 0 auto;
        }
        #button_1{
        position: absolute;
        align-self: baseline;
        height: 0px;
        border-right: 40px solid black;
        border-top: 40px solid transparent;
        border-bottom: 40px solid transparent;
        outline: none;
        margin-top: 20px;
        }
        #button_2{
            position: absolute;
            width: 0px;
            height: 0px;
            border-left: 40px solid black;
            border-top: 40px solid transparent;
            border-bottom: 40px solid transparent;
            outline: none;
            margin-left: -53px;
            margin-top: 20px;
        }
        #img{
            display: block;
            margin: 10px auto;
            float: left;
        }
    </style>
</head>
<body>
    <div class="lu">
        <button id="button_1"></button>
        <img id='img' src="img01.jpg" alt="">
        <button id="button_2"></button>
    </div>
    <script>
        /*
        获取元素
        绑定事件
        把图片存到数组中
        */
        var button_1 = document.getElementById('button_1')
        var button_2 = document.getElementById('button_2')
        var img = document.getElementById('img')
        var num = 0 
        var arr = ['img01.jpg','img02.jpg']
        button_1.onclick = function(){
            num = num + 1
            if( num == arr.length){
                num = 0
            }
           img.src = arr[num]   
        }
        button_2.onclick = function(){
            num = num - 1
            if(num < 0){
                num = arr.length - 1
            }
            img.src = arr[num]
        }
    </script>
</body>
</html>

前进的胖子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 轮播图案例思路

在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>1_2轮播图</title> <styl
复制链接

扫一扫