slider jq小插件

html代码

<div class="r_list r_1" style="display:block;">
    <div class="min_box">
        <ul class="slider_con">
            <li>
                <a href="#" class="r_img"><img src="img/temp/r_img02.jpg" alt=""></a>
                <div class="shop_name">
                    <a href="#">施华洛世奇（Swarovski）Octea Chrono系列</a>
                </div>
                <b>¥12312</b>
                <a href="javascript:;" class="join_car">加入购物车</a>
            </li>
            <li>
                <a href="#" class="r_img"><img src="img/temp/r_img02.jpg" alt=""></a>
                <div class="shop_name"><a href="#">施华洛世奇（Swarovski）Octea Chrono系列</a></div>
                <b>¥12312</b>
                <a href="javascript:;" class="join_car">加入购物车</a>
            </li>
            <li>
                <a href="#" class="r_img"><img src="img/temp/r_img02.jpg" alt=""></a>
                <div class="shop_name"><a href="#">施华洛世奇（Swarovski）Octea Chrono系列</a></div>
                <b>¥12312</b>
                <a href="javascript:;" class="join_car">加入购物车</a>
            </li>
            <li>
                <a href="#" class="r_img"><img src="img/temp/r_img02.jpg" alt=""></a>
                <div class="shop_name"><a href="#">施华洛世奇（Swarovski）Octea Chrono系列</a></div>
                <b>¥12312</b>
                <a href="javascript:;" class="join_car">加入购物车</a>
            </li>
            <li>
                <a href="#" class="r_img"><img src="img/temp/r_img02.jpg" alt=""></a>
                <div class="shop_name"><a href="#">施华洛世奇（Swarovski）Octea Chrono系列</a></div>
                <b>¥12312</b>
                <a href="javascript:;" class="join_car">加入购物车</a>
            </li>
            <li>
                <a href="#" class="r_img"><img src="img/temp/r_img02.jpg" alt=""></a>
                <div class="shop_name"><a href="#">施华洛世奇（Swarovski）Octea Chrono系列</a></div>
                <b>¥12312</b>
                <a href="javascript:;" class="join_car">加入购物车</a>
            </li>
            <li>
                <a href="#" class="r_img"><img src="img/temp/r_img02.jpg" alt=""></a>
                <div class="shop_name"><a href="#">施华洛世奇（Swarovski）Octea Chrono系列</a></div>
                <b>¥12312</b>
                <a href="javascript:;" class="join_car">加入购物车</a>
            </li>
        </ul>
    </div>
    <div class="s_btn">
        <span class="prev_btn"></span>
        <span class="next_btn"></span>
    </div>
</div>

JS调用

$('.flash_box .r_1').slider({});

JS插件代码

/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2015-06-12 09:40:14
 * @version $Id$
 */
(function($){
    $.fn.slider=function(opts){
        opts=$.extend({}, $.fn.slider.opts, opts);
        var _this=this;
        _this.opts=opts;
        _this.ie6 = (!!window.ActiveXObject)&&!window.XMLHttpRequest;

        return _this.each(function(){
            var wrap = $(this).find(_this.opts.containerClass);
            var sLi = wrap.find('li');
            var that = this;
            var $that = $(this);
            var index = 0;
            var time = null;
            that.count = sLi.length;

            // next
            $that.find(_this.opts.nextClass).on('click', function(event) {
                if (_this.opts['isAnimate'] == true) return false;
                if (index >= that.count-_this.opts.showNum) {
                    index=that.count-_this.opts.showNum;
                }else{
                    index++;
                }
                change.call(that, _this,index,'next');
                return false;
            });
            // prev
            $that.find(_this.opts.prevClass).on('click', function(event) {
                if (_this.opts['isAnimate'] == true) return false;
                if(index <= 0){
                    index = 0;
                }else{
                    index--;
                }
                change.call(that, _this,index,'prev');
                return false;
            });
            $that.find(_this.opts.boxClass+' li').each(function(cindex) {
                $(this).on('click'+_this.opts.boxClass, function(event) {
                    change.call(that,_this,cindex,'box');
                    // index=cindex;
                    return false;                    
                });
            });

            // focus clean auto play
            $that.on('mouseover', function(event) {
                if (_this.opts.autoPlay) {
                    clearInterval(time);
                }
                if (_this.opts.btnHover) {
                    $that.find(_this.opts.arrowClass).removeClass('hide');
                }
                
            });
            // leave
            $that.on('mouseleave', function(event) {
                if (_this.opts.autoPlay) {
                    startAutoPlay();
                };
                if (_this.opts.btnHover) {
                    $that.find(_this.opts.arrowClass).addClass("hide");
                }
            });
            startAutoPlay();
            //auto play
            function startAutoPlay(){
                if(_this.opts.autoPlay){
                    time=setInterval(function(){
                        if (index >= that.count-_this.opts.showNum) {
                            index = 0;
                        }else{
                            index++;
                        }
                        change.call(that, _this, index, 'auto');
                    }, _this.opts.autoPlayTime);
                }
            }
            // box
            var boxLi = $that.find(_this.opts.boxClass+ ' ul li');
            var boxWidth = boxLi.outerWidth(true)*boxLi.length;
            if (_this.ie6) {
                $that.find(_this.opts.boxClass).css({
                    'width':boxWidth
                })
            }
            $that.find(_this.opts.boxClass).css({
                'margin-left': -(boxWidth/2)
            });
            //ul、li宽
            _this.opts['width'] = sLi.outerWidth();
            wrap.css('width', sLi.length*sLi.outerWidth());
        })
    }
    function change(_this,num,tag){
        var that=this;
        var $that=$(this);
        var x = num * _this.opts['width'];

            if (_this.opts.showNum>=that.count) {
                return false;
            }
            $that.find(_this.opts.boxClass + ' li').eq(num).addClass('sel').siblings().removeClass('sel');
            $that.find(_this.opts.containerClass).stop().animate({'margin-left':-x}, _this.opts.speed, function(){
                 _this.opts['isAnimate'] = false;
            });
            _this.opts['isAnimate'] = true
    }
    $.fn.slider.opts={
        autoPlay: false, 
        autoPlayTime: 2000,
        speed: 400,
        containerClass: '.slider_con',
        boxClass: '.l_btn',
        arrowClass: '.s_btn',
        nextClass: '.next_btn',
        prevClass: '.prev_btn',
        isAnimate: false,
        showNum: 5,
        btnHover: false
    }

})(jQuery);

 

转载于:https://www.cnblogs.com/JerryWang24/p/4661633.html