輪播圖-html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>輪播圖</title> <style> * {padding: 0;margin: 0;list-style: none;} .box {width: 400px;height: 260px;margin: 50px auto;border: 1px solid #f66;position: relative;} .box .items {width: 400px;height: 260px;position: relative;} .box .items img { position: absolute; top:0;left: 0;display: none;} .box .items img:nth-child(1) {display: block;} .box .controls .prev{width: 50px;height: 50px; position: absolute;left:10px; top: 50%;transform: translateY(-50%)} .box .controls .next{width: 50px;height: 50px; position: absolute;right:10px; top: 50%;transform: translateY(-50%)} .points { position: absolute;bottom:20px;left: 50%;transform: translateX(-50%);} .points li {width: 10px;display: inline-block;height: 10px;border-radius: 50%;background-color: #fff;} .points li.active { background-color: #f66;} </style> </head> <body> <div class="box banner1"> <div class="items"> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> <img src="img/5.jpg" alt=""> <img src="img/6.jpg" alt=""> </div> <div class="controls"> <button class="prev">←</button> <button class="next">→</button> </div> <ul class="points"></ul> </div> </body> <script src="jquery.js"></script> <script src="jquery.banner.js"></script> <script> $('.banner1').fade({ box:$(".box"), imgs: $('.banner1').find('.items').find('img'), // 必選 prev: $('.banner1').find('.prev'), // 必選，上一頁按鈕 next: $('.banner1').find('.next'), // 必選, 下一頁按鈕 points: $('.banner1').find('.points'), // 可選，小圓點 autoplay: true, // 可選, 默認為true delay: 4000, // 可選，默認為3000 current: 0, // 可選， 默認是第0張圖片顯示 duration: 500 // 可選， 默認為300 -- 動畫時長 }) </script> </html>
輪播圖-插件
;(function ($) { 'use strict'; $.fn.extend({ fade (options) { var obj = {} // 字面量對象 // console.log(options) // console.log('輪播圖') // 1、通過解構賦值獲取輪播圖的參數 var { imgs, prev, next, points, autoplay, delay, current, duration } = options // 2、為可選參數設置默認值 autoplay = autoplay === false ? false : true // 自動輪播 delay = delay || 3000 // 自動輪播的時長 current = current || 0 // 默認顯示的是哪一個圖片 duration = duration || 300 // 每次動畫時長 // 3、獲取圖片的個數 var len = imgs.length console.log(len) // 4、默認的圖片顯示 ani(current) // 5、點擊下一頁 next.on('click', function () { current++ if (current === len) { current = 0 } ani(current) }) // 6、點擊上一頁 prev.on('click', function () { current-- if (current === -1) { current = len - 1 } ani(current) }) // 7、顯示小圓點 並且給默認的圖片對應的小圓點加樣式 for (var i = 0; i < len; i++) { points.append('<li></li>') } points.find('li').eq(current).addClass('active').siblings().removeClass('active') // 8、自動輪播 var timer = null if (autoplay) { timer = setInterval(function () { next.click() }, delay) } // 9、鼠標滑過事件 -- 取消自動輪播，鼠標移除，重新自動輪播 console.log(this) if (autoplay) { this.hover(function () { clearInterval(timer) }, function () { timer = setInterval(function () { next.click() }, delay) }) } // 10、小圓點滑過切換 points.find('li').on('mouseenter', function () { current = $(this).index() ani(current) }) // 封裝動畫的函數 function ani (current) { points.find('li').eq(current).addClass('active').siblings().removeClass('active') imgs.eq(current).stop().fadeIn(duration).siblings().stop().fadeOut(duration) } } }) })(jQuery);