JQ插件第四十九:图片滑动轮播

来源：互联网发布：顾比均线源码带买卖点编辑：程序博客网时间：2024/04/30 07:51

(function($) {    $.fn.slide = function(option) {        option = option || {};        var defaultOption = {            W: $(window).width(),            F: 5500,            T: null,            sort: 0,            nextBtn: null,            prevBtn: null        }        var opts = $.extend(defaultOption, option);        var obj = $(this);        var picNum = obj.find("img").length;        var objp = obj.parent();        function startSlide() {            opts.T = setInterval(function() {                opts.sort = (opts.sort % picNum) + 1;                obj.animate({ left: -opts.W * (opts.sort - 1) }, "slow");            }, opts.F);        }        function stopSlide() {            clearInterval(opts.T);        }        function slideHere() {            obj.animate({ left: -opts.W * (opts.sort - 1) }, "slow");        }        obj.css({ "width": picNum * opts.W, "position": "absolute" }).find("img").css({ "width": opts.W, "height": "auto", "float": "left", "display": "block" });        var h = obj.height();        objp.css({ "width": opts.W, "height": h });        var nexth = opts.nextBtn.height();        opts.nextBtn.css({ "left": opts.W - 80, "top": (h - nexth) / 2 });        opts.nextBtn.click(function() {            //下一张            opts.sort = ((opts.sort + 1) % picNum) > 0 ? (opts.sort + 1) % picNum : picNum;            slideHere();            stopSlide();            startSlide();        });        var prevh = opts.prevBtn.height();        opts.prevBtn.css({ "top": (h - prevh) / 2 });        opts.prevBtn.click(function() {            //上一张            opts.sort = (opts.sort - 1) % picNum > 0 ? (opts.sort - 1) % picNum : picNum;            slideHere();            stopSlide();            startSlide();        });        startSlide();    }})(jQuery)

以上代码是对网上其他轮播效果的再加工。

//调用过程$(function() {    $(".slides").slide({ prevBtn: $(".previous"), nextBtn: $(".next") });});

Demo下载页

0 0