unslider.js 添加缩略图功能
来源:互联网 发布:淘宝异地招聘客服贴吧 编辑:程序博客网 时间:2024/06/06 15:51
unslider.js 是一款小巧的响应式轮播图插件 官网 http://unslider.com/
unslider.js
/** * Unslider by @idiot and @damirfoy * Contributors: * - @ShamoX * http://unslider.com/ */(function($, f) {var Unslider = function() {// Object clonevar _ = this;// Set some options_.o = {speed: 500, // animation speed, false for no transition (integer or boolean)delay: 3000, // delay between slides, false for no autoplay (integer or boolean)init: 0, // init delay, false for no delay (integer or boolean)pause: !f, // pause on hover (boolean)loop: !f, // infinitely looping (boolean)keys: f, // keyboard shortcuts (boolean)dots: f, // display dots pagination (boolean)thumbs: f, // display thumbs pagination (boolean)arrows: f, // display prev/next arrows (boolean)prev: '←', // text or html inside prev button (string)next: '→', // same as for prev optionfluid: f, // is it a percentage width? (boolean)starting: f, // invoke before animation (function with argument)complete: f, // invoke after animation (function with argument)items: '>ul', // slides container selectoritem: '>li', // slidable items selectoreasing: 'swing',// easing function to use for animationautoplay: true // enable autoplay on initialisation};_.init = function(el, o) {// Check whether we're passing any options in to Unslider_.o = $.extend(_.o, o);_.el = el;_.ul = el.find(_.o.items);_.max = [el.outerWidth() | 0, el.outerHeight() | 0];_.li = _.ul.find(_.o.item).each(function(index) {var me = $(this),width = me.outerWidth(),height = me.outerHeight();// Set the max valuesif (width > _.max[0]) _.max[0] = width;if (height > _.max[1]) _.max[1] = height;});// Cached varsvar o = _.o,ul = _.ul,li = _.li,len = li.length;// Current indeed_.i = 0;// Set the main elementel.css({width: _.max[0], height: li.first().outerHeight(), overflow: 'hidden'});// Set the relative widthsul.css({position: 'relative', left: 0, width: (len * 100) + '%'});if(o.fluid) {li.css({'float': 'left', width: (100 / len) + '%'});} else {li.css({'float': 'left', width: (_.max[0]) + 'px'});}// Autoslideo.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);// Keypressesif (o.keys) {$(document).keydown(function(e) {var key = e.which;if (key == 37)_.prev(); // Leftelse if (key == 39)_.next(); // Rightelse if (key == 27)_.stop(); // Esc});};// Dot paginationo.dots && nav('dot');// Arrows supporto.arrows && nav('arrow');//thumb paginationo.thumbs && nav('thumb');// Patch for fluid-width sliders. Screw those guys.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);styl['width'] = Math.min(Math.round((width / el.parent().width()) * 100), 100) + '%';el.css(styl);li.css({ width: width + 'px' });}, 50);}).resize();};// Move supportif ($.event.special['move'] || $.Event('move')) {el.on('movestart', function(e) {if ((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) {e.preventDefault();}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 _;};// Move Unslider to a slide index_.to = function(index, callback) {// console.log("b:"+index);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 slide or not to slideif ((!target.length || index < 0) && o.loop == f) return;// Check if it's out of boundsif (!target.length) index = 0;if (index < 0) index = li.length - 1;target = li.eq(index);var speed = callback ? 5 : o.speed | 0,easing = o.easing,obj = {height: target.outerHeight()};if (!ul.queue('fx').length) {// Handle those pesky dotsel.find('.dot').eq(index).addClass('active').siblings().removeClass('active');//Handle those thumbsel.find('.thumb').eq(index).addClass('active1').siblings().removeClass('active1');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);});};};// Autoplay functionality_.play = function() {_.t = setInterval(function() {_.to(_.i + 1);}, _.o.delay | 0);};// Stop autoplay_.stop = function() {_.t = clearInterval(_.t);return _;};// Move to previous/next slide_.next = function() {return _.stop().to(_.i + 1);};_.prev = function() {return _.stop().to(_.i - 1);};// Create dots and arrows and thumbfunction 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>';} else if(name == 'thumb'){//可在这里生成 html 标签,也可在页面中直接添加html = '<ol class="thumbs">';$.each(_.li, function(index) {html += '<li class="' + (index == _.i ? name + ' active1' : name) + '">' + '<img src="img/'+(index+1)+'.jpg" width="100" height="100" />' + '</li>';});html += '</ol>';} else {html = '<div class="';html = html + name + 's">' + html + name + ' prev">' + _.o.prev + '</div>' + html + name + ' next">' + _.o.next + '</div></div>';};_.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();me.hasClass('dot')?_.stop().to(me.index()):(me.hasClass('thumb')?_.stop().to(me.index()):(me.hasClass('prev') ? _.prev() : _.next()));// if(me.hasClass('dot')){// _.stop().to(me.index());// }else{// if(me.hasClass('thumb')){// _.stop().to(me.index());// }else{// me.hasClass('prev') ? _.prev() : _.next();// }// }});};};// Create a jQuery plugin$.fn.unslider = function(o) {var len = this.length;// Enable multiple-slider supportreturn this.each(function(index) {// Cache a copy of $(this), so itvar me = $(this),key = 'unslider' + (len > 1 ? '-' + ++index : ''),instance = (new Unslider).init(me, o);// Invoke an Unslider instanceme.data(key, instance).data('key', key);});};Unslider.version = "1.0.0";})(jQuery, false);
调用
<!-- example --><div class="banner"><ul><li style="background-image: url('img/sunset.jpg');"><div class="inner"><h1>jQuery滑块,幻灯片。</h1><p>没有花哨的效果或不必要的标记,不到3 kb。</p><a class="btn" href="#download">Download</a></div></li><li style="background-image: url('img/wood.jpg');"><div class="inner"><h1>流体、灵活异常最小。</h1><p>在幻灯片中使用任何HTML,延长使用CSS。你能完全控制。</p><a class="btn" href="#download">Download</a></div></li><li style="background-image: url('img/subway.jpg');"><div class="inner"><h1>开源</h1><p>Unslider 源码 在 GitHub 上.</p><a class="btn" href="//github.com/idiot/unslider">Contribute</a></div></li><li style="background-image: url('img/shop.jpg');"><div class="inner"><h1>这个由背景图做幻灯片</h1><p>这样可直接在每个幻灯片上添加不同内容及按钮等你需要的东东。</p><a class="btn" href="#download">Download</a></div></li></ul><!-- 添加缩略图 也可在js中生成<ol class="thumbs"> <li class="thumb active1"><img src="img/1.jpg" width="100" height="100"></li><li class="thumb"><img src="img/2.jpg" width="100" height="100"></li><li class="thumb"><img src="img/3.jpg" width="100" height="100"></li><li class="thumb"><img src="img/4.jpg" width="100" height="100"></li></ol>--></div><!-- 添加 previous/next links --><!-- <a href="#" class="unslider-arrow prev">Previous slide</a><a href="#" class="unslider-arrow next">Next slide</a> --><!-- /example -->
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><script type="text/javascript" src="js/unslider.js"></script><script type="text/javascript">$(function(){$(".banner").unslider({dots:true,thumbs:true,arrows:true,keys: true});/**var unslider = $('.banner').unslider(); $('.unslider-arrow').click(function() { var fn = this.className.split(' ')[1]; console.log(fn); // 要么做unslider.data(unslider). next()或.prev()根据类名 unslider.data('unslider')[fn](); }); // var unslider = $('.banner1').unslider(); */})</script>
css
.banner .thumbs{position: absolute;left: 0;right: 0;top: 50px;width: 100%;height: 80px;}.banner .thumbs li {display: inline-block;*display: inline;zoom: 1;width: 80px;height: 80px;line-height: 80px;margin: 4px 4px;cursor: pointer;opacity: .4;-webkit-transition: background .5s, opacity .5s;-moz-transition: background .5s, opacity .5s;transition: background .5s, opacity .5s;}.banner .thumbs li.active1 {background: #fff;opacity: 1;}.banner .thumbs li img{width: 80px;height: 80px;}
0 0
- unslider.js 添加缩略图功能
- unslider.js轮播
- 给dede栏目添加上缩略图功能
- 给dede栏目添加上缩略图功能
- js实现缩略图功能的源代码
- 添加缩略图
- ECShop2.7.0 打印定单时添加缩略图功能
- 简单的带缩略图功能原生JS轮播图讲解。
- js 实现前端图片上传,展示缩略图功能
- 偶遇Unslider
- wordpress文章缩略图功能
- 为JTabbedPane添加缩略图
- 为JTabbedPane添加缩略图 .
- dede 栏目添加缩略图
- dedecms 栏目添加缩略图
- 为JTabbedPane添加缩略图
- 批量上传uploadify封装在thinkphp,并且添加缩略图和删除功能
- 织梦dedecms栏目添加自定义字段,增加栏目上传缩略图功能
- 怎样做一名优秀的应用开发工程师
- linux_创建ext4文件
- mybatis实战教程(mybatis in action),mybatis入门到精通
- IP查询调用接口演示代码
- Modbus通讯 功能码及实例
- unslider.js 添加缩略图功能
- JS中this的理解
- 用scp后台传输文件,用rsync进行断点续传
- 常用排序算法总结(转载,据说代码中存在错误,使用时请慎重)
- ubuntu workspace 快捷键
- async await
- 彩票查询接口
- MBProgressHUD框架的使用
- iOS8新特性 UIPresentationController(一) popover、alert、action sheet与search的新特性