html和 css 轮播图

最新推荐文章于 2024-09-14 18:52:56 发布

bliss小宝

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量464

点赞数 2

分类专栏：前端文章标签： javascript css css3 html html5

本文链接：https://blog.csdn.net/weixin_50001396/article/details/108211186

版权

前端专栏收录该内容

225 篇文章 8 订阅

订阅专栏

今日任务

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        .container {
            width: 1226px;
            height: 460px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }
        .img-list {
            width: 7356px;
            height: 460px;
            position: absolute;  /* 相对于父级元素移动 */
            left: 0px;
        }
        .img-list img {
            width: 1226px;
            height: 460px;
            display: block;
            float: left;
        }
        .img-controls {
            width: 100%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            overflow: hidden;
        }
        .img-controls #left,#right {
            width: 41px;
            height: 69px;
            display: block;
        }
        .img-controls #left {
            background-image: url("imgs/icon-slides.png");
            background-repeat: no-repeat;
            background-position: -84px 50%;
            float: left;
        }
        .img-controls #left:hover {
            background-image: url("imgs/1.jpg");
            background-repeat: no-repeat;
            background-position: 0px 50%;
        }
        .img-controls #right {
            background-image: url("imgs/1.jpg");
            background-repeat: no-repeat;
            background-position: -125px 50%;
            float: right;
        }
        .img-controls #right:hover {
            background-image: url("imgs/1.jpg");
            background-repeat: no-repeat;
            background-position: -42px 50%;
        }
        .img-direction {
            list-style: none;
            padding: 0;
            margin: 0;
            overflow: hidden;
            position: absolute;
            bottom: 20px;
            left: 20px;
            left: 50%;
            transform: translateX(-50%);
        }
        .img-direction li {
            width: 8px;
            height: 8px;
            background-color: rgba(0,0,0,04);
            border: 2px solid #fff;
            border-color: rgba(255, 255, 255, 0.3);
            border-radius: 6px;
            margin: 0 5px;
            float: left;
        }
        .img-direction li:hover {
            background-color: #f5f5f5;
            border-color: rgba(0,0,0,0.4);
            cursor: pointer;  /* 设置鼠标样式 */
        }
        .active {
            background-color: #f5f5f5 !important;
            border-color: rgba(0,0,0,0.4) !important;
        }
    </style>
</head>
<body>
    <!-- 可视窗口 -->
    <div class="container">
        <!-- 图片容器 -->
        <div class="img-list">
            <img src="imgs/1.jpg">
            <img src="imgs/2.jpg">
            <img src="imgs/3.jpg">
            <img src="imgs/4.jpg">
            <img src="imgs/5.jpg">
        </div>
        <!-- 左右切换按钮 -->
        <div class="img-controls">
            <a id="left" href="#"></a>
            <a id="right" href="#"></a>
        </div>
        <!-- 图片导航器 -->
        <ul class="img-direction">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        // 完成轮播图的向右切换按钮的逻辑
        // 1.获取当前轮播图中的图片容器元素
        var imgList = document.getElementsByClassName('img-list')[0];
        // 2.获取图片容器元素当前的有效样式
        var imgListStyle = window.getComputedStyle(imgList);
        // 3.从当前的有效样式获取其left样式属性值
        var imgListLeft = parseInt(imgListStyle.left);
        // 4.根据图片容器元素获取其所有图片元素
        var imgs = imgList.getElementsByTagName('img');
        // 5.获取当前轮播图中所有图片的个数
        var len = imgs.length;
        // 6.获取单张图片的宽度
        var imgWidth = parseInt(window.getComputedStyle(imgs[0]).width);
        // 7.计数器 -> 图片在图片集合中的索引值
        var index = 0;
        // 8.获取向右切换的按钮元素
        var right = document.getElementById('right');
        /* 
            记录点击切换按钮的次数
            一共5张图片，点击4次切换按钮后就到最后一张图片了
        */ 
        // 9.为向右切换的按钮绑定click事件
        right.addEventListener('click',function(){
            // 判断时候切换到了图片集合中的最后一张
            if (index < len-1) {
                // 10.记录图片从第一张到第六张切换的索引值
                index++;
                // 11.将当前left样式属性的值减少一张图片的宽度
                imgListLeft -= imgWidth;
            } else if (index == len-1) {
                index = 0;
                imgListLeft = 0;
                // 点击向右的箭头，当点击到最后一张的时候，再点击向右的箭头，会回到第一张图片
                // imgList.style.left = imgListLeft + 'px';  
            }
            // 12.将计算之后的left样式属性值，重新设置给图片容器元素
            // 点击向右的箭头，当点击到最后一张的时候，再点击向右的箭头，会回到第一张图片
            imgList.style.left = imgListLeft + 'px'; 
        });
        var left = document.getElementById('left');
        left.addEventListener('click',function(){
            // 判断是否切换到了图片集合中的第一张
            if (index > 0){
                // 记录图片从第六张到第一张的索引值
                index--;
                // 11.将当前left样式属性的值减少一张图片的宽度
                imgListLeft += imgWidth;
            } else if (index == 0) {
                index = len - 1;
                imgListLeft = -(len - 1) * imgWidth;
            }
            // 12.将计算之后的left样式属性值，重新设置给图片容器元素
            // 点击向左的箭头，当点击到第一张的时候，再点击向左的箭头，会回到最后一张图片
            imgList.style.left = imgListLeft + 'px';
        });
        // 图片导航器
        var imgDirection = document.getElementsByClassName('img-direction')[0];
        // 根据图片导航器容器元素获取所有的导航器元素
        var dirs = imgDirection.getElementsByTagName('li');
        imgDirection.addEventListener('click',function(event){
            var target = event.target;
            if (target.nodeName === 'LI') {
                for (var i=0; i<dirs.length; i++) {
                    if (dirs[i] === target) {
                        index = i;
                    }
                    dirs[i].removeAttribute('class');
                }
                imgListLeft = -(index * imgWidth);
                imgList.style.left = imgListLeft + 'px';
                target.setAttribute('class','active');
            }
        });
    </script>
</body>
</html>