這篇文章主要介紹了jQuery圖片輪播插件代碼的相關(guān)資料,在各大網(wǎng)站都可以簡單圖片輪播效果，非常實(shí)用，需要的朋友可以參考下
    還記得以前剛接觸前端的時(shí)候，瀏覽各大網(wǎng)站，很多都少不了的有個(gè)輪播的效果，那個(gè)時(shí)候自己是一個(gè)徹徹底底的小白，想著這些圖片滾動(dòng)起來還真是有意思，是什么讓這些圖片在一個(gè)方向上連續(xù)的滾動(dòng)呢。后來慢慢的接觸多了，覺得這些也是so easy的嘛，于是為了加深對(duì)js、jQuery的理解以及探究網(wǎng)站上各種效果的實(shí)現(xiàn)方法，就有了jQuery插件之路這樣一個(gè)系列，當(dāng)然為了紀(jì)念當(dāng)初對(duì)輪播的執(zhí)念，于是就從輪播開始寫了一個(gè)小小的插件，這只是一個(gè)開始，隨著后面的了解的更多，也會(huì)寫一些更加絢麗的DEMO。有興趣的朋友可以去看下吧。
    先給大家附上效果圖，如果大家感覺還不錯(cuò)，請(qǐng)參考實(shí)現(xiàn)代碼
    
    好了廢話不多說了，下面附上代碼。
    代碼如下:
    HTML部分：
    <div>
    <div>
    <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></div>
    <div><img src="img/btn_l.png"/></div>
    <div><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)畫執(zhí)行間隔
    speed : 500, //動(dòng)畫速度
    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) { //重寫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)識(shí)動(dòng)畫是否執(zhí)行完成
    gap, //執(zhí)行動(dòng)畫的按鈕下標(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></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)畫
    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ì)大家有幫助