本文轉自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图片轮播(焦点图)插件(转载）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。