以下是 天空下载站jQuery焦点图轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>天空下载站jQuery焦点图</title>
<link rel="stylesheet" type="text/css" href="css/zzsc.css" />
</head>
<body>
<br>
<div class="idx-focus" id="j_idx_focus" monkey="idxfocus">
<div class="idx-foc-tmp">
<ul class="focus-pic" rel="xtaberItems">
<li class="xtaber-item">
<a href="#" class="white" target="_blank" title="传奇经典热血战纪">
<img src="images/20131107112540527b08344b08c.jpg" alt="传奇经典热血战纪">
<span class="txt">传奇经典热血战纪</span> <i class="bg"></i></a></li>
<li class="xtaber-item">
<a href="#" class="white" target="_blank" title="百度输入法">
<img src="images/20131108165940527ca7fc97ed8.jpg" alt="百度输入法">
<span class="txt">百度输入法</span> <i class="bg"></i></a></li>
<li class="xtaber-item">
<a href="#" class="white" target="_blank" title="爱帆浏览器">
<img src="images/2013111114355452807acaf1c6d.jpg" alt="爱帆浏览器">
<span class="txt">爱帆浏览器</span> <i class="bg"></i></a></li>
<li class="xtaber-item">
<a href="#" class="white" target="_blank" title="PPS影音">
<img src="images/20131113182710528353fe29fb5.png" alt="PPS影音">
<span class="txt">PPS影音</span> <i class="bg"></i></a></li>
<li class="xtaber-item">
<a href="#" class="white" target="_blank" title="百度杀毒">
<img src="images/2013111111234552804dc1e23aa.jpg" alt="百度杀毒">
<span class="txt">百度杀毒</span> <i class="bg"></i></a></li>
<li class="xtaber-item">
<a href="#" class="white" target="_blank" title="快播">
<img src="images/20131028111313526dd6497f10a.jpg" alt="快播">
<span class="txt">快播</span> <i class="bg"></i></a></li>
</ul>
</div>
<ul rel="xtaberTabs" class="xtaber-tabs">
<li rel="xtaberTabItem" class="current">
<a href="javascript:void(0);" title="传奇经典热血战纪">
<img src="images/s_90_54_20131107112540527b08344b08c.jpg" alt="传奇经典热血战纪"></a><i></i></li>
<li rel="xtaberTabItem"><a href="javascript:void(0);" title="百度输入法">
<img src="images/s_90_54_20131108165940527ca7fc97ed8.jpg" alt="百度输入法"></a><i></i></li>
<li rel="xtaberTabItem"><a href="javascript:void(0);" title="爱帆浏览器">
<img src="images/s_90_54_2013111114355452807acaf1c6d.jpg" alt="爱帆浏览器"></a><i></i></li>
<li rel="xtaberTabItem"><a href="javascript:void(0);" title="PPS影音">
<img src="images/s_90_54_20131113182710528353fe29fb5.png" alt="PPS影音"></a><i></i></li>
<li rel="xtaberTabItem"><a href="javascript:void(0);" title="百度杀毒">
<img src="images/s_90_54_2013111111234552804dc1e23aa.jpg" alt="百度杀毒"></a><i></i></li>
<li rel="xtaberTabItem"><a href="javascript:void(0);" title="快播">
<img src="images/s_90_54_20131028111313526dd6497f10a.jpg" alt="快播"></a><i></i></li>
</ul>
<a href="javascript:;" class="btn-prev"></a>
<a href="javascript:;" class="btn-next"></a>
</div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.taber.js"></script>
</body>
</html>JS代码(jquery.taber.js):
/** * [ xTaber 切换 ] * @param{
[type]}
$ [description] * @return{
[type]}
[description] */
(function($){
$.fn.extend({
xTaber:function(opt){
var def = $.extend({
/* @tab 触发事件标签 [true|false|obj] * true 自动生成带数字的标签 * false 不显示tab * obj 自定义tab */
tab:true,//默认为自动生成 content:$('#xtaberWrap'),prev:null,//上一个按钮 next:null,//下一个按钮 /* @style 滚动的样式 [opacity|left|top|none] * opacity 淡出淡入 * left 向左 * top 向上 * none 无效果 */
style:'opacity',//默认为opacity activeClass:'current',//当前样式 delay:100,//操作延时 speed:300,//移动速度 timeout:3000,//间歇时间 auto:false,//是否自动滚动 setup:1,//每次滚动多少个 defaultShow:1,//默认显示第n个 mouseEvent:'mouseover',//鼠标事件 tabedCallback:null //切换后的回调函数}
,opt);
if(typeof def.setup != Number && def.setup < 1) def.setup = 1;
// 内部通用变量 var self = def.content,content = self.find('[rel="xtaberItems"]'),subItem = content.find('.xtaber-item'),itemLength = subItem.length,subItemHeight = parseInt(subItem.height())+ parseInt(subItem.css('marginTop'))+ parseInt(subItem.css('marginBottom'))+ parseInt(subItem.css('paddingTop'))+ parseInt(subItem.css('paddingBottom')),subItemWidth = parseInt(subItem.width())+ parseInt(subItem.css('marginLeft'))+ parseInt(subItem.css('marginRight'))+ parseInt(subItem.css('paddingLeft'))+ parseInt(subItem.css('paddingRight')),scrollHeight = subItemHeight * def.setup,scrollWidth = subItemWidth * def.setup,screenNum,current = 0,autoTimer,itemTimer,tabItem = null;
//滚动屏数 if(def.setup == 1){
screenNum = itemLength;
}
else{
var inAll = (itemLength % def.setup),num = parseInt(itemLength / def.setup);
screenNum = (inAll > 0) ? (num+1):num;
}
var init = function(){
// 自动生成tab if(def.tab && typeof def.tab != 'object'){
var tabHTML = '<ol rel="xtaberTabs" class="xtaber-tabs">';
for(var i=1;
i<=screenNum;
i++){
tabHTML += '<li rel="xtaberTabItem">'+i+'</li>';
}
tabHTML += '</ol>';
self.append(tabHTML);
def.tab = self.find('[rel="xtaberTabs"]');
}
else if(typeof def.tab == 'object'){
def.tab = self.find('[rel="xtaberTabs"]');
}
else{
def.tab = null;
}
if(def.tab != null){
tabItem = def.tab.find('[rel="xtaberTabItem"]');
}
if(typeof def.next == 'boolean' && def.next){
def.next = $('<span rel="xtaberNext">next</span>');
def.next.appendTo(self);
}
if(typeof def.prev == 'boolean' && def.prev){
def.prev = $('<span rel="xtaberPrev">prev</span>');
def.prev.appendTo(self);
}
switch(def.style){
case 'left':setParent('left');
break;
case 'top':setParent('top');
break;
}
goTo(def.defaultShow - 1);
bindEvent();
if(def.auto){
auto();
}
}
//设置父级的样式 var setParent = function(type){
var wrapHeight,wrapWidht,contentWidth,contentHeight;
if(type == 'top'){
contentHeight = subItemHeight * itemLength;
contentWidth = subItemWidth;
}
else if(type == 'left'){
contentHeight = subItemHeight;
contentWidth = subItemWidth * itemLength;
}
//alert(typeof(subItemWidth));
content.css({
left:0,top:0,position:'absolute',width:contentWidth,height:contentHeight}
);
}
var goTo = function(index){
clearInterval(autoTimer);
clearTimeout(itemTimer);
current = index;
switch(def.style){
case 'top':content.stop().animate({
'top':-(index * scrollHeight)}
,def.speed);
break;
case 'left':content.stop().animate({
'left':-(index * scrollWidth)}
,def.speed);
break;
case 'opacity':subItem.eq(index).fadeIn().siblings().hide();
break;
default:subItem.eq(index).show().siblings().hide();
break;
}
if(def.tab != null){
tabItem.eq(index).addClass(def.activeClass).siblings().removeClass(def.activeClass);
}
if(def.auto){
auto()}
;
if(def.tabedCallback){
tabedCallback();
}
}
var auto = function(){
if(def.auto){
clearInterval(autoTimer);
autoTimer = setInterval(function(){
if(current + 1 >= screenNum){
goTo(0);
}
else{
goTo(current + 1);
}
}
,def.timeout);
}
}
//绑定事件 var bindEvent = function(){
if(def.tab != null){
tabItem.each(function(){
var el = $(this);
el.bind(def.mouseEvent,function(){
clearInterval(autoTimer);
clearTimeout(itemTimer);
itemTimer = setTimeout(function(){
goTo(el.index());
}
,def.delay);
}
);
el.bind('mouseleave',function(){
clearTimeout(itemTimer);
auto();
}
);
}
);
}
if(def.next){
def.next.click(function(){
var currentNum = (current + 1 >= screenNum) ? 0:current + 1;
goTo(currentNum);
}
);
}
if(def.prev){
def.prev.click(function(){
var currentNum = (current - 1 < 0) ? screenNum - 1:current - 1;
goTo(currentNum);
}
);
}
}
init();
}
}
);
}
)(jQuery);
var isNeeded = function(selectors){
var selectors = (typeof selectors == 'string') ? [selectors]:selectors,isNeeded;
for(var i=0;
i<selectors.length;
i++){
var selector = selectors[i];
if( $(selector).length > 0 ){
isNeeded = true;
break;
}
}
;
return isNeeded;
}
;
$(function(){
/* 首页焦点图 */
if(isNeeded('#j_idx_focus')){
var obj = $('#j_idx_focus');
$.fn.xTaber({
content:obj,tab:obj,auto:true,style:'left',prev:obj.find('.btn-prev'),next:obj.find('.btn-next')}
);
}
}
);
CSS代码(zzsc.css):
/*css reset*/
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5 tahoma,Arial;width:570px;margin:0 auto;}
ul,ol{list-style:none;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;vertical-align:top;}
button,input,select,textarea{font-size:100%;}
button{cursor:pointer;}
table{border-collapse:collapse;border-spacing:0;}
form{display:inline;}
input,textarea{outline:none;}
i{font-style:normal;}
u,i,s,em{text-decoration:none;font-weight:normal;font-style:normal;}
html{background:#f6f5fa;}
/*common*/
.green{color:#3d7e12;}
.white{color:#fff;}
a{text-decoration:none;color:#333;outline:0;}
a:hover{text-decoration:underline;color:#52b9fb;}
.fl{float:left;}
.fr{float:right;}
.idx-focus .xtaber-tabs .current i,.tab-style-1 .current i,.autocomplete-container .isnew-1{background-image:url(img/icon.png);background-repeat:no-repeat;}
/* ����ͼ */
.idx-focus{float:left;}
.idx-focus,.focus-pic li{width:560px;height:290px;position:relative;overflow:hidden;}
.idx-foc-tmp{height:230px;}
.focus-pic{height:230px;}
.focus-pic li{float:left;height:230px;}
.focus-pic li img{width:560px;height:230px;}
.focus-pic .bg{height:30px;width:100%;position:absolute;left:0;bottom:0;background:#000;opacity:.6;filter:Alpha(opacity=60);z-index:1;}
.focus-pic .txt{height:30px;position:absolute;width:100%;line-height:30px;text-indent:10px;overflow:hidden;z-index:2;left:0;bottom:0;}
.idx-focus .xtaber-tabs{height:60px;background:#565656;}
.idx-focus .xtaber-tabs li{float:left;padding:3px;margin-right:-3px;position:relative;cursor:pointer;z-index:3;}
.idx-focus .xtaber-tabs img{width:90px;height:54px;}
.idx-focus .xtaber-tabs .current{background:#2ba4d7;}
.idx-focus .xtaber-tabs .current i{width:7px;height:4px;position:absolute;left:50%;margin-left:-3px;top:-4px;overflow:hidden;background-position:-46px -28px;}
.idx-focus .btn-prev,.idx-focus .btn-next{background:url(img/foc_btn.png) no-repeat;_background:url(img/foc_btn_8.png) no-repeat;width:31px;height:50px;position:absolute;z-index:4;top:85px;_filter:Alpha(opacity=70);}
.idx-focus .btn-prev{background-position:0 0;left:10px;}
.idx-focus .btn-next{background-position:-33px 0;right:10px;}
分享到QQ
分享到微博
微信扫一扫
