汇图网大屏jQuery焦点图代码轮播滚动切换特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是汇图网大屏jQuery焦点图代码轮播滚动切换特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

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 rel="stylesheet" href="css/zzsc.css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/HTSlider.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="indexSlider" class="pr indexSlider">
  <div class="HTSlider-imgbox">
    <ul>
      <li class="fl HTSlider-imgitem">
      	<a href="#" target="_blank"><img islazyshow="true" class="lazy" url="#" data-original="images/1.jpg" src="images/ffflazy.jpg" imgdescribe="标题 内容" smallsrc="images/s1.jpg"/></a>
      </li>
      <li class="fl HTSlider-imgitem">
      	<a href="#" target="_blank"><img islazyshow="true" class="lazy" url="#" data-original="images/2.jpg" src="images/ffflazy.jpg" imgdescribe="圣诞快乐" smallsrc="images/s2.jpg"/></a>
      </li>
      <li class="fl HTSlider-imgitem">
      	<a href="#" target="_blank"><img islazyshow="true" class="lazy" url="#" data-original="images/3.jpg" src="images/ffflazy.jpg" imgdescribe="VI设计模板" smallsrc="images/s3.jpg"/></a>
        </li>
      <li class="fl HTSlider-imgitem">
      	<a href="#" target="_blank"><img islazyshow="true" class="lazy" url="#" data-original="images/4.jpg" src="images/ffflazy.jpg" imgdescribe="城市夜景" smallsrc="images/s4.jpg"/></a>
      </li>
      <li class="fl HTSlider-imgitem">
      	<a href="#" target="_blank"><img islazyshow="true" class="lazy" url="#" data-original="images/5.jpg" src="images/ffflazy.jpg" imgdescribe="标题" smallsrc="images/s5.jpg"/></a>
      </li>
    </ul>
  </div>
  <div class="pa HTSlider-tab">
    <div class="pr HTSlider-tab-inner">
      <div class="pa HTSlider-tab-nav"></div>
    </div>
  </div>
</div>
</body>
</html>

JS代码(index.js):

$(function (){
	var indexSlider = $("#indexSlider").slideJ({
	speed:400,time:5000,autoplay:true,playtype:"opacity",triggerevent:"click",ishasimgtab:true,isloop:true}
);
}
);

CSS代码(zzsc.css):

/*CSS reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0}
.tl{text-align:left}
.tc{text-align:center}
.tr{text-align:right}
.bc{margin-left:auto;margin-right:auto;}
.fl{float:left;display:inline}
.fr{float:right;display:inline}
.cb{clear:both}
.cl{clear:left}
.cr{clear:right}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
* html .clearfix{height:1%}
.clearfix{display:block}
.vm{vertical-align:middle}
.pr{position:relative}
.pa{position:absolute}
.zoom{zoom:1}
.hidden{visibility:hidden}
.none{display:none}
a{outline:none;}
.z0{z-index:0}
.z1{z-index:1}
.z2{z-index:2}
/*焦点图主体*/
.indexSlider{width:1180px;height:440px;margin:50px auto;background:url("http://skin.huitu.com/images/indexV2/htlazyV2.gif") no-repeat scroll center center #faf9f8}
.indexSlider .HTSlider-imgitem,.indexSlider .HTSlider-imgitem img{width:1180px;height:440px;overflow:hidden;}
.indexSlider .HTSlider-imgbox{width:1180px;height:440px;overflow:hidden;position:relative;}
.indexSlider .HTSlider-tab,.indexSlider .HTSlider-tab-inner,.indexSlider .HTSlider-tab-block{width:1180px;height:40px;}
.indexSlider .HTSlider-tab-navitem{width:34px;height:40px;cursor:pointer;text-align:left;float:left;display:inline;margin-right:5px;}
.indexSlider .HTSlider-tab-navitem img{width:34px;height:34px;margin:3px 0 0 0;border-radius:34px;}
.indexSlider .HTSlider-tab-navitem a{display:none;font-weight:normal;color:#ffffff;height:34px;line-height:34px;}
.indexSlider .HTSlider-tab-navon{z-index:2;width:220px;background:rgba(0,0,0,0.7) none repeat scroll !important;background:#000;filter:Alpha(opacity=70);color:#ffffff;border-radius:40px;height:40px;}
.indexSlider .HTSlider-tab-navon img{float:left;display:inline;margin:3px 0 0 3px;position:relative;}
.indexSlider .HTSlider-tab-navon a{float:left;display:inline;height:40px;line-height:40px;font-size:12px;margin-left:8px;font-family:微软雅黑;position:relative;color:#fff;text-decoration:none}
.indexSlider .HTSlider-tab-navon a:hover{text-decoration:underline}
.indexSlider .HTSlider-tab-navon1{text-align:right}
.indexSlider .HTSlider-tab-navon1 a{float:right;margin-right:8px}
.indexSlider .HTSlider-tab-navon1 img{margin:3px 3px 0 0;float:right;}
.indexSlider .HTSlider-tab-navon .b1{float:left;display:inline}
.indexSlider .HTSlider-tab{left:0px;bottom:0px;}
.indexSlider .HTSlider-tab-nav{top:-20px;height:40px;z-index:2;}
.indexSlider .HTSlider-btnleft{width:80px;height:30px;background:#000000;cursor:pointer;top:0;left:-80px;color:#ffffff;text-align:center;line-height:30px;}
.indexSlider .HTSlider-btnright{width:80px;height:30px;background:#000000;cursor:pointer;top:0;right:-80px;color:#ffffff;text-align:center;line-height:30px;}
.indexSlider .HTSlider-imglist{left:0px;top:0px;height:440px;width:10000px;}

附件:下载该文件资源,减少时间成本(增值服务)