ES6字符串模板

ES6字符串模板制作幻灯片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>幻灯片效果</title>
        <link rel="stylesheet" type="text/css" href="css/index.css" />
    </head>
    <body>
        <div class="container"></div>
    </body>
    <script src="js/jquery-2.1.0.js"></script>
    <script src="js/index.js"></script>
    <script type="text/javascript">
        // 调用封装的函数
        imgFun($(".container"), [
            "img/life.jpg",
            "img/koi.jpg",
            "img/peacock.jpg"
        ]);
    </script>
</html>
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
body{
    background: #eeeeee;
}
.container{
    position: relative;
    top: 20px;
    width: 60%;
    height: 450px;
    border: 4px double #ccc;
    margin: 0 auto;
    background-color: #fefefe;
    box-sizing: border-box;
}
.showImg{
    position: absolute;
    top: 10px;
    width: 95%;
    height: 72%;
    overflow: hidden;
}
.showImg img{
    width: 100%;
    height: 100%;
}
.showBtn{
    position: absolute;
    bottom: 10px;
    width: 95%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.showBtn .btn {
    width: 100px;
    height: 50px;
    background: #FFFF00;
}

.showImg,.showBtn{
    left: 50%;
    transform: translateX(-50%);
}
.btn img{
    width: 100%;
}
function imgFun(box, imgSrc) {
    /*
        1、加载结构
     ****/
    // 保存图片按钮
    let imgHtml = "";
    // 循环传进来的图片路径
    imgSrc.forEach(function(src){
        imgHtml+=`
            <div class="btn">
                <!-- 图片按钮 -->
                <img src="${src}">
            </div>
        `;
    })
    
    // 拼接幻灯片结构
    let divSrc=`
        <div class="showImg">
            <div class="img">
                <img src="${imgSrc[0]}"> 
            </div>
        </div>
        <!-- 按钮区域 -->
        <div class="showBtn">
            ${imgHtml}
        </div>
    `;
    // 将结构放在box中
    box.html(divSrc);
    
    /* 
        2、获取大图片
    ***/
    let imgDt=$(".img img");
    // 获取被点击的按钮
    let btn=$(".btn");
    // 添加点击事件
    btn.click(function(){
        // 获取当前被点击的按钮img
        let src=$(this).find("img").attr("src");
        imgDt.attr("src",src);
    });
}

 

posted @ 2019-10-25 17:51  Mr▪小zhou  阅读(140)  评论(0)  编辑  收藏  举报