標籤：first box asc dsl als func display settime static
1、效果
2、html代碼
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/iconfont.css"> <link rel="stylesheet" type="text/css" href="css/slide.less"></head><body> <div class="slide-container"></div> <script type="text/javascript" src=‘js/jquery-2.2.1.min.js‘></script> <script type="text/javascript" src = ‘js/slide.js‘></script></body></html>
3、less代碼
.slide-container{width: 1000px; height: 560px;margin: 0 auto;box-shadow: 0 0 10px 3px gray;position: relative;top: 0;left: 0;overflow: hidden;.slide-box{width: 1000px;height: 560px;transition: all 0.4s linear;.slide-list{height: 560px;overflow: hidden;display: inline-block;float: left;img{width: 1000px;height: 100%;}}.first-one{position: absolute;top: 0;left: -1000px;} .last-one{ position: absolute; top: 0; right: -1000px; }}.slide-btn{width: 80px;height: 560px;background-color: rgba(0,0,0,0.4);position: absolute;z-index: 3;top: 0;text-align:center;transition: all 0.3s linear;cursor: pointer;i{color: white;font-size: 40px;line-height: 560px;}}.slide-left-btn{ left: 0; transform: translateX(-80px);}.slide-right-btn{ right: 0; transform: translateX(80px);}&:hover{.slide-left-btn{ transform:translateX(0);}.slide-right-btn{ transform:translateX(0);}.slide-menu{visibility: visible;}}.slide-menu{ visibility: hidden; position: absolute; bottom: 20px; z-index: 3; left: 50%; transform: translateX(-50%); display: inline-block; width: auto; height: 56px; text-align: center; white-space: nowrap; padding: 20px; background-color: rgba(0,0,0,0.4);.list{display: inline-block;width: 100px;height: 56px;overflow: hidden;border: 2px solid white;margin: 4px;img{display: inline-block;width: 100px;height: 56px;background-color: red;border-radius: 10px;margin: 0 10px 0 10px;cursor: pointer;}&:hover{border: 2px solid red;}}.choose{border: 2px solid red;}}}
3、js代碼
var imgObj = { "imgList": [ { "name": "name1", "url": "imgs/1.jpg", "detail": "1號寶貝", "link": "http://www.hao123.com" }, { "name": "name2", "url": "imgs/2.jpg", "detail": "2號寶貝", "link": "http://www.baidu.com" }, { "name": "name3", "url": "imgs/3.jpg", "detail": "3號寶貝", "link": "http://www.w3cschool.com" }, { "name": "name4", "url": "imgs/4.jpg", "detail": "4號寶貝", "link": "http://www.taobao.com" }, { "name": "name2", "url": "imgs/5.jpg", "detail": "5號寶貝", "link": "http://www.jd.com" }, { "name": "name3", "url": "imgs/6.jpg", "detail": "6號寶貝", "link": "http://www.lianxiang.com" }, { "name": "name4", "url": "imgs/7.jpg", "detail": "7號寶貝", "link": "http://www.meituan.com" } ]}var parent = $(".slide-container");var now_index = 1;var prev_index = 1;var len = imgObj.imgList.length;var imgList = imgObj.imgList;var is_active = true; //是否自動輪播var is_running = true;creatSlide();function creatSlide() { initSlide(); addSlideOperation(); addClock(is_active); function initSlide() { parent.empty(); var rightBtn = $("<div class=‘slide-left-btn slide-btn‘>" + "<i class=‘iconfont icon-left-copy‘></i>" + "</div>"); var leftBtn = $("<div class=‘slide-right-btn slide-btn‘>" + "<i class=‘iconfont icon-right-copy‘></i>" + "</div>"); parent.append(rightBtn); parent.append(leftBtn); var slideBox = $("<div class=‘slide-box‘></div>"); slideBox.css("width", (len * 1000) + "px"); var slideList = $("<div class=‘slide-list first-one‘>" + "<a href=‘" + imgList[len - 1].url + "‘>" + "<img src=‘static/imgs/" + len + ".jpg‘>" + "</a>" + "</div>"); slideBox.prepend(slideList); for (var i = 0; i < len; i++) { var slideList = $("<div class=‘slide-list‘>" + "<a href=‘" + imgList[i].url + "‘>" + "<img src=‘static/imgs/" + (i + 1) + ".jpg‘>" + "</a>" + "</div>"); slideBox.append(slideList); } var slideList = $("<div class=‘slide-list last-one‘>" + "<a href=‘" + imgList[1].url + "‘>" + "<img src=‘static/imgs/" + (1) + ".jpg‘>" + "</a>" + "</div>"); slideBox.append(slideList); parent.append(slideBox); var slideMenu = $("<div class=‘slide-menu‘></div>"); for (var j = 0; j < len; j++) { var menuList = $("<div class=‘list list" + (j + 1) + "‘>" + "<img src=‘static/imgs/" + (j + 1) + ".jpg‘>" + "</div>"); if (j == 0) { menuList.addClass("choose"); } slideMenu.append(menuList); } parent.append(slideMenu); } function addSlideOperation() { var slideBox = parent.find(".slide-box"); var slideMenu = parent.find(".slide-menu"); //左鍵 parent.on("click", ".slide-left-btn", function() { if (is_running) { is_running = false; if (now_index < len) { now_index++; console.log(now_index); slideBox.attr("style", "width: " + (len * 1000) + "px;transform:translateX(" + (-(now_index - 1) * 1000) + "px);"); var tar = slideMenu.find(".list" + now_index); tar.addClass("choose"); tar.siblings().removeClass("choose"); } else if (now_index == len) { now_index = 1; slideBox.attr("style", "transition:all 0.3s linear;width: " + ((len) * 1000) + "px;transform:translateX(" + (-(len) * 1000) + "px);"); setTimeout(function() { slideBox.attr("style", "transition:all 0s linear;width: " + ((len) * 1000) + "px;transform:translateX(" + (0) + "px);"); }, 300) var tar = slideMenu.find(".list" + 1); tar.addClass("choose"); tar.siblings().removeClass("choose"); } is_running = true; } }) //右鍵 parent.on("click", ".slide-right-btn", function() { if (is_running) { is_running = false; if (now_index > 1) { now_index--; console.log(now_index); slideBox.attr("style", "width: " + (len * 1000) + "px;transform:translateX(" + (-(now_index - 1) * 1000) + "px);"); var tar = slideMenu.find(".list" + now_index); tar.addClass("choose"); tar.siblings().removeClass("choose"); } else if (now_index == 1) { now_index = len; slideBox.attr("style", "transition:all 0.3s linear;width: " + ((len) * 1000) + "px;transform:translateX(" + (1000) + "px);"); setTimeout(function() { slideBox.attr("style", "transition:all 0s linear;width: " + ((len) * 1000) + "px;transform:translateX(" + ((1 - len) * 1000) + "px);"); }, 300) var tar = slideMenu.find(".list" + len); tar.addClass("choose"); tar.siblings().removeClass("choose"); } is_running = true; } }) //小圖選取 parent.on("click", ".slide-menu .list", function() { now_index = $(this).index() + 1; console.log(now_index); slideBox.attr("style", "width: " + (len * 1000) + "px;transform:translateX(" + (-(now_index - 1) * 1000) + "px);"); $(this).addClass("choose"); $(this).siblings().removeClass("choose"); }) //mouseover 停止自動輪播 parent.on("mouseover", function() { active = false; addClock(active); }) //mouseout 停止自動輪播 parent.on("mouseout", function() { active = true; addClock(active); }) } function addClock(active) { var active = active; if (active) { clock = setInterval(function() { var is_right = parseInt(Math.random()); if (is_right) { parent.find(".slide-right-btn").click(); } else { parent.find(".slide-left-btn").click(); } }, 3000) } else { clearTimeout(clock); } }}
4、總結
輪播圖實現的痛點在於頭調到尾，尾調到頭，為實現這個我在頭尾加了兩個塊來實現
jQuery----無縫輪播圖
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
