輪播圖效果(js外掛)
阿新 • • 發佈：2019-02-03
- 輕量級外掛：slideBox
外掛下載地址 - 外掛原始碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>game1</title>
<link href="css/jquery.slideBox.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.min.js" type="text/javascript" 注意：
$.data()函式的運用
與
.stop().animate()中stop的作用
(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'));
// stop可以避免動畫的累積效果
ul.stop().animate(param, settings.duration*1000, settings.easing, function() {//calback
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);@charset "utf-8";
html, body { font-family:"微軟雅黑"}
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;}