快快游戏网jQ左右轮播焦点图特效代码

版权:原创 更新时间:1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 快快游戏网jQ左右轮播焦点图特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:

部分效果截图:

快快游戏网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="#">进入详情页&gt;</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="#">进入详情页&gt;</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="#">进入详情页&gt;</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="#">进入详情页&gt;</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="#">进入详情页&gt;</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="#">进入详情页&gt;</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;}
附件:下载该文件资源,减少时间成本(增值服务)
留言
该资源可下载
File Source
.rar
409.37 KB
Html Js 图片切换触摸3
最新结算
股权转让协议意向书模板
类型: .docx 金额: CNY 2.23¥ 状态: 待结算 详细>
股权转让协议意向书模板
类型: .docx 金额: CNY 0.28¥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 2.39¥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 0.3¥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23¥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28¥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23¥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28¥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害,或使用了您的版权,请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
联系我们
  • QQ:21499807
  • 邮箱:sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章