13-----輪播實現（各種）
阿新 • • 發佈：2018-07-16
siblings splay adding tint ext 顏色 dto else add
無縫輪播實現（比較考驗邏輯思維）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } .slider-list{ width: 580px; overflow: hidden; margin: 100px auto; position: relative; } .slider-list .slider-wrapper{ height: 470px; } .slider-wrapper ul{ height: 100%; position: relative; } .slider-wrapper ul li{ float: left; width: 590px; height: 470px; } .slider-wrapper ul li a{ display: block; width: 100%; height: 100%; } .focus-img{ width: 590px; height: 470px; } button{ position: absolute; width: 24px; height: 40px; top: 50%; line-height: 40px; text-align: center; background-color: rgba(0,0,0,.2); color: white; font-size: 30px; border: 0; outline: none; cursor: pointer; z-index: 99; } button.next{ right: 0; } button.prev{ left: 0; } .slider-index{ position: absolute; bottom: 10px; left:250px; z-index: 2; } .slider-index span{ display: inline-block; width: 10px; height: 10px; border: 2px solid red; border-radius: 50%; } .slider-index span.active{ background-color: orange; } </style> </head> <body> <div class="slider-list"> <div class="slider-wrapper"> <ul> </ul> </div> <button class="next">></button> <button class="prev"><</button> <div class="slider-index"> <span class="active"></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 1.獲取本地圖片數據 590*470 var imgArr = [‘./5.jpg‘,‘./1.jpg‘,‘./2.jpg‘,‘./3.jpg‘,‘./4.jpg‘,‘./5.jpg‘,‘./1.jpg‘]; // 獲取圖片的寬度 var imgWidth = 590; var len = $(‘span‘).length; // 2.遍歷數據 將圖片添加到ul中 for(let i = 0;i < imgArr.length;i++){ let width = i*imgWidth; $(`<li> <a href="javascript:;"> <img src=${imgArr[i]} alt=${i}> </a> </li>`).appendTo(‘.slider-wrapper ul‘).addClass(‘slider-item‘) } // 設置圖片的類名 $(‘img‘).addClass(‘focus-img‘); // 設置父盒子的總寬度 $(‘.slider-wrapper‘).width((imgArr.length+1)*imgWidth); $(‘.slider-wrapper ul‘).width((imgArr.length+1)*imgWidth); // 初始化 // 默認顯示第一張圖片 init(); function init(){ $("ul").css("left",-imgWidth); } // 下一張 $(‘button.next‘).click(function(event) { next(); }); // 控制圖片顯示第幾張 var count = 1; function next(){ if (count ==len+1) { count = 2; $("ul").css("left",-imgWidth); }else{ count++; } $(‘.slider-wrapper ul‘).stop().animate({left:-count*imgWidth},200); // 控制輪播圖索引改變顏色 if (count>len) { $("span").eq(0).addClass("active").siblings("span").removeClass("active"); }else{ $("span").eq(count-1).addClass("active").siblings("span").removeClass("active"); } } // 給小圓圈添加點擊事件 $(‘span‘).click(function(){ //自己的樣式 $(this).addClass("active").siblings("span").removeClass("active"); count = $(this).index()+1; $("ul").animate({"left":-count*imgWidth},200); }) setInterval(next,2000); }) </script> </body> </html>
模仿京東輪播圖效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} ul,ol{ list-style: none;} .wrapper{ width: 580px; height: 240px; margin: 100px auto; /*overflow: hidden;*/ position: relative; } .wrapper ul{ width: 100%; height: 240px; overflow: hidden; } .wrapper ul li{ float: left; width: 580px; height: 240px; } ol{ position: absolute; right: 0; bottom: 10px; width: 190px; } ol li{ float: left; width: 20px; height: 20px; margin: 0 5px; text-align: center; border-radius: 50%; cursor: pointer; background-color: #abc; } ol li.current{ background-color: pink; } </style> <script type="text/javascript" src="./jquery-3.3.1.js"></script> <script type="text/javascript"> $(function () { // 根據ol下li的索引號，匹配ul下相對應li的索引號 $(".wrapper ol li").mouseenter(function () { $(this).addClass("current").siblings().removeClass("current"); $(".wrapper ul li").eq($(this).index()).stop().fadeIn("fast").siblings().stop().fadeOut(); }); }); </script> </head> <body> <div class="wrapper"> <ul> <li><img src="./1.jpg" alt=""/></li> <li><img src="./2.jpg" alt=""/></li> <li><img src="./3.jpg" alt=""/></li> <li><img src="./4.jpg" alt=""/></li> <li><img src="./5.jpg" alt=""/></li> </ul> <ol> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> </body> </html>
13-----輪播實現（各種）