輪播圖-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);
![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)