jQuery图片轮播(焦点图)插件(转载）
生活随笔
收集整理的这篇文章主要介绍了
jQuery图片轮播(焦点图)插件(转载）
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
本文转自http://www.oschina.net/code/snippet_206691_11515?p=3#comments
特点：兼容IE6+，Chrome，Firefox，Opera，safari，可左右，可上下，可快可慢，可指定默认显示第N张，自由设定，代码简洁，运行效率高，用户体验良好:) ！！感谢各位朋友的热心反馈！！ ＝update log＝＝2015.01.23 新增：播放顺序为12341234 修复：频繁悬停后，滚动错乱 ＝update log＝＝2014.04.30 新增：按键鼠标经过阻止事件冒泡 修复：频繁悬停后，滚动错乱 ＝update log＝＝2013.03.14 新增：可手动设置尺寸，若未设置，自动采用第一张图片尺寸 修复：鼠标经过再离开时，增加一个延时时长，再循环到下一张 ＝update log＝＝2012.08.09 新增：底栏可设置隐藏 修复：滚动方式由原来的1-2-3-4-1-2-3-4... 修改为 1-2-3-4-3-2-1...，滚动效果更平滑 ＝update log＝＝2012.07.05 修复：设置各LI元素为第一张图片的尺寸，防止后续若有小图导致整体位置错乱 ＝update log＝＝2012.06.30 修复：IE下显示边框，滚动重叠问题 新增：点选按键隐藏设置，默认2秒后隐藏，按键样式，可圆可方（IE8-只方不圆） 演示地址：http://ishere.cn/demo/jquery.slideBox/
1. [图片] 方形按键，显示
2. [图片] 按键自动隐藏
3. [图片] 圆形按键
4. [图片] 隐藏底栏
5. [代码]jquery.slideBox.css
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | @charset "utf-8"; html, body { font-family:"微软雅黑"} /* * jQuery图片轮播(焦点图)插件 * ADD.JENA.201206291027 * EDIT.JENA.201206300904 * Author: jena * Demo: http://ishere.cn/demo/jquery.slidebox/ */ div.slideBox{ position:relative; width:670px; height:300px; overflow:hidden;} div.slideBox ul.items{ position:absolute; float:left; background:none; list-style:none; padding:0px; margin:0px;} div.slideBox ul.items li{ float:left; background:none; list-style:none; padding:0px; margin:0px;} div.slideBox ul.items li a{ float:left; line-height:normal !important; padding:0px !important; border:none/*For IE.ADD.JENA.201206300844*/;} div.slideBox ul.items li a img{ margin:0px !important; padding:0px !important; display:block; border:none/*For IE.ADD.JENA.201206300844*/;} div.slideBox div.tips{ position:absolute; bottom:0px; width:100%; height:50px; background-color:#000; overflow:hidden;} div.slideBox div.tips div.title{ position:absolute; left:0px; top:0px; height:100%;} div.slideBox div.tips div.title a{ color:#FFF; font-size:18px; line-height:50px; margin-left:10px; text-decoration:none;} div.slideBox div.tips div.title a:hover{ text-decoration:underline !important;} div.slideBox div.tips div.nums{ position:absolute; right:0px; top:0px; height:100%;} div.slideBox div.tips div.nums a{ display:inline-block; >float:left/*For IE.ADD.JENA.201206300844*/; width:20px; height:20px; background-color:#FFF; text-indent:-99999px; margin:15px 10px 0px 0px;} div.slideBox div.tips div.nums a.active{ background-color:#093;} |
6. [代码]jquery.slideBox.js
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | /* * jQuery图片轮播(焦点图)插件 * ADD.JENA.201206291027 * EDIT.JENA.201206300904 * EDIT.JENA.201207051027 * EDIT.JENA.201208090849 * EDIT.JENA.201501231440 * Version: 2.2.1440 * Author: jena * Demo: http://ishere.cn/demo/jquery.slidebox/ */ (function($) { $.fn.slideBox = function(options) { //默认参数 var defaults = { direction : 'left',//left,top duration : 0.6,//unit:seconds easing : 'swing',//swing,linear delay : 3,//unit:seconds startIndex : 0, hideClickBar : true, clickBarRadius : 5,//unit:px hideBottomBar : false }; var settings = $.extend(defaults, options || {}); //计算相关数据 var wrapper = $(this), ul = wrapper.children('ul.items'), lis = ul.find('li'), firstPic = lis.first().find('img'); var li_num = lis.size(), li_height = 0, li_width = 0; //初始化 var init = function(){ if(!wrapper.size()) return false; wrapper.data('over', 0); li_height = lis.first().height(); li_width = lis.first().width(); wrapper.css({width: li_width+'px', height:li_height+'px'}); lis.css({width: li_width+'px', height:li_height+'px'});//ADD.JENA.201207051027 ul.append(ul.find('li:first').clone()); li_num += 1; if (settings.direction == 'left') { ul.css('width', li_num * li_width + 'px'); } else { ul.css('height', li_num * li_height + 'px'); } ul.find('li:eq('+settings.startIndex+')').addClass('active'); if(!settings.hideBottomBar){//ADD.JENA.201208090859 var tips = $('<div class="tips"></div>').css('opacity', 0.6).appendTo(wrapper); var title = $('<div class="title"></div>').html(function(){ var active = ul.find('li.active').find('a'), text = active.attr('title'), href = active.attr('href'); return $('<a>').attr('href', href).text(text); }).appendTo(tips); var nums = $('<div class="nums"></div>').hide().appendTo(tips); lis.each(function(i, n) { var a = $(n).find('a'), text = a.attr('title'), href = a.attr('href'), css = ''; i == settings.startIndex && (css = 'active'); $('<a>').attr('href', href).text(text).addClass(css).css('borderRadius', settings.clickBarRadius+'px').mouseover(function(){ wrapper.data('over', 1); $(this).addClass('active').siblings().removeClass('active'); ul.find('li:eq('+$(this).index()+')').addClass('active').siblings().removeClass('active'); start(); }).appendTo(nums); }); if(settings.hideClickBar){//ADD.JENA.201206300847 tips.hover(function(){ nums.animate({top: '0px'}, 'fast'); }, function(){ nums.animate({top: tips.height()+'px'}, 'fast'); }); nums.show().delay(2000).animate({top: tips.height()+'px'}, 'fast'); }else{ nums.show(); } } lis.size()>1 && start(); }; //开始轮播 var start = function() { var active = ul.find('li.active'), active_a = active.find('a'); var index = active.index(); if(settings.direction == 'left'){ offset = index * li_width * -1; param = {'left':offset + 'px' }; }else{ offset = index * li_height * -1; param = {'top':offset + 'px' }; } wrapper.find('.nums').find('a:eq('+index+')').addClass('active').siblings().removeClass('active'); wrapper.find('.title').find('a').attr('href', active_a.attr('href')).text(active_a.attr('title')); // EDIT.JENA.20150123 ul.stop().animate(param, settings.duration*1000, settings.easing, function() { active.removeClass('active'); if(active.next().size()==0){ ul.css({top:0, left:0}).find('li:eq(1)').addClass('active'); wrapper.find('.nums').find('a:first').addClass('active').siblings().removeClass('active'); }else{ active.next().addClass('active'); } wrapper.data('over')==0 && wrapper.data('timeid', window.setTimeout(start, settings.delay*1000)); }); }; //停止轮播 var stop = function() { window.clearTimeout(wrapper.data('timeid')); }; //鼠标经过事件 wrapper.hover(function(){ wrapper.data('over', 1); stop(); }, function(){ wrapper.data('over', 0); start(); }); //首张图片加载完毕后执行初始化 var imgLoader = new Image(); imgLoader.onload = function(){ imgLoader.onload = null; init(); }; imgLoader.src = firstPic.attr('src'); }; })(jQuery); |
7. [代码]index.html
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery图片轮播(焦点图)插件</title> <link href="css/jquery.slideBox.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="js/jquery.slideBox.js" type="text/javascript"></script> <script> jQuery(function($){ $('#demo1').slideBox(); $('#demo2').slideBox({ direction : 'top',//left,top#方向 duration : 0.3,//滚动持续时间，单位：秒 easing : 'linear',//swing,linear//滚动特效 delay : 5,//滚动延迟时间，单位：秒 startIndex : 1//初始焦点顺序 }); $('#demo3').slideBox({ duration : 0.3,//滚动持续时间，单位：秒 easing : 'linear',//swing,linear//滚动特效 delay : 5,//滚动延迟时间，单位：秒 hideClickBar : false,//不自动隐藏点选按键 clickBarRadius : 10 }); }); </script> </head> <body> <h3>一、左右轮播，滚动持续0.6秒，滚动延迟3秒，滚动效果swing，初始焦点第1张，点选按键自动隐藏，按键边框半径（IE8-不支持）5px（以上各项为默认设置值）</h3> <div id="demo1" class="slideBox"> <ul class="items"> <li><a href="go/to/your/url.html" title="这里是测试标题一"><img src="img/1.jpg"></a></li> <li><a href="go/to/your/url.html" title="这里是测试标题二"><img src="img/2.jpg"></a></li> <li><a href="go/to/your/url.html" title="这里是测试标题三"><img src="img/3.jpg"></a></li> <li><a href="go/to/your/url.html" title="这里是测试标题四"><img src="img/4.jpg"></a></li> <li><a href="go/to/your/url.html" title="这里是测试标题五"><img src="img/5.jpg"></a></li> </ul> </div> <h3>二、上下轮播，滚动持续0.3秒，滚动延迟5秒，滚动效果linear，初始焦点第2张，点选按键自动隐藏</h3> <div id="demo2" class="slideBox"> <ul class="items"> <li><a href="go/to/your/url.html" title="这里是测试标题一"><img src="img/1.jpg"></a></li> <li><a href="go/to/your/url.html" title="这里是测试标题二"><img src="img/2.jpg"></a></li> <li><a href="go/to/your/url.html" title="这里是测试标题三"><img src="img/3.jpg"></a></li> <li><a href="go/to/your/url.html" title="这里是测试标题四"><img src="img/4.jpg"></a></li> <li><a href="go/to/your/url.html" title="这里是测试标题五"><img src="img/5.jpg"></a></li> </ul> </div> <h3>三、左右轮播，滚动持续0.3秒，滚动延迟5秒，滚动效果linear，初始焦点第1张，点选按键不隐藏，按键边框半径10px（圆形）</h3> <div id="demo3" class="slideBox"> <ul class="items"> <li><a href="go/to/your/url.html" title="这里是测试标题一"><img src="img/1.jpg"></a></li> <li><a href="go/to/your/url.html" title="这里是测试标题二"><img src="img/2.jpg"></a></li> <li><a href="go/to/your/url.html" title="这里是测试标题三"><img src="img/3.jpg"></a></li> <li><a href="go/to/your/url.html" title="这里是测试标题四"><img src="img/4.jpg"></a></li> <li><a href="go/to/your/url.html" title="这里是测试标题五"><img src="img/5.jpg"></a></li> </ul> </div> <h4>爱我的老婆孩子！献给香港回归祖国15周年，哈哈！！</h4> </body> </html> |
8. [文件] jquery.slideBox.zip ~ 719KB 下载(506)
总结
以上是生活随笔为你收集整理的jQuery图片轮播(焦点图)插件(转载）的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： CentOS系统提示用户名不在sudoe
- 下一篇： Hadoop RPC protocol