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); }); }