1. 輪播圖實現！ · 前端demo

### 淡出淡入式 >效果如圖 ![](https://box.kancloud.cn/d85d3b0640cf69e38488766c8369a441_798x525.gif) >html代碼 ``` <div class="content"> <div id="list"> <img src="images/01.png" alt=""> <img src="images/02.png" alt=""> <img src="images/03.png" alt=""> <img src="images/04.png" alt=""> <img src="images/05.png" alt=""> </div> <button id="prev"></button> <button id="next"></button> <div id="btns"> <span class="current"></span> <span></span> <span></span> <span></span> <span></span> </div> </div> ``` >jQuery代碼 ``` $(function(){ /*------------點擊焦點跳到相應的圖片并且添加樣式----------*/ $("span").click(function(){ $(this).addClass("current").siblings().removeClass("current"); $("#list>img").eq($(this).index()).fadeIn().siblings().fadeOut(); var b_index = $(this).index(); console.log(b_index); }) /*----------------點擊按鈕切換圖片添加焦點樣式-------------*/ var index = 0; $("#next").click(function(){ index++; if(index>4) { index = 0; } console.log(index); animate(index); // $("#list img").eq(index).fadeIn().siblings().fadeOut(); // $("#btns>span").eq(index).addClass("current").siblings().removeClass("current"); }) $("#prev").click(function(){ index--; if(index<0) { index = 4; } console.log(index); animate(index); // $("#list>img").eq(index).fadeIn().siblings().fadeOut(); // $("#btns>span").eq(index).addClass("current").siblings().removeClass("current"); }) /*-----------封裝切換圖片&焦點樣式函數-------*/ function animate(index) { $("#list>img").eq(index).fadeIn().siblings().fadeOut(); $("#btns>span").eq(index).addClass("current").siblings().removeClass("current"); } /*---------添加定時器---------*/ var timer; function play(){ timer = setInterval(function(){ $("#next").click() }, 800) } /*---------添加自動播放--------*/ play(); function stop(){ clearInterval(timer); } /*---------鼠標懸停停止-------*/ $(".content").mouseover(function(){ stop(); }) $(".content").mouseout(function(){ play(); }) }) ``` >css代碼 ``` * { margin: 0; padding: 0; } .content { position: relative; width: 600px; height: 400px; margin-left: auto; margin-right: auto; border: 1px solid #333; } #list { position: absolute; width: 600px; height: 400px; } #list img, #prev, #next, #btns { position: absolute; } #list img:not(:first-child) { display: none; } #prev, #next { top: 50%; transform: translateY(-50%); z-index: 100; width: 40px; height: 70px; background: url("../images/icon-slides.png"); border: none; outline: none; cursor: pointer; } #prev { background-position-x: -86px; } #next { right: 0; background-position-x: -123px; } #prev:hover { background-position-x: -1px; } #next:hover { background-position-x: -42px; } #btns { bottom: 13px; right: 30px; } #btns>span { display: inline-block; width: 10px; height: 10px; background: #333; border: 1px solid #fff; border-radius: 50%; margin-right: 10px; cursor: pointer; } #btns .current { border-color: #333; background: #ccc; } ``` ### 滾動式 > 效果 ![](https://box.kancloud.cn/d2346af67e22bf38b78e37a9791a0d62_798x525.gif) >html 代碼 ``` <div class="content"> <div id="list" style="left:-600px"> <img src="img/05.png" alt=""> <img src="img/01.png" alt=""> <img src="img/02.png" alt=""> <img src="img/03.png" alt=""> <img src="img/04.png" alt=""> <img src="img/05.png" alt=""> <img src="img/01.png" alt=""> </div> <button id="prev"></button> <button id="next"></button> <div id="btns"> <span class="current"></span> <span></span> <span></span> <span></span> <span></span> </div> </div> ``` >js代碼 ``` $(function () { var timer; var index = 0; $("#next").click(function () { if (!$("#list").is(":animated")) { index++; if (index > 4) { index = 0; } showBtn(); animate(-600); } }) $("#prev").click(function () { if (!$("#list").is(":animated")) { index--; if (index < 0) { index = 4; } showBtn(); animate(600) } }) function animate(offset) { var newLeft = $("#list").position().left + offset $("#list").animate({ left: newLeft + "px" }, 500, function () { if (newLeft < -3000) { $("#list").css({ left: "-600px" }) } if (newLeft > -600) { $("#list").css({ left: "-3000px" }) } }) } function showBtn() { $("#btns>span").eq(index).addClass("current").siblings().removeClass("current"); } $("#btns>span").click(function(){ var offset = ($(this).index()-index)*-600; console.log(offset); index = $(this).index(); showBtn(); animate(offset); }) function play(){ timer = setInterval(function(){ $("#next").click() },1000) } play(); function stop(){ clearInterval(timer); } $(".content").mouseover(function(){ stop(); }) $(".content").mouseout(function(){ play(); }) }) ``` >css 代碼 ``` *{margin:0;padding:0} .content{ overflow: hidden; margin-top: 50px; margin-left: auto; margin-right: auto; position: relative; width:600px; height:400px; border:1px solid #333; } .content img{ float:left; } #btns .current{ background: orangered; } #list{ position: absolute; height:400px; width:4200px; } #prev,#next{ cursor: pointer; top:50%; transform: translateY(-50%); width:40px; height:74px; position: absolute; z-index: 100; background: url(../img/icon-slides.png); border:none; } #next{ right:0; background-position-x:-43px } #btns{ bottom: 40px; left:50%; transform: translateX(-50%); position: absolute; z-index: 101; } #btns span{ cursor: pointer; border-radius: 50%; width:20px; height:20px; display: inline-block; border:1px solid #fff; background: rgba(97, 96, 96, 0.3) } ``` ---- 整個demo已上傳至[github](https://github.com/MrXuxu/H5_demo/tree/master/jQuery%E8%BD%AE%E6%92%AD%E5%9B%BE)