快捷導(dǎo)航

jQuery圖片輪播插件——前端開發(fā)必看

更新時間：2016年05月31日 17:11:48 作者：蜀北喬少恭

這篇文章主要介紹了jQuery圖片輪播插件代碼的相關(guān)資料,在各大網(wǎng)站都可以簡單圖片輪播效果，非常實用，需要的朋友可以參考下

還記得以前剛接觸前端的時候，瀏覽各大網(wǎng)站，很多都少不了的有個輪播的效果，那個時候自己是一個徹徹底底的小白，想著這些圖片滾動起來還真是有意思，是什么讓這些圖片在一個方向上連續(xù)的滾動呢。后來慢慢的接觸多了，覺得這些也是so easy的嘛，于是為了加深對js、jQuery的理解以及探究網(wǎng)站上各種效果的實現(xiàn)方法，就有了jQuery插件之路這樣一個系列，當(dāng)然為了紀(jì)念當(dāng)初對輪播的執(zhí)念，于是就從輪播開始寫了一個小小的插件，這只是一個開始，隨著后面的了解的更多，也會寫一些更加絢麗的DEMO。有興趣的朋友可以去看下吧。

先給大家附上效果圖，如果大家感覺還不錯，請參考實現(xiàn)代碼

好了廢話不多說了，下面附上代碼。

HTML部分：

<div class="slider">
<div class="ul-box">
<ul>
<li><a href="javascript:;"><img src="img/1.jpg"/></a></li>
<li><a href="javascript:;"><img src="img/2.jpg"/></a></li>
<li><a href="javascript:;"><img src="img/3.jpg"/></a></li>
<li><a href="javascript:;"><img src="img/4.jpg"/></a></li>
<li><a href="javascript:;"><img src="img/5.jpg"/></a></li>
<li><a href="javascript:;"><img src="img/6.jpg"/></a></li>
</ul>
</div>
<div class="mask"></div>
<div class="prev"><img src="img/btn_l.png"/></div>
<div class="next"><img src="img/btn_r.png"/></div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/slider.js"></script>
<script>
$('.slider').slider({
width : 640, 
height : 270, 
during : 2000, //動畫執(zhí)行間隔
speed : 500, //動畫速度
btnSize : 20, //底部遮罩層的按鈕大小
btnSpace : 10, //底部的按鈕間隙
direction : 1 //輪播方向默認(rèn)為1，圖片向左移動
});
</script>

CSS部分：

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.slider{
position: relative;
overflow: hidden;
}
.slider ul{
list-style: none;
float: left;
}
.slider ul li{
float: left;
}
.slider .mask{
position: absolute;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, .3);
}
.slider .mask .sliderBtn{
position: absolute;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
background: radial-gradient(white 20%, transparent 50%);
}
.slider .prev, .slider .next{
position: absolute;
width: 45px; 
height: 100%;
background-color: rgba(0, 0, 0, .2);
cursor: pointer;
top: 0;
display: none;
}
.slider .prev{
left: 0;
}
.slider .next{
right: 0;
}
.slider .prev img, .slider .next img{
position: absolute;
top: 50%;
left: 50%;
margin-top: -22.5px;
margin-left: -22.5px;
}

JS部分：

(function ($) {
$.fn.slider = function (setting) { //給jQuery的實例對象綁定一個slider方法
var defaultSetting = {
width : 640,
height : 270,
during : 3000,
speed : 500,
btnSize : 30,
btnSpace : 10,
direction : 1
}
setting = $.extend(true, {}, defaultSetting, setting); //用傳入的參數(shù)替換掉默認(rèn)的設(shè)置 
return this.each(function (i, item) { 
var _setInterval = window.setInterval; 
window.setInterval = function (callback, timer, param) { //重寫setInterval函數(shù)，讓其可以傳參
var args = Array.prototype.slice.call(arguments, 2); 
var _fn = function () {
callback.apply(null, args);
}
return _setInterval(_fn, timer);
}
var _this = $(this),
ulBox = $('.ul-box', this),
ul = $('ul', this),
li = $('li', ul),
img = $('img', li),
len = li.size(),
mask = $('.mask', this),
index = 0, //用來控制按鈕的下標(biāo)
flag = true, //標(biāo)識動畫是否執(zhí)行完成
gap, //執(zhí)行動畫的按鈕下標(biāo)和當(dāng)前按鈕的下標(biāo)的差
timer; //計時器
_this.width(setting.width).height(setting.height);
ulBox.width(setting.width * 3 * len).height(setting.height).css({
marginLeft: -setting.width * len
});
ul.width(setting.width * len).height(setting.height);
img.width(setting.width).height(setting.height);
mask.height(setting.btnSize + 2 * setting.btnSpace);
//添加btn
for(var i = 0, str = ''; i < len; i++){
str += '<div class="sliderBtn"></div>';
}
mask.html(str);
var ulFir = ul.clone(true);
var ulSec = ul.clone(true);
var sliderBtn = $('.sliderBtn', '.mask');
ulBox.append(ulFir);
ulBox.append(ulSec);
sliderBtn.each(function (i, item) {
$(item).css({
width : setting.btnSize,
height : setting.btnSize,
top : setting.btnSpace,
left : parseInt(setting.width - (setting.btnSize + setting.btnSpace *2) *len, 10) /2 + setting.btnSize * i + setting.btnSpace * i * 2 + setting.btnSpace
});
$(item).mouseenter(function () {
gap = Math.abs(i - index);
i > index ? (flag && ani(1, gap)) : (flag && ani(0, gap));
})
});
btnAni(0);
//按鈕樣式變化
function btnAni (index) {
$('.sliderBtn').css('background', 'radial-gradient(white 20%, transparent 50%)');
$('.sliderBtn').eq(index).css('background', 'radial-gradient(white 10%, transparent 30%, white 70%)');
}
//動畫
function ani (direction, num) {
if(flag){
//默認(rèn)1向左運動，0向右運動
flag = false;
var ulfir = $('ul', ulBox).eq(0);
var left = parseInt(ulfir.css('margin-left'), 10);
if(direction){
index += num;
index = index % len;
left = left - num * setting.width;
ulfir.animate({
marginLeft: left
}, setting.speed, function () {
if(left <= -len * setting.width){
ulfir = ulfir.remove(); 
ulfir.css('margin-left', 0);
ulBox.append(ulfir);
}
flag = true;
});
}else{
index -= num;
index = index <= -1 ? len - 1 : index;
left = left + num * setting.width;
ulfir.animate({
marginLeft: left
}, setting.speed, function () {
if(left >= len * setting.width){
var ulLast = $('ul', ulBox).eq(2).remove();
ulLast.css('margin-left', 0);
ulBox.prepend(ulLast);
ulfir.css('margin-left', 0);
}
flag = true
})
}
btnAni(index)
}
}
//定時器
timer = setInterval(ani, setting.during, setting.direction, 1);
_this.hover(function () {
$('.prev', this).css('display', 'block');
$('.next', this).css('display', 'block');
clearInterval(timer);
}, function () {
$('.prev', this).css('display', 'none');
$('.next', this).css('display', 'none');
timer = setInterval(ani, setting.during, setting.direction, 1);
})
$('.next').click(function () {
flag && ani(1, 1);
})
$('.prev').click(function () {
flag && ani(0, 1);
})
})
}
})(jQuery)

以上代碼是小編給大家介紹的jQuery圖片輪播插件代碼，希望對大家有幫助，如果大家有疑問歡迎給我留言小編會及時回復(fù)大家的的，在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: