jQuery实现异形轮播图
思路：
????????異形輪播圖與普通輪播圖不同的一點，是異形輪播圖一次性展示多個圖片，且圖片大小的位置會動態變化。
? ? ? ? 以往我的處理辦法都是直接給要展示的圖片動態的添加一個class類，?簡單粗暴。這次我在很多地方都使用了數組思想和對象思想，比如arr中我放了正在展示的圖片的索引值，并通過數組的pop()、push()?、shift()、unshift()方法實現arr數組中儲存的圖片索引值的動態刪減，實現點擊按鈕就可以控制正在展示的圖片的索引值。又比如在給每個li設置背景顏色background-color的時候，我沒有使用傳統css的方式（一方面想突破自己，一方面用css要寫9個li的類名和background-color我想偷懶），我把所有li的背景色background-color放在了listStyle對象中，再通過for循環遍歷把background-color綁定給對應的li。又比如classKind中我放了正在展示的5個li的類名，通過list.eq(arr[index]).addClass(classKind[index]);使得正在展示的圖片添加對應的樣式（寬高、位置、字體大小）。這里需要注意的是，在添加樣式之前一定要用list.removeClass();來刪除所有li之前的類名，不然的話會出現多個li綁定同一個class類名的情況，輪播幾次后場面會相當混亂啦。最后，我們在實現點擊按鈕可以成功輪播后，可以在css中給li添加一個transition: all 1s;的過渡效果，這樣就相當完美了。
源碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;list-style: none;}.app {width: 804px;height: 300px;margin: 0 auto;background-color: #eee;}.main {width: 804px;height: 160px;display: flex;justify-content: space-evenly;align-items: flex-end;position: relative;}.mid {width: 200px;height: 130px;background-color: #fff;}li {position: absolute;width: 120px;height: 80px;color: #fff;font-size: 60px;text-align: center;display: none;transition: all 1s;}.current {width: 180px;height: 120px;font-size: 90px;display: block;left: 312px;}.next-1, .pre-1 {width: 150px;height: 100px;font-size: 75px;display: block;}.next-1 {right: 148px;}.pre-1 {left: 148px;}.next-2 {width: 120px;height: 80px;font-size: 60px;display: block;}.next-2, .pre-2 {width: 120px;height: 80px;font-size: 60px;display: block;}.next-2 {right: 14px;}.pre-2 {left: 14px;}.control {width: 774px;height: 80px;margin: 0 auto;background-color: #fff;position: relative;}button {width: 40px;height: 40px;background-color: #ccc;border: none;cursor: pointer;position: absolute;top: 50%;margin-top: -20px;right: 10px;}span {display: inline-block;width: 0;height: 0;border: 16px solid transparent;}.btn-left span {border-right-color: #fff;}.btn-left {left: 10px;}.btn-right span {border-left-color: #fff;}</style> </head> <body><div class="app"><ul class="main"><li class="pre-2">1</li><li class="pre-1">2</li><li class="current">3</li><li class="next-1">4</li><li class="next-2">5</li><li>6</li><li>7</li><li>8</li><li>9</li><div class="mid"></div></ul><div class="control"><button class="btn-left"><span></span></button><button class="btn-right"><span></span></button></div></div><script src="/通用資源/jquery.js"></script><script>//聲明變量var list = $('li');var goNext = $('.btn-right');var goPre = $('.btn-left');var index = 0;var arr = [0, 1, 2, 3, 4];var classKind =['pre-2', 'pre-1', 'current', 'next-1', 'next-2'];var lastmost = arr[arr.length-1];var foremost = arr[0];var listStyle = {0: 'lightgreen',1: 'yellow',2: 'orange',3: 'lightblue',4: 'pink',5: 'skyblue',6: 'lightcoral',7: 'khaki',8: 'plum',};//給每個li綁定樣式for (var key in listStyle) {// console.log(key,listStyle[key]);list.eq(key).css({backgroundColor: listStyle[key]});};//封裝切換頁面函數function goPage() {list.removeClass();for (var index in arr) {for (var index in classKind) {list.eq(arr[index]).addClass(classKind[index]);};};};//下一張goNext.click(function() {arr.shift();lastmost++;if (lastmost > 8) {lastmost = 0;};arr.push( lastmost);// console.log(arr);goPage();});//上一張goPre.click(function() {arr.pop();foremost--;if (foremost < 0) {foremost = 8;};arr.unshift(foremost);// console.log(arr);goPage();});</script> </body> </html>效果圖：
jQuery實現異形輪播圖
小插曲：
到今天為止，我的jQuery學習就告一段落了，由于jQuery現在企業中也用的少了，所以后面關于jQuery的實戰可能就比較少了。我要開始學習JavaScript進階了，作為信管專業的學生，從大一開始就難免會接觸python、java、html等一些代碼課，最開始接觸的時候，我的感受是敲代碼的人真的很酷，不夠我是個渣滓哈，巨菜，連python基礎的for循環、if條件語句啥的都搞不會，那時候一直在想“別人到底是怎么記住幾十行代碼的”，現在我的感受就是，沒有人能記住那么多代碼，學習編程正確方法不是靠記代碼，而是在學習了基礎知識的基礎之上去思考和理解解決問題的思路。很感謝自己選擇了自學前端開發，前端很有趣很適合我，會一直加油！
總結
以上是生活随笔為你收集整理的jQuery实现异形轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Design compiler综合教程
- 下一篇： [luogu p2440] 木材加工