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

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

先給大家附上效果圖，如果大家感覺(jué)還不錯(cuò)，請(qǐng)參考實(shí)現(xiàn)代碼

好了廢話不多說(shuō)了，下面附上代碼。

代碼如下:

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, //動(dòng)畫(huà)執(zhí)行間隔

speed : 500, //動(dòng)畫(huà)速度

btnSize : 20, //底部遮罩層的按鈕大小

btnSpace : 10, //底部的按鈕間隙

direction : 1 //輪播方向默認(rèn)為1，圖片向左移動(dòng)

});

</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的實(shí)例對(duì)象綁定一個(gè)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) { //重寫(xiě)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, //用來(lái)控制按鈕的下標(biāo)

flag = true, //標(biāo)識(shí)動(dòng)畫(huà)是否執(zhí)行完成

gap, //執(zhí)行動(dòng)畫(huà)的按鈕下標(biāo)和當(dāng)前按鈕的下標(biāo)的差

timer; //計(jì)時(shí)器

_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%)');

}

//動(dòng)畫(huà)

function ani (direction, num) {

if(flag){

//默認(rèn)1向左運(yùn)動(dòng)，0向右運(yùn)動(dòng)

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)

}

}

//定時(shí)器

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圖片輪播插件代碼，希望對(duì)大家有幫助