带缩略图的图片切换

最新推荐文章于 2018-12-11 20:49:00 发布

能吃一大碗

最新推荐文章于 2018-12-11 20:49:00 发布

阅读量302

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/xiaoshiqi17/article/details/78649060

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现轮播图的方法，包括背景颜色设置、图片自动切换及通过按钮手动切换等功能，并详细解释了如何利用CSS定位和JavaScript进行交互控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: #333333;
        }

        #box {
            width: 400px;
            height: 500px;
            position: relative;
            margin: 0 auto;
        }

        .black {
            position: absolute;
            width: 400px;
            height: 30px;
            background-color: #000;
            top: 470px;
            opacity: 0.8;
            text-align: center;
        }
        .black1 {
            position: absolute;
            width: 400px;
            height: 80px;
            bottom: 35px;
        }

        #images {
            position: absolute;
            width: 400px;
            height: 500px;
            background-color: #eee;
        }

        .round {
            width: 20px;
            height: 20px;
            background-color: #aaa;
            border-radius: 10px;
            display: inline-block;
            margin-top: 5px;
            margin-right: 10px;
        }

        .normal {
            background-color: #aaa;
        }

        .active {
            background-color: #FA7908;
        }

        a {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #000;
            opacity: 0.5;
            color: #fff;
            text-align: center;
            font: 20px/50px 'microsoft yahei';
            text-decoration: none;
            top: 225px;
            cursor: pointer;
        }

        a:hover {
            opacity: 0.8;
        }

        #left {
            left: 10px;
        }

        #right {
            right: 10px;
        }

        .black1 img {
            width: 80px;
            height: 80px;
            background-color: #009900;
            position: absolute;
            bottom: 0px;
        }
        .hide {
            display: none;
        }
        .show {
            display: block;
        }
    </style>
</head>
<body>
<div id="box">
    <img id="images" src="">
    <span class="black"></span>
    <span class="black1"></span>
    <a id="left"><</a>
    <a id="right">></a>
</div>


<script>
    var oLeft = document.getElementById('left');
    var oRight = document.getElementById('right');
    var oImg = document.getElementById('images');
    var oSpan = document.getElementsByTagName('span')[0];
    var oSpan1 = document.getElementsByTagName('span')[1];
    var aImg = ['img/1.png', 'img/2.png', 'img/3.png', 'img/4.png'];

    //初始化
    for (var i = 0; i < aImg.length; i++) {
        var aDiv = oSpan.getElementsByTagName('div');
        oSpan.innerHTML += '<div class="round">' + '</div>';
    }
    ;
    aDiv[0].className += ' active';
    oImg.src = aImg[0];

    //函数封装
    function roll() {
        oImg.src = aImg[num];
        for (var i = 0; i < aImg.length; i++) {
            aDiv[i].className = 'round normal';
        }
        aDiv[num].className = 'round active';
    }

    //图片切换
    var num = 0;
    oRight.onclick = function () {
        num++;
        if (num == 4) {
            num = 0;
        }
        roll();
    }

    oLeft.onclick = function () {
        num--;
        if (num == -1) {
            num = 3;
        }
        roll();
    }

    //点击按钮切换
    for (var i = 0; i < aImg.length; i++) {
        //点击索引值切换图片：
        //设置索引值index
        //用this指向
        aDiv[i].index = i;
        aDiv[i].onclick = function () {
            //按钮变色
            for (var i = 0; i < aImg.length; i++) {
                aDiv[i].className = 'round normal';
            }
            this.className = 'round active';
            //图片切换
            oImg.src = aImg[this.index];
            num = this.index;
        }
    }

    //缩略图
    for (var i = 0; i < aImg.length; i++) {
        var aMinImg = oSpan1.getElementsByTagName('img');
        oSpan1.innerHTML += '<img class="hide">';
        aMinImg[i].src = aImg[i];
        aMinImg[i].style.left = 100 + i * 35 + 'px';
        aDiv.index = i;
        aDiv[i].onmouseover = function () {
            for (var i = 0; i < aImg.length; i++){
                aMinImg[i].className = 'hide';
            }
            aMinImg[this.index].className = 'show';
        }
        aDiv[i].onmouseout = function () {
            for (var i = 0; i < aImg.length; i++){
                aMinImg[i].className = 'hide';
            }
        }
    }

</script>
</body>
</html>