简单幻灯片 demo

最新推荐文章于 2022-05-21 15:30:31 发布

涛痕

最新推荐文章于 2022-05-21 15:30:31 发布

阅读量631

点赞数 1

分类专栏： demo 涛痕世界文章标签： html 源码实例 css JavaScript

本文链接：https://blog.youkuaiyun.com/iamcgt/article/details/72877025

版权

涛痕世界同时被 2 个专栏收录

56 篇文章

订阅专栏

demo

18 篇文章

订阅专栏

效果

这里写图片描述

思路

通过小图片决定显示的大图片，通过改变display属性实现大图片的变化

源码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>幻灯片</title>
    <link type="text/css" href="css/index.css" rel="stylesheet">
    <script src="js/index.js"></script>
</head>
<body>
    <div class="frame">
        <div class="top">
            <div id="img1"><img src="images/a.jpg"></div>
            <div id="img2"><img src="images/b.jpg"></div>
            <div id="img3"><img src="images/c.jpg"></div>
            <div id="img4"><img src="images/d.jpg"></div>
            <div id="img5"> <img src="images/e.jpg"></div>
        </div>
        <div class="bottom">
            <img  name="img1" src="images/a.jpg">
            <img  name="img2" src="images/b.jpg">
            <img  name="img3" src="images/c.jpg">
            <img  name="img4" src="images/d.jpg">
            <img  name="img5" src="images/e.jpg">
        </div>
    </div>
</body>
</html>

css

*{
    padding:0;
    margin:0;
}

.frame{
    width: 400px;
    margin: 100px auto;
    border: 1px solid #ccc;
}

div .top{
    height: 400px;
}
div .top div{
    display: none;
}
div .top div img{
    width:400px;
    height: 400px;
}

div .top #img1{
    display: block;
}

div .bottom{
    padding: 10px;
    border-top: 1px solid #ccc;
    text-align: center;
    height: 62px;
}
div .bottom img{
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border: 3px solid #fff;
}
div .bottom img:first-child{
    border: 3px solid #e74e3e;
}

JavaScript

/**
 * Created by cgt on 2017/4/9.
 */
window.onload = function(){
    var bottoms = document.getElementsByClassName("bottom");
    var imgs = bottoms[0].children;
    var tops = document.getElementsByClassName("top");
    var divs = tops[0].children;
    var mark = imgs[0].name;

    for(var i=0;i<imgs.length;i++) {
        imgs[i].onmouseover = function (event) {
            event = event||window.event;
            var src = event.srcElement;
            var name = src.name;
            if(name != mark){
                document.getElementsByName(mark)[0].style.border = "3px solid #fff";
            }
            src.style.border = "3px solid #e74e3e";
            for(var j=0;j<divs.length;j++){
                if (divs[j].id == name) {
                    divs[j].style.display = "block";
                } else {
                    divs[j].style.display = "none";
                }

            }
        }
        imgs[i].onmouseout = function(event){
            event = event||window.event;
            var src = event.srcElement;
            mark = src.name;
        }
    }
}