hao123军事频道首页JQ焦点图轮播滚动切换特效代码

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

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

以下是 hao123军事频道首页JQ焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh_CN">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>hao123军事频道首页JQ焦点图</title>
<link rel="stylesheet" type="text/css" href="css/zzsc.css" />
</head>
<body>
<div id="bd">
	<div class="tab" id="focus_image">
		<div class="pages" data-scro="list">
			<a class="item cur" style="left:0;" target="_blank" href="#">
			<img class="poster" src="images/1.jpg" data-src="images/1.jpg" alt="日本或将在“除夕”对中国发动袭击" />
			<i>日本或将在“除夕”对中国发动袭击</i><b></b></a>
			<a class="item cur" target="_blank" href="#">
			<img class="poster" src="images/blank.gif" data-src="images/2.jpg" alt="中国潜艇与美军航母“武力对峙”28小时" />
			<i>中国潜艇与美军航母“武力对峙”28小时</i><b></b></a><a class="item cur" target="_blank" href="#">
			<img class="poster" src="images/blank.gif" data-src="images/3.jpg" alt="北京外交手段用尽：中日进入战争倒计时" />
			<i>北京外交手段用尽：中日进入战争倒计时</i><b></b></a><a class="item cur" target="_blank" href="#">
			<img class="poster" src="images/blank.gif" data-src="images/4.jpg" alt="中国“放任日菲嚣张”竟另有隐情" />
			<i>中国“放任日菲嚣张”竟另有隐情</i><b></b></a><a class="item cur" target="_blank" href="#">
			<img class="poster" src="images/blank.gif" data-src="images/5.jpg" alt="军方一直隐瞒的超级利器被曝光" />
			<i>军方一直隐瞒的超级利器被曝光</i><b></b></a><a class="item cur" target="_blank" href="#">
			<img class="poster" src="images/blank.gif" data-src="images/6.jpg" alt="美泄中国激光武器悚人秘密：日举国胆寒" />
			<i>美泄中国激光武器悚人秘密：日举国胆寒</i><b></b></a><a class="item cur" target="_blank" href="#">
			<img class="poster" src="images/blank.gif" data-src="images/7.jpg" alt="中国当年“放弃藏南”的惊天内幕" />
			<i>中国当年“放弃藏南”的惊天内幕</i><b></b></a><a class="item cur" target="_blank" href="#">
			<img class="poster" src="images/blank.gif" data-src="images/8.jpg" alt="白宫跪求中国不要抛售这两样武器" />
			<i>白宫跪求中国不要抛售这两样武器</i><b></b></a>
		</div>
		<div class="controler" data-scro="controler">
			<b class="down" title="2014年刚开始美国跟中国翻脸">1<i></i></b><b class title="外交部警告日本：中国已今非昔比">2<i></i></b>
			<b class title="揭秘英拉私生活很多第一次都给了中国">3<i></i></b><b class title="中国对日打三张牌：安倍必然垮台！">4<i></i></b>
			<b class title="主席吃包子我们忽略了十个有趣细节">5<i></i></b><b class title="一位老兵和两个越南女人的一夜">6<i></i></b>
			<b class title="普京对华干了件很不地道的事">7<i></i></b><b class title="曝光五位国家领导人性丑闻">8<i></i></b>
		</div>
		<div class="controler2" data-scro="controler2">
			<a href="javascript:;" class="prev"></a>
			<a href="javascript:;" class="next"></a>
		</div>
	</div>
</div>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
</body>
</html>

JS代码(zzsc.js):

!function(t){
	t("div[data-scro='controler'] b,div[data-scro='controler2'] a").click(function(){
	var a=t(this);
	return"down"==a.attr("class")?!1:(n.st({
	findObject:a,main:a.parent().parent().find("div[data-scro='list']"),pagSource:a.parent().parent().find("div[data-scro='controler'] b"),className:"down",duration:"slow",on:"A"==t(this)[0].tagName?!0:!1}
),!1)}
);
	var a="",e=!0,n={
	init:function(){
	this.start(),this.time()}
,st:function(t){
	e&&(this.animate(t.findObject,t.main,t.className,t.duration,t.pagSource,t.on),e=!1)}
,animate:function(a,i,o,r,s,c){
	var d=c?s.parent().find("*[class='"+o+"']"):a.parent().find(a[0].tagName+"[class='"+o+"']"),l=d.index(),u=c?"next"==a.attr("class")?l+1:l-1:a.index(),f=i.find(".item"),m=1;
	d.removeClass(o),c?(-1==u&&(u=f.size()-1),u==f.size()&&(u=0),s.eq(u).addClass(o)):a.addClass(o),("prev"==a.attr("class")||l>u)&&(m=!1),("next"==a.attr("class")||u>l)&&"prev"!=a.attr("class")&&(m=!0),m?"":f.eq(u).css("left",-i.width()),f.eq(l).animate({
	left:m?-i.width():i.width()}
,r,function(){
	t(this).removeAttr("style"),e=!0}
);
	var v=f.eq(u).find("img");
	n.eachimg(v),f.eq(u).animate({
	left:"0px"}
,r)}
,start:function(){
	t("#focus_image div[data-scro='controler'] b,#focus_image div[data-scro='controler2'] a").mouseover(function(){
	window.clearInterval(a)}
).mouseout(function(){
	n.time()}
)}
,time:function(){
	a=window.setInterval(function(){
	var a=t("#focus_image div[data-scro='controler'] *[class='down']").index(),e=t("#focus_image div[data-scro='list'] .item");
	e.eq(a).animate({
	left:-t("#focus_image div[data-scro='list']").width()}
,"slow",function(){
	t(this).removeAttr("style"),t("#focus_image div[data-scro='controler'] b").removeClass("down").eq(a).addClass("down")}
),a++,a==e.size()&&(a=0);
	var i=e.eq(a).find("img");
	n.eachimg(i),e.eq(a).animate({
	left:"0px"}
,"slow")}
,4e3)}
,eachimg:function(a){
	t.each(a,function(a,e){
	var e=t(e);
	e.attr("src")!=e.attr("data-src")&&void 0!=e.attr("data-src")&&e.attr("src",e.attr("data-src"))}
)}
}
;
	t("a").click(function(){
	t(this).blur()}
),n.init()}
(this.jQuery||this.baidu),function(t){
	t("div[log-type]").bind("mousedown",function(e){
	var n=t(this).attr("log-type"),i=t(this).attr("id"),e=e||window.event,o=e.srcElement||e.target;
	("A"==o.tagName.toUpperCase()&&n||"A"==o.parentNode.tagName.toUpperCase()&&n)&&a.send(n,i)}
);
	var a={
	send:function(t,a){
	var e="s_"+new Date/1,n=window[e]=new Image;
	n.onload=n.onerror=function(){
	window[e]=null}
,n.src="../images/track.gif?level=2&page=hao123-erji-junshi&id="+a+"&type=module-click&area="+encodeURIComponent(encodeURIComponent(t))+"&v="+new Date/1,n=null}
}
,e=t("#news").attr("resource");
	e&&a.send(e,"junshi")}
(this.jQuery),function(){
	var t=$("#redianpinglun .box"),a=t.size(),e=0;
	$("#change_btn").on("click",function(){
	e!=a-1?e++:e=0;
	var n=t.eq(e).find("img");
	t.hide().eq(e).fadeIn("fast"),n.attr("src",n.attr("data-src"))}
)}
(jQuery);

CSS代码(zzsc.css):

body{font:12px/1.5 arial,SimSun,helvetica,sans-serif;background:#FFF;color:#666}
div{margin:0;padding:0}
i{text-decoration:none;font-weight:400;font-style:normal}
#bd{width:360px;margin:10px auto 0;clear:both;}
img{border-width:0px 0px 0px 0px}
#focus_image{height:331px;position:relative;z-index:20;overflow:hidden;width:310px}
#focus_image .pages{width:310px;height:290px;background:#212121}
#focus_image .pages .item{position:absolute;left:310px;top:0;width:310px;height:290px;z-index:5;text-decoration:none}
#focus_image .pages .item.cur{display:block;z-index:10}
#focus_image .pages .item .poster{display:block;width:310px;height:290px}
#focus_image .pages .item b{background:#000;opacity:.8;filter:alpha(opacity=80);position:absolute;width:310px;height:40px;left:0;bottom:0;z-index:1;-moz-transition:opacity .2s ease-in;-webkit-transition:opacity .2s ease-in;-o-transition:opacity .2s ease-in;transition:opacity .2s ease-in;cursor:pointer}
#focus_image .pages .item:hover b{opacity:.4;filter:alpha(opacity=40)}
#focus_image .pages .item i{position:absolute;width:300px;padding:0 5px;height:40px;left:0;bottom:0;line-height:40px;font-size:14px;color:#fff;z-index:2;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;font-weight:600}
#focus_image .controler{display:block;width:310px;height:40px;line-height:40px;border-top:1px solid #121212;background:#212121;text-align:center;-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;user-select:none}
#focus_image .controler b{display:inline-block;width:20px;height:20px;margin:10px 4px;background:#FFF;cursor:pointer;line-height:20px;font-weight:700;color:#2B2B2B;position:relative}
#focus_image .controler b i{display:none}
#focus_image .controler b.down{background:#A91F01;color:#FFF}
#focus_image .controler b.down i{position:absolute;display:block;border:5px dashed transparent;border-bottom:5px solid #A91F01;top:-9px;left:5px;width:0;height:0;line-height:0}

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