以下是 快快游戏网jQ左右轮播焦点图特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>快快游戏网jQuery左右轮播焦点图</title>
<link href="css/zzsc.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js"></script>
<script src="js/SuperSlide.js"></script>
</head>
<body>
<div id="index_banner">
<div class="burder">
<div id="slideBox" class="slideBox">
<div class="bd">
<ul>
<li> <a target="_blank" href="#"><img src="images/1.jpg" /></a>
<div class="burder_content"> <span class="burder_content_type">小编推荐</span> <a target="_blank" href="#" class="burder_content_title">梦想微评测新年特别节目《梦想之最年度评选》-最剧情</a>
<p class="burder_content_content">各位玩家们新年好。梦想微评测新春特别节目《梦想之最年度评选》,在近期就将发布第一集了。敬请各位玩家朋友们期待!</p>
<a class="burder_content_lookall" target="_blank" href="#">进入详情页></a> </div>
</li>
<li> <a target="_blank" href="#"><img src="images/2.jpg" /></a>
<div class="burder_content"> <span class="burder_content_type">游戏春晚</span> <a target="_blank" href="#" class="burder_content_title">2014游戏地域春晚 众神云集 超级福利大餐!</a>
<p class="burder_content_content">由游戏地域工作室制作的“2014游戏地域春晚”节目单近日正式发布。与往年不同,除了传统的游戏节目之外,本次晚会更是首推payday2游戏短剧,又有各类大牌登场亮相,不可谓不精彩。</p>
<a class="burder_content_lookall" target="_blank" href="#">进入详情页></a> </div>
</li>
<li> <a target="_blank" href="#"><img src="images/3.jpg" /></a>
<div class="burder_content"> <span class="burder_content_type">资源下载</span> <a target="_blank" href="#" class="burder_content_title">最后一波</a>
<p class="burder_content_content">Strike Games制作发行的一款第一人称射击防御游戏,游戏中玩家需要击退一波波的敌人,从而升级武器,取得胜利。</p>
<a class="burder_content_lookall" target="_blank" href="#">进入详情页></a> </div>
</li>
<li> <a target="_blank" href="#"><img src="images/4.jpg" /></a>
<div class="burder_content"> <span class="burder_content_type">资源下载</span> <a target="_blank" href="#" class="burder_content_title">星球探险家</a>
<p class="burder_content_content">游戏可以在第三和第一视觉间转换。玩家可以定制自己的角色,组合、创作武器、载具和建筑。同时,玩家必须对抗大量不同智慧程度的敌人并保护幸存的殖民者们。游戏里还会有任务系统,玩家达成npc给予的任务来推动剧情发展;此外游戏还有多人游戏模式,让玩家们可以联机一起历险和搭建。</p>
<a class="burder_content_lookall" target="_blank" href="#">进入详情页></a> </div>
</li>
<li> <a target="_blank" href="#"><img src="images/5.jpg" /></a>
<div class="burder_content"> <span class="burder_content_type">小编推荐</span> <a target="_blank" href="#" class="burder_content_title">汽车修理工模拟2014</a>
<p class="burder_content_content">《汽车修理工模拟2014》是一款汽车修理工模拟类游戏。在游戏中玩家要扮演一个新人修理工,在汽车修理厂修改大大小小各式车辆,并在修理完之后进行试驾。</p>
<a class="burder_content_lookall" target="_blank" href="#">进入详情页></a> </div>
</li>
<li> <a target="_blank" href="#"><img src="images/6.jpg" /></a>
<div class="burder_content"> <span class="burder_content_type">小编推荐</span> <a target="_blank" href="#" class="burder_content_title">击打节奏</a>
<p class="burder_content_content">由Zen Studio制作的音乐战斗游戏《击打节奏》(KickBeat)已登录PC的Steam平台。玩家通过与背景音乐节奏的合拍来完成一系列的武术动作,同时一系列自定义的连招也成为了可能。游戏将包括一系列授权音乐,知名的乐手有Rob Zombie, Marilyn Manson,当然玩家也可以导入自己电脑上的曲目。</p>
<a class="burder_content_lookall" target="_blank" href="#">进入详情页></a> </div>
</li>
</ul>
</div>
<div class="hd">
<ul>
<li><a href="#">梦想之最年度评选<img src="images/pmd_hover.gif"/></a></li>
<li><a href="#">2014游戏地域春晚<img src="images/pmd_hover.gif"/></a></li>
<li><a href="#">最后一波<img src="images/pmd_hover.gif" /></a></li>
<li><a href="#">星球探险家<img src="images/pmd_hover.gif" /></a></li>
<li><a href="#">汽车修理工模拟2014<img src="images/pmd_hover.gif" /></a></li>
<li style="border-right:1px solid #d5d5d5; width:163px;"><a href="#">击打节奏<img src="images/pmd_hover.gif" /></a></li>
</ul>
</div>
</div>
<script type="text/javascript">jQuery(".slideBox").slide({ mainCell:".bd ul",effect:"left",autoPlay:true} );</script>
</div>
</div>
</body>
</html>
JS代码(SuperSlide.js):
(function($){
$.fn.slide=function(options){
$.fn.slide.deflunt={
effect:"fade",//效果 || fade:渐显; || top:上滚动;|| left:左滚动;|| topLoop:上循环滚动;|| leftLoop:左循环滚动;|| topMarquee:上无缝循环滚动;|| leftMarquee:左无缝循环滚动;autoPlay:false,//自动运行delayTime:500,//效果持续时间interTime:2500,//自动运行间隔。当effect为无缝滚动的时候,相当于运行速度。defaultIndex:0,//默认的当前位置索引。0是第一个titCell:".hd li",//导航元素mainCell:".bd",//内容元素的父层对象trigger:"mouseover",//触发方式 || mouseover:鼠标移过触发;|| click:鼠标点击触发;scroll:1,//每次滚动个数。vis:1,//visible,可视范围个数,当内容个数少于可视个数的时候,不执行效果。titOnClassName:"on",//当前位置自动增加的class名称autoPage:false,//系统自动分页,当为true时,titCell则为导航元素父层对象,同时系统会在titCell里面自动插入分页li元素(1.2版本新增)prevCell:".prev",//前一个按钮元素。nextCell:".next"//后一个按钮元素。}
;
return this.each(function(){
var opts = $.extend({
}
,$.fn.slide.deflunt,options);
var index=opts.defaultIndex;
var prevBtn = $(opts.prevCell,$(this));
var nextBtn = $(opts.nextCell,$(this));
var navObj = $(opts.titCell,$(this));
//导航子元素结合var navObjSize = navObj.size();
var conBox = $(opts.mainCell,$(this));
//内容元素父层对象var conBoxSize=conBox.children().size();
var slideH=0;
var slideW=0;
var selfW=0;
var selfH=0;
var autoPlay = opts.autoPlay;
var inter=null;
//setInterval名称var oldIndex = index;
if(conBoxSize<opts.vis) return;
//当内容个数少于可视个数,不执行效果。//处理分页if( navObjSize==0 )navObjSize=conBoxSize;
if( opts.autoPage ){
var tempS = conBoxSize-opts.vis;
navObjSize=1+parseInt(tempS%opts.scroll!=0?(tempS/opts.scroll+1):(tempS/opts.scroll));
navObj.html("");
for( var i=0;
i<navObjSize;
i++ ){
navObj.append("<li>"+(i+1)+"</li>")}
var navObj = $("li",navObj);
//重置导航子元素对象}
conBox.children().each(function(){
//取最大值if( $(this).width()>selfW ){
selfW=$(this).width();
slideW=$(this).outerWidth(true);
}
if( $(this).height()>selfH ){
selfH=$(this).height();
slideH=$(this).outerHeight(true);
}
}
);
switch(opts.effect){
case "top":conBox.wrap('<div class="tempWrap" style="overflow:hidden;
position:relative;
height:'+opts.vis*slideH+'px"></div>').css({
"position":"relative","padding":"0","margin":"0"}
).children().css({
"height":selfH}
);
break;
case "left":conBox.wrap('<div class="tempWrap" style="overflow:hidden;
position:relative;
width:'+opts.vis*slideW+'px"></div>').css({
"width":conBoxSize*slideW,"position":"relative","overflow":"hidden","padding":"0","margin":"0"}
).children().css({
"float":"left","width":selfW}
);
break;
case "leftLoop":case "leftMarquee":conBox.children().clone().appendTo(conBox).clone().prependTo(conBox);
conBox.wrap('<div class="tempWrap" style="overflow:hidden;
position:relative;
width:'+opts.vis*slideW+'px"></div>').css({
"width":conBoxSize*slideW*3,"position":"relative","overflow":"hidden","padding":"0","margin":"0","left":-conBoxSize*slideW}
).children().css({
"float":"left","width":selfW}
);
break;
case "topLoop":case "topMarquee":conBox.children().clone().appendTo(conBox).clone().prependTo(conBox);
conBox.wrap('<div class="tempWrap" style="overflow:hidden;
position:relative;
height:'+opts.vis*slideH+'px"></div>').css({
"height":conBoxSize*slideH*3,"position":"relative","padding":"0","margin":"0","top":-conBoxSize*slideH}
).children().css({
"height":selfH}
);
break;
}
//效果函数var doPlay=function(){
switch(opts.effect){
case "fade":case "top":case "left":if ( index >= navObjSize){
index = 0;
}
else if( index < 0){
index = navObjSize-1;
}
break;
case "leftMarquee":case "topMarquee":if ( index>= 2){
index=1;
}
else if( index<0){
index = 0;
}
break;
case "leftLoop":case "topLoop":var tempNum = index - oldIndex;
if( navObjSize>2 && tempNum==-(navObjSize-1) ) tempNum=1;
if( navObjSize>2 && tempNum==(navObjSize-1) ) tempNum=-1;
var scrollNum = Math.abs( tempNum*opts.scroll );
if ( index >= navObjSize){
index = 0;
}
else if( index < 0){
index = navObjSize-1;
}
break;
}
switch (opts.effect){
case "fade":conBox.children().stop(true,true).eq(index).fadeIn(opts.delayTime).siblings().hide();
break;
case "top":conBox.stop(true,true).animate({
"top":-index*opts.scroll*slideH}
,opts.delayTime);
break;
case "left":conBox.stop(true,true).animate({
"left":-index*opts.scroll*slideW}
,opts.delayTime);
break;
case "leftLoop":if(tempNum<0 ){
conBox.stop(true,true).animate({
"left":-(conBoxSize-scrollNum )*slideW}
,opts.delayTime,function(){
for(var i=0;
i<scrollNum;
i++){
conBox.children().last().prependTo(conBox);
}
conBox.css("left",-conBoxSize*slideW);
}
);
}
else{
conBox.stop(true,true).animate({
"left":-( conBoxSize + scrollNum)*slideW}
,opts.delayTime,function(){
for(var i=0;
i<scrollNum;
i++){
conBox.children().first().appendTo(conBox);
}
conBox.css("left",-conBoxSize*slideW);
}
);
}
break;
// leftLoop endcase "topLoop":if(tempNum<0 ){
conBox.stop(true,true).animate({
"top":-(conBoxSize-scrollNum )*slideH}
,opts.delayTime,function(){
for(var i=0;
i<scrollNum;
i++){
conBox.children().last().prependTo(conBox);
}
conBox.css("top",-conBoxSize*slideH);
}
);
}
else{
conBox.stop(true,true).animate({
"top":-( conBoxSize + scrollNum)*slideH}
,opts.delayTime,function(){
for(var i=0;
i<scrollNum;
i++){
conBox.children().first().appendTo(conBox);
}
conBox.css("top",-conBoxSize*slideH);
}
);
}
break;
//topLoop endcase "leftMarquee":var tempLeft = conBox.css("left").replace("px","");
if(index==0 ){
conBox.animate({
"left":++tempLeft}
,0,function(){
if( conBox.css("left").replace("px","")>= 0){
for(var i=0;
i<conBoxSize;
i++){
conBox.children().last().prependTo(conBox);
}
conBox.css("left",-conBoxSize*slideW);
}
}
);
}
else{
conBox.animate({
"left":--tempLeft}
,0,function(){
if( conBox.css("left").replace("px","")<= -conBoxSize*slideW*2){
for(var i=0;
i<conBoxSize;
i++){
conBox.children().first().appendTo(conBox);
}
conBox.css("left",-conBoxSize*slideW);
}
}
);
}
break;
// leftMarquee endcase "topMarquee":var tempTop = conBox.css("top").replace("px","");
if(index==0 ){
conBox.animate({
"top":++tempTop}
,0,function(){
if( conBox.css("top").replace("px","") >= 0){
for(var i=0;
i<conBoxSize;
i++){
conBox.children().last().prependTo(conBox);
}
conBox.css("top",-conBoxSize*slideH);
}
}
);
}
else{
conBox.animate({
"top":--tempTop}
,0,function(){
if( conBox.css("top").replace("px","")<= -conBoxSize*slideH*2){
for(var i=0;
i<conBoxSize;
i++){
conBox.children().first().appendTo(conBox);
}
conBox.css("top",-conBoxSize*slideH);
}
}
);
}
break;
// topMarquee end}
//switch endnavObj.removeClass(opts.titOnClassName).eq(index).addClass(opts.titOnClassName);
oldIndex=index;
}
;
//初始化执行doPlay();
//自动播放if (autoPlay){
if( opts.effect=="leftMarquee" || opts.effect=="topMarquee" ){
index++;
inter = setInterval(doPlay,opts.interTime);
conBox.hover(function(){
if(autoPlay){
clearInterval(inter);
}
}
,function(){
if(autoPlay){
clearInterval(inter);
inter = setInterval(doPlay,opts.interTime);
}
}
);
}
else{
inter=setInterval(function(){
index++;
doPlay()}
,opts.interTime);
$(this).hover(function(){
if(autoPlay){
clearInterval(inter);
}
}
,function(){
if(autoPlay){
clearInterval(inter);
inter=setInterval(function(){
index++;
doPlay()}
,opts.interTime);
}
}
);
}
}
//鼠标事件var mst;
if(opts.trigger=="mouseover"){
navObj.hover(function(){
clearTimeout(mst);
index=navObj.index(this);
mst = window.setTimeout(doPlay,200);
}
,function(){
if(!mst)clearTimeout(mst);
}
);
}
else{
navObj.click(function(){
index=navObj.index(this);
doPlay();
}
)}
nextBtn.click(function(){
index++;
doPlay();
}
);
prevBtn.click(function(){
index--;
doPlay();
}
);
}
);
//each End}
;
//slide End}
)(jQuery);
CSS代码(zzsc.css):
/*reset*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;font-family:"宋体";font-family:Verdana;font-weight:normal;}
:focus{outline:0;}
ol,ul{list-style:none;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
textarea{overflow:hidden;resize:none;}
.clear:after{content:".";height:0;visibility:hidden;display:block;clear:both;}
.clear{display:inline-block;}
/* Hlly Hack Targets IE Win only \*/
* html .clear{height:1%;}
.clear{display:block;}
/* End Holly Hack */
* html{filter:expression(document.execCommand("BackgroundImageCache",false,true));}
.word-ellipsis{overflow:hidden;text-overflow:ellipsis;word-wrap:normal;word-break:normal;white-space:nowrap;}
a:focus{-moz-outline-style:none;}
/* IE不支持 */
:focus{outline:none;}
/* for Firefox */
a:link{text-decoration:none;}
body{font-size:12px;line-height:150%;font-family:verdana,Arial,Helvetica,sans-serif,宋体;margin:0px;padding:0px;color:#888;background:#eee;}
a{color:#888;text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());}
a:hover{color:#FF5C00;text-decoration:none;}
/* banner */
#index_banner{margin:20px auto;width:990px;}
#index_banner .burder{width:990px;height:360px;float:left}
.slideBox{width:990px;height:360px;position:relative;*z-index:0;}
.slideBox .hd{height:30px;position:absolute;bottom:0px;}
.slideBox .hd ul{float:left;}
.slideBox .hd ul li{float:left;background-color:#fff;border-left:1px solid #d5d5d5;display:block;width:164px;height:30px;line-height:30px;}
.slideBox .hd ul li a{padding-left:5px;display:block;width:159px;_width:158px;height:30px;line-height:30px;position:relative;color:#666;font-family:"微软雅黑";}
.slideBox .hd ul li a img{display:none;position:absolute;top:-7px;left:0px;}
.slideBox .hd ul li.on{}
.slideBox .hd ul li.on a img{display:block;}
.slideBox .bd{position:relative;height:100%;z-index:0;}
.slideBox .bd ul li{position:relative;}
.slideBox .bd img{width:990px;height:330px;}
.burder_content{position:absolute;top:0;right:0px;height:300px;width:300px;padding-left:30px;padding-top:30px;background-color:#000;filter:alpha(opacity=85);-moz-opacity:0.85;-khtml-opacity:0.85;opacity:0.85;}
.burder_content .burder_content_type{float:left;display:block;font-size:14px;line-height:23px;text-align:center;height:23px;width:105px;font-weight:bold;color:#fff;background-color:#ff7800;}
.burder_content .burder_content_title{float:left;font-size:30px;line-height:35px;color:#fff;width:270px;font-weight:bold;margin-top:10px;cursor:pointer;font-family:"微软雅黑";font-weight:lighter;}
.burder_content .burder_content_title:hover{color:#ff5c00;}
.burder_content .burder_content_content{float:left;line-height:25px;color:#fff;font-size:12px;width:270px;margin-top:10px;}
.burder_content .burder_content_lookall{float:left;color:#ff5c00;font-weight:bold;margin-top:10px;_width:120px;}
.burder_content .burder_content_lookall:hover{text-decoration:underline;color:#ff5c00;}