首页>前端教程>jQuery教程

jquery插件推荐:Unslider超小的轮播,支持鼠标经过停止播放和响应式

图片轮播插件有很多,今天发现自己网站的幻灯片鼠标经过不能停止播放,还没有看清楚banner上的内容呢,就播放下一张图片了,很是郁闷。

就想着能不能找一个鼠标经过停止播放的轮播插件呢,无意间发现站酷的轮播banner图就是可以停止的,然后翻了一下它的源码,发现了一个名字叫Unslider的js文件,百度一下,在bootstrap官网看到了这个插件的推荐,真心好用啊。

具体效果如图:

unslider轮播插件.jpg

查看效果  

下载地址↓

链接: https://pan.baidu.com/s/1dFNCozZ 密码: tvwn

可以看看bootstrap的推荐:超小的jquery轮滑插件unslider

结果bootstrap上面的文件不能下载,只能百度到一个压缩包,下载下来,不过是版本V1.0,站酷的是V2.0,我把站酷的下载下来,因为被站酷的工程师改变了源文件,结果我死活用不起,吐血。

GitHub上面的源文件我也死活下载不下来,看来翻墙软件势在必行。

那就用V1.0版本的,毕竟这个插件有两个特性我非常看重。就是支持鼠标经过停止播放和响应式布局。

一、Unslider插件特点

  • 体积超小,3KB不到。

  • 效果很简单,很纯粹的轮播。

  • CSS样式完全自定义,宽高在样式中定义,很灵活。

  • 可以选择是否出现上一张下一张和下面的圆点翻页。

  • 可以定义速度。

  • 支持鼠标经过停止播放。

  • 响应式布局,各种设备自适应。

  • 支持移动端屏幕手势滑动,不过需要额外的插件。

二、使用方法

第1步:导入jquery库和unslider的js文件

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/unslider.min.js"></script>

第2步:写HTML结构,即幻灯片列表

如果需要上一张下一张的翻页,才加上prev/next两个a对象。

<div class="banner">
    <ul>
        <li><a href="#"><img src="images/1.jpg" /></a></li>
        <li><a href="#"><img src="images/2.jpg" /></a></li>
        <li><a href="#"><img src="images/3.jpg" /></a></li>
    </ul>
    <a href="#" class="unslider-arrow prev">Previous slide</a>
    <a href="#" class="unslider-arrow next">Next slide</a>
</div>

第3步:添加css样式,这个样式当然是自己写,完全自定义,超棒。

.banner { position: relative; overflow: hidden;width:1200px;height:300px;margin:0 auto;cursor:pointer; }
.banner ul li { float: left; }
.banner ul li img{width:100%;display:block;}
.dots{position:absolute;width:100%;bottom:20px;text-align:center;}  
.dot{  
    display:inline-block;  
    width: 12px;  
    height: 12px;  
    font-size: 0px;  
    line-height: 0px;  
    margin-right: 12px;  
    cursor: pointer;  
    background-color: #ffffff;  
    border-radius: 50%;  
}  
.dot.active{background-color: #5EB309;}  
.unslider-arrow{
	position:absolute;width:80px;height:100%;top:0;font-size:0;text-indent:-999em;}
.prev{
	left:0;
	background:url(../images/left_arrow.svg) no-repeat center center;}
.prev:hover{
	background-image:url(../images/left_arrowhover.svg);
	}
.next{
	right:0;
	background:url(../images/right_arrow.svg) no-repeat center center;}
.next:hover{
	background-image:url(../images/right_arrowhover.svg);}

第4步:初始化插件,加入参数控制。

<script type="text/javascript">
$(function() {
    $('.banner').unslider({
	speed: 500,               //  播放速度,单位毫秒
	delay: 3000,              //  每张图片滑动的间隔时间,单位毫秒
	keys: true,               //  允许使用键盘的←、→两个键翻页,按ESC键可以停止自动播放。
	dots: true,               //  允许圆点导航
	fluid: true              //  支持响应式布局,随着设备的宽度变化自适应
		});
		
//允许有上一张下一张翻页出现,才需要加下面的代码。	
var unslider = $('.banner').unslider();

    $('.unslider-arrow').click(function() {
        var fn = this.className.split(' ')[1];

        //  Either do unslider.data('unslider').next() or .prev() depending on the className
        unslider.data('unslider')[fn]();
    });
});
</script>

如果有兴趣可以参看源代码,这是第一版本的。

Unslider插件第一版源代码:

/** 
 *   Unslider by @idiot and @damirfoy 
 *   Contributors: 
 *   - @ShamoX 
 * 
 */  
  
(function($, f) {  
    var Unslider = function() {  
        //  克隆对象  
        var _ = this;  
  
        //  设置一些默认参数  
        _.o = {  
            speed: 500,     // 动画过渡的速度(毫秒),如果不需要过渡效果就设置为false  
            delay: 3000,    // 每张幻灯片的间隔时间(毫秒), 如果不是自动播放就设置为false  
            init: 0,        // 初始化延迟时间(毫秒),如果不需要延迟就设置为false  
            pause: !f,      // 当鼠标指针浮动在当前区域内时是否暂停自动播放  
            loop: !f,       // 是否无尽循环播放  
            keys: f,        // 是否开启键盘导航  
            dots: f,        // 是否显示导航点  
            arrows: f,      // 是否显示向前和向后的箭头  
            prev: '←',     // 向前按钮中的显示文字(或html片段)  
            next: '→',     // 向后......  
            fluid: f,       // 是否宽度自适应  
            starting: f,    // 在每个动画前调用的函数  
            complete: f,    // 在每个动画之后调用的函数  
            items: '>ul',   // 幻灯片的容器选择器  
            item: '>li',    // 需要滚动的选择器  
            easing: 'swing',// 动画的缓动函数(easing function)  
            autoplay: true  // 是否允许自动播放  
        };  
  
        _.init = function(el, o) {  
            //  将我们在外部调用时设置的参数覆盖掉默认参数  
            _.o = $.extend(_.o, o);  
  
            _.el = el;  
            _.ul = el.find(_.o.items);//返回ul元素集合  
            _.max = [el.outerWidth() | 0, el.outerHeight() | 0];//保存一下幻灯片div容器的宽和高  
            _.li = _.ul.find(_.o.item).each(function(index) {  
                var me = $(this),  
                    width = me.outerWidth(),  
                    height = me.outerHeight();  
  
                //  记录最大幻灯片的宽高  
                if (width > _.max[0]) _.max[0] = width;  
                if (height > _.max[1]) _.max[1] = height;  
            });  
  
  
            //  申请一些临时变量  
            var o = _.o,  
                ul = _.ul,  
                li = _.li,  
                len = li.length;//li元素个数  
  
            //  当前索引,或者叫页码更容易理解吧,源代码中写了“Current indeed”,应该是“index”吧  
            _.i = 0;  
  
            //  设置幻灯片div容器的样式,高度初始化为第一个li的高度  
            el.css({width: _.max[0], height: li.first().outerHeight(), overflow: 'hidden'});  
  
            //  设置ul元素的位置和宽度,宽度的公式是(li元素的个数乘以100)%,我的例子中就是300%  
            ul.css({position: 'relative', left: 0, width: (len * 100) + '%'});  
            if(o.fluid) {  
                li.css({'float': 'left', width: (100 / len) + '%'});//自适应宽度时,li元素的宽度就是把ul的宽度平均分成len份  
            } else {  
                li.css({'float': 'left', width: (_.max[0]) + 'px'});//不是自适应时,li元素的宽度是最大的幻灯片的宽度  
            }  
  
            //  在init毫秒后开启自动播放  
            o.autoplay && setTimeout(function() {  
                if (o.delay | 0) {  
                    _.play();  
  
                    if (o.pause) {  
                        el.on('mouseover mouseout', function(e) {  
                            _.stop();//鼠标经过时暂停  
                            e.type == 'mouseout' && _.play();//鼠标离开时播放  
                        });  
                    };  
                };  
            }, o.init | 0);  
  
            //  键盘事件处理  
            if (o.keys) {  
                $(document).keydown(function(e) {  
                    var key = e.which;  
  
                    if (key == 37)  
                        _.prev(); // 左箭头按键  
                    else if (key == 39)  
                        _.next(); // 右箭头按键  
                    else if (key == 27)  
                        _.stop(); // Esc  
                });  
            };  
  
            //  显示导航点  
            o.dots && nav('dot');  
  
            //  显示箭头  
            o.arrows && nav('arrow');  
  
            //  使幻灯片div容器宽度自适应  
            if (o.fluid) {  
                $(window).resize(function() {  
                    _.r && clearTimeout(_.r);  
  
                    _.r = setTimeout(function() {  
                        var styl = {height: li.eq(_.i).outerHeight()},  
                            width = el.outerWidth();  
  
                        ul.css(styl);  
                        //这一串真是绕,其实就是计算div占父窗口的宽度原始比例,然后记录到styl中  
                        styl['width'] = Math.min(Math.round((width / el.parent().width()) * 100), 100) + '%';  
                        el.css(styl);//重新设置幻灯片div容器的宽度为比例而不是像素值,这样就能达到自适应的目的了  
                        li.css({ width: width + 'px' });//设置li的绝对宽度,以防因div被自适应了而挤压或拉伸了li造成内容扭曲(如有误请大神指教)  
                    }, 50);//每次父窗口改变大小时,幻灯片div容器延迟50毫秒后再跟着自适应大小,请大神告诉我这样做的目的仅仅是为了效果更自然么  
                }).resize();//强制执行resize事件,使得自适应特性在最开始时就被设置好了  
            };  
  
            //  自定义move事件,这一段不太懂,求大神指点  
            if ($.event.special['move'] || $.Event('move')) {  
                //  为幻灯片div元素绑定movestart、move、moveend事件  
                el.on('movestart', function(e) {  
                    if ((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) {  
                        e.preventDefault();//鼠标位置不在当前区域时取消事件的默认动作(我猜的,关键是不知道distX这几个的准确含义)  
                    }else{  
                        el.data("left", _.ul.offset().left / el.width() * 100);  
                    }  
                }).on('move', function(e) {  
                        var left = 100 * e.distX / el.width();  
                        var leftDelta = 100 * e.deltaX / el.width();  
                        _.ul[0].style.left = parseInt(_.ul[0].style.left.replace("%", ""))+leftDelta+"%";  
  
                        _.ul.data("left", left);  
                    }).on('moveend', function(e) {  
                        var left = _.ul.data("left");//  
                        if (Math.abs(left) > 30){  
                            var i = left > 0 ? _.i-1 : _.i+1;  
                            if (i < 0 || i >= len) i = _.i;  
                            _.to(i);  
                        }else{  
                            _.to(_.i);  
                        }  
                    });  
            };  
  
            return _;  
        };  
  
        //  播放指定索引的幻灯片  
        _.to = function(index, callback) {  
            if (_.t) {  
                _.stop();  
                _.play();  
            }  
            var o = _.o,  
                el = _.el,  
                ul = _.ul,  
                li = _.li,  
                current = _.i,  
                target = li.eq(index);  
            //在动画之前执行的函数,我的例子里都没有,可以忽略它们  
            $.isFunction(o.starting) && !callback && o.starting(el, li.eq(current));  
  
            //  如果(一张幻灯片也没有或者索引无效),并且不是循环播放,就啥也不做,我觉得这样不好,因为to这个函数就只能在循环播放状态下工作了  
            if ((!target.length || index < 0) && o.loop == f) return;  
  
            //  检查索引是否有效,超出时设置为0,即第一张幻灯片  
            if (!target.length) index = 0;  
            if (index < 0) index = li.length - 1;//索引负数时设置为最后一张幻灯片  
            target = li.eq(index);//获取目标元素  
  
            var speed = callback ? 5 : o.speed | 0,//执行回调函数后返回的是真则speed设为5,如果没有回调函数或返回假则设置为o.speed  
                easing = o.easing,  
                obj = {height: target.outerHeight()};  
  
            if (!ul.queue('fx').length) {//确保没有为ul元素添加函数队列,应该是为了防止上一次动作还没有完成吧  
                //  设置对应导航点的高亮  
                el.find('.dot').eq(index).addClass('active').siblings().removeClass('active');  
                //  改变幻灯片div容器的高度为目标元素的高度,并把ul的位置向左移动(index*100%),使目标元素正好在幻灯片div容器区域  
                el.animate(obj, speed, easing) && ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, easing, function(data) {  
                    _.i = index;//移动结束之后更新一下当前索引  
                    //动画结束之后执行的函数,我的例子中也没有,忽略它们  
                    $.isFunction(o.complete) && !callback && o.complete(el, target);  
                });  
            };  
        };  
  
        //  每隔delay毫秒自动播放  
        _.play = function() {  
            _.t = setInterval(function() {  
                _.to(_.i + 1);//这里就加了1个索引号,具体的处理都封装在了to方法中  
            }, _.o.delay | 0);  
        };  
  
        //  停止自动播放  
        _.stop = function() {  
            _.t = clearInterval(_.t);  
            return _;  
        };  
  
        //  向后翻一张  
        _.next = function() {  
            return _.stop().to(_.i + 1);  
        };  
        //  向前翻一张  
        _.prev = function() {  
            return _.stop().to(_.i - 1);  
        };  
  
        //  创建导航点和箭头  
        function nav(name, html) {  
            if (name == 'dot') {  
                html = '<ol class="dots">';  
                $.each(_.li, function(index) {  
                    html += '<li class="' + (index == _.i ? name + ' active' : name) + '">' + ++index + '</li>';  
                });  
                html += '</ol>';  
                /*整理一下,在我的例子中就是这副摸样 
                  <ol class="dots">            
                  <li class="dot active">0</li> 
                  <li class="dot">1</li> 
                  <li class="dot">2</li> 
                  </ol> 
                */  
            } else {  
                html = '<div class="';  
                html = html + name + 's">' + html + name + ' prev">' + _.o.prev + '</div>' + html + name + ' next">' + _.o.next + '</div></div>';  
                /*也整理一下 
                  <div class="arrows"> 
                    <div class="arrow prev">←</div> 
                    <div class="arrow next">→</div> 
                  </div> 
                */  
            };  
            //先给幻灯片div容器元素加上has-dots或arrows的class,再把上面组织好的元素追加为子元素,并给该子元素添加click事件处理函数  
            _.el.addClass('has-' + name + 's').append(html).find('.' + name).click(function() {  
                var me = $(this);  
                me.hasClass('dot') ? _.stop().to(me.index()) : me.hasClass('prev') ? _.prev() : _.next();  
            });  
        };  
    };  
  
    //  将unslider方法扩展到jQuery对象,使任意jQuery对象都能够直接访问该方法,就像上面那样:$('.banner').unslider();  
    $.fn.unslider = function(o) {  
        var len = this.length;  
  
        //  遍历li元素集  
        return this.each(function(index) {  
            var me = $(this),  
                key = 'unslider' + (len > 1 ? '-' + ++index : ''),  
                instance = (new Unslider).init(me, o);  
  
            //  给div元素添加数据  
            me.data(key, instance).data('key', key);  
        });  
    };  
  
    Unslider.version = "1.0.0";  
})(jQuery, false);

不过我试了一下,如果幻灯片图片比较少,不停的就两张图片滑来滑去,效果很单调,所以这个插件适合图片比较多的时候。

点赞


3
保存到:

相关文章

发表评论:

◎请发表你卖萌撒娇或一针见血的评论,严禁小广告。

Top