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 href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery_003.js" type="text/javascript"></script>
<script src="js/jquery.js" language="javascript" type="text/javascript"></script>
<script src="js/gapp.js" type="text/javascript"></script>
<!--[if IE 6]>
<script src="js/ie6PNG.js" type="text/javascript"></script>
<script type="text/javascript">DD_belatedPNG.fix('*');</script>
<![endif]-->
</head>
<body>
<br>
<div class="newsIndex">
  <div class="column con">
    <div class="banner1">
      <div class=" jcarousel-skin-index">
        <div style="position: relative; display: block;" class="jcarousel-container jcarousel-container-horizontal">
          <div style="position: relative;" class="jcarousel-clip jcarousel-clip-horizontal">
            <ul style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: -530px; width: 2220px;" id="index-hero-carousel" class="jcarousel-list jcarousel-list-horizontal">
              <li jcarouselindex="1" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal"> <a href="#" target="_blank"><img src="images/t_17183850202.jpg" height="312" width="520"></a> </li>
              <li jcarouselindex="2" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal"> <a href="#" target="_blank"><img src="images/t_101815920.jpg" height="312" width="520"></a> </li>
              <li jcarouselindex="3" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal"> <a href="#" target="_blank"><img src="images/t_518235381.jpg" height="312" width="520"></a> </li>
              <li jcarouselindex="4" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal"> <a href="#" target="_blank"><img src="images/t_2183446679.jpg" height="312" width="520"></a> </li>
            </ul>
          </div>
        </div>
      </div>
      <ul id="index-hero-control" class="control-index-hero">
        <li class="" style="width: 37px;"> <a href="#" class="index-hero-number"> 1 </a> <a href="#" target="_blank">李萍华在重庆调研</a> </li>
        <li class="over" style="width: 405px;"> <a href="#" class="index-hero-number"> 2 </a> <a href="#" target="_blank">李长春新书《文化强国之路》在北京发布</a> </li>
        <li class="" style="width: 37px;"> <a href="#" class="index-hero-number"> 3 </a> <a href="#" target="_blank">王露露会见英国知识产权局局长约翰·奥...</a> </li>
        <li class="" style="width: 37px;"> <a href="#" class="index-hero-number"> 4 </a> <a href="#" target="_blank">王子健在宁夏宣讲党的十八届三中全会精...</a> </li>
      </ul>
    </div>
  </div>
  <div class="bot"></div>
</div>
</body>
</html>

JS代码(gapp.js):

eval(function(p,a,c,k,e,r){
	e=function(c){
	return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}
;
	if(!''.replace(/^/,String)){
	while(c--)r[e(c)]=k[c]||e(c);
	k=[function(e){
	return r[e]}
];
	e=function(){
	return'\\w+'}
;
	c=1}
;
	while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);
	return p}
('8 1G=1G||{
}
;
	(4($){
	$.1o.1p=4(){
	8 a=($(1q).11()-7.11())/2;
	8 b=($(1q).S()-7.S())/2;
	8 c=$(1r).24();
	8 d=$(1r).25();
	1H 7.12({
	26:\'27\',\'T\':a+c,U:b+d}
).H()}
;
	$.1o.1s=4(a){
	k(!a){
	a=7.V(\'1s\')}
8 b=7.1d().T;
	8 c=$(a).1d().T;
	7.11(c-b)}
;
	$.1o.1I=4(){
	7.12({
	"29-T":(7.M().11()-7.11())/2}
)}
}
)(2a);
	$(1r).2b(4(){
	$(\'.13\').1J(4(){
	8 c=$(7);
	c.n(\'N\',\'.C-W a\',4(a){
	a.j();
	8 b=$(7).1e(\'.C-W\').s(0).D(\'a\').z($(7));
	$(7).1e(\'.C-W\').s(0).D(\'a\').m(\'h\');
	c.D(\'.C-X\').m(\'1f\');
	$(7).o(\'h\');
	c.D(\'.C-X\').s(b).o(\'1f\')}
)}
);
	$(\'.Y-13\').1J(4(){
	8 c=$(7);
	c.n(\'N\',\'.Y-C-W a\',4(a){
	a.j();
	8 b=$(7).1e(\'.Y-C-W\').s(0).D(\'a\').z($(7));
	$(7).1e(\'.Y-C-W\').s(0).D(\'a\').m(\'h\');
	c.D(\'.Y-C-X\').m(\'1f\');
	$(7).o(\'h\');
	c.D(\'.Y-C-X\').s(b).o(\'1f\')}
)}
);
	$(\'.1K-2c\').n(\'l\',\'A a.1K-14\',4(a){
	a.j();
	$(7).M().D(\'.2d\').2e()}
);
	(4(){
	8 a=E;
	8 b=0;
	k($(\'.Z .x\')){
	$(\'#z .2f\').n(\'N\',\'.1L\',4(){
	a=1g;
	b=$(7).M().15().z($(7))-1;
	k(b<0){
	1H E}
$(\'.x .14\').F();
	$(\'.x .1M\').F();
	$(\'.x .14\').s(b).H();
	$(\'.x .1M\').s(b).H();
	1h(4(){
	k(a){
	$(\'.Z .x\').1t()}
}
,1N)}
).n(\'16\',\'.x,.1L\',4(){
	a=E;
	1h(4(){
	k(!a){
	$(\'.Z .x\').1u()}
}
,1O)}
);
	$(\'#z .Z\').n(\'N\',\'.x\',4(){
	a=1g;
	1h(4(){
	k(a){
	$(\'.Z .x\').1t()}
}
,1N)}
).n(\'16\',\'.x\',4(){
	a=E;
	1h(4(){
	k(!a){
	$(\'.Z .x\').1u()}
}
,1O)}
)}
}
)();
	$(\'.2g\').n(\'N\',\'a\',4(){
	$(\'.1P\').2h();
	$(\'<1Q 1R="1P"></1Q>\').2i($(7))}
);
	$(\'.1v\').p(\'l\',4(){
	8 a=$(\'.1S\');
	a.12({
	"U":$(\'.1v\').1d().U-2j,"T":($(\'.1v\').1d().T+28)+"2k"}
);
	a.H()}
);
	$(\'.2l\').p(\'l\',4(){
	$(\'.1S\').F()}
);
	$(\'#O-9\').r({
	w:1,I:t,J:t,K:4(b){
	$("#O-9-u").p(\'l\',4(a){
	a.j();
	b.u()}
);
	$("#O-9-v").p(\'l\',4(a){
	a.j();
	b.v()}
)}
,1T:4(a,b,c){
	k(!c){
	$("#O-9-v").o(\'L\')}
17{
	$("#O-9-v").m(\'L\')}
}
,1U:4(a,b,c){
	k(!c){
	$("#O-9-u").o(\'L\')}
17{
	$("#O-9-u").m(\'L\')}
}
}
);
	$(\'#1w-9\').r({
	2m:1g,w:1,I:t,J:t,K:4(b){
	$("#1w-9-u").p(\'l\',4(a){
	a.j();
	b.u()}
);
	$("#1w-9-v").p(\'l\',4(a){
	a.j();
	b.v()}
)}
}
);
	$(\'#z-B-9\').r({
	w:1,18:3,19:"1a",I:t,J:t,K:4(b){
	$(\'#z-B-y .z-B-2n\').p(\'l\',4(a){
	a.j();
	b.w($.r.10($(7).2o()));
	$(7).M().1V(\'.h\').1b({
	S:1W}
,1i,4(){
	$(7).m(\'h\')}
);
	$(7).M().1b({
	S:2p}
,1i,4(){
	$(7).o(\'h\')}
)}
)}
,1c:{
	1x:4(a,b,i){
	8 c=$(\'#z-B-y A.h\');
	8 d=$(\'#z-B-y A\').s(i-1);
	k(c!==d){
	c.1b({
	S:1W}
,1i,4(){
	$(7).m(\'h\')}
);
	d.1b({
	S:2q}
,1i,4(){
	$(7).o(\'h\')}
)}
}
}
}
);
	$(\'#q-9-1\').r({
	w:1,18:3,19:"1a",I:t,J:t,K:4(b){
	$(\'#q-9-1-y\').n(\'l\',\'a\',4(a){
	a.j();
	b.w($.r.10($(7).V(\'1X\')))}
);
	$("#q-9-1-u").p(\'l\',4(a){
	a.j();
	b.u()}
);
	$("#q-9-1-v").p(\'l\',4(a){
	a.j();
	b.v()}
)}
,1c:{
	1x:4(a,b,i){
	8 c=$(\'#q-9-1-P A.h\');
	8 d=$(\'#q-9-1-P A\').s(i-1);
	k(c!==d){
	c.m(\'h\');
	d.o(\'h\')}
c=$(\'#q-9-1-y A.h\');
	d=$(\'#q-9-1-y A\').s(i-1);
	k(c!==d){
	c.m(\'h\');
	d.o(\'h\')}
}
}
}
);
	$(\'#q-9-2\').r({
	w:1,18:3,19:"1a",I:t,J:t,K:4(b){
	$(\'#q-9-2-y\').n(\'l\',\'a\',4(){
	2r.j();
	b.w($.r.10($(7).V(\'1X\')))}
);
	$("#q-9-2-u").p(\'l\',4(a){
	a.j();
	b.u()}
);
	$("#q-9-2-v").p(\'l\',4(a){
	a.j();
	b.v()}
)}
,1c:{
	1x:4(a,b,i){
	8 c=$(\'#q-9-2-P .1Y-X.h\');
	8 d=$(\'#q-9-2-P .1Y-X\').s(i-1);
	k(c!==d){
	c.m(\'h\');
	d.o(\'h\')}
c=$(\'#q-9-2-y .q-9-2-1Z.h\');
	d=$(\'#q-9-2-y .q-9-2-1Z\').s(i-1);
	k(c!==d){
	c.m(\'h\');
	d.o(\'h\')}
}
}
}
);
	$(\'#Q-R-9\').r({
	w:1,18:5,19:"1a",I:t,J:t,K:4(b){
	$(\'#Q-R-u\').p(\'l\',4(a){
	a.j();
	b.u()}
);
	$(\'#Q-R-v\').p(\'l\',4(a){
	a.j();
	b.v()}
)}
,1U:4(a,b,c){
	k(!c){
	$("#Q-R-u").o(\'L\')}
17{
	$("#Q-R-u").m(\'L\')}
}
,1T:4(a,b,c){
	k(!c){
	$("#Q-R-v").o(\'L\')}
17{
	$("#Q-R-v").m(\'L\')}
}
}
);
	$(\'#G-B-9\').r({
	w:1,18:3,19:"1a",I:t,J:t,K:4(b){
	$(\'#G-B-y a\').p(\'l\',4(a){
	a.j();
	b.w($.r.10($(7).V(\'z\')))}
)}
,1c:4(a,b,i){
	8 c=$(\'#G-B-14 A.h\');
	8 d=$(\'#G-B-14 A\').s(i-1);
	k(c!==d){
	c.1u(20,4(){
	$(7).m(\'h\')}
);
	d.1t(20,4(){
	d.o(\'h\')}
)}
$(\'#G-B-y A.h\').m(\'h\');
	$(\'#G-B-y A\').s(i-1).o(\'h\')}
}
);
	8 g=E;
	$(\'#G-1y-r\').r({
	w:5,I:t,J:t,K:4(d){
	$("#G-1y-r-u").p(\'l\',4(a){
	a.j();
	d.u()}
);
	$("#G-1y-r-v").p(\'l\',4(a){
	a.j();
	d.v()}
);
	8 e=$(\'#21\');
	8 f=E;
	e.p(\'l\',4(a){
	a.j()}
);
	e.2s(4(a){
	a.j();
	f=f||a.1z-2t(e.12("U"));
	g=1g}
);
	e.16(4(a){
	a.j();
	g=E}
);
	e.2u(4(a){
	a.j();
	g=E}
);
	e.2v(4(a){
	k(g){
	8 b=((a.1z-f)>0)?(a.1z-f):0;
	k(b>1j){
	b=1j}
$(7).12({
	U:b}
);
	8 c=b/1j;
	d.w(2w.2x($.r.10(d.22()-5)*c))}
}
)}
,1c:4(a,b,i){
	k(g===E){
	8 c=(i-6)/($.r.10(a.22())-6);
	k(c<0){
	c=0}
$(\'#21\').1b({
	U:c*1j}
,2y)}
}
}
);
	$(\'.2z-2A\').N(4(){
	8 a=$(7).15(\'.1A-13\');
	a.H();
	a.1s();
	a.D(\'.1A-13-2B-2C\').s(0).1I()}
).16(4(){
	$(7).15(\'.1A-13\').F()}
);
	$(\'.1B-1C-2D\').N(4(){
	8 a=$(7).M().15(\'.1B-1C\');
	a.H()}
).16(4(){
	8 a=$(7).M().15(\'.1B-1C\');
	a.F()}
);
	$(\'.1D\').1p();
	$(1q).w(4(){
	k($(\'.1D\').2E(":2F")){
	$(\'.1D\').1p()}
}
);
	$(\'.1k-2G \').n(\'l\',\'a\',4(a){
	a.j();
	$(7).1V().m(\'n\');
	$(7).o(\'n\');
	$(\'.1l-1m-1E\').F();
	$($(7).V(\'1E-23\')).H();
	$(\'.1l-1m-P\').F();
	$(\'.1k-1n-1F\').m(\'n\')}
);
	$(\'.1k-1n-1F\').p(\'l\',4(a){
	a.j();
	k($(7).2H(\'1R\').2I(\' n\')>-1){
	$(7).m(\'n\');
	$(\'.1l-1m-P\').F()}
17{
	$(\'.1k-1n-1F\').m(\'n\');
	$(7).o(\'n\');
	$(\'.1l-1m-P\').F();
	$($(7).V(\'1E-1n-23\')).H()}
}
)}
);
	',62,169,'||||function|||this|var|carousel||||||||over||preventDefault|if|click|removeClass|on|addClass|bind|reading|jcarousel|eq|null|prev|next|scroll|topNavigator|control|index|li|hero|tab|find|false|hide|news|show|buttonNextHTML|buttonPrevHTML|initCallback|disabled|parent|mouseover|flash|description|interview|leader|width|top|left|data|header|item|sub|topBanner|intval|height|css|column|title|children|mouseout|else|auto|wrap|last|animate|itemVisibleInCallback|offset|parents|selected|true|setTimeout|400|748|segment|scene|service|child|fn|center|window|document|coverto|fadeIn|fadeOut|seniorSearch|video|onBeforeAnimation|pic|clientX|fly|award|introduction|askUppopFrame|case|button|alert|return|middle|each|toggle|navigator|menus|100|120|arrow|div|class|popSearch|buttonNextCallback|buttonPrevCallback|siblings|37|idx|abstract|dot|200|scroller|size|id|scrollTop|scrollLeft|position|absolute||margin|jQuery|ready|list|messagesUppop|slideToggle|topFrame|arrowed|remove|appendTo|276|px|popSearchCloseBut|vertical|number|text|406|405|event|mousedown|parseInt|mouseup|mousemove|Math|floor|50|section|descriptor|content|wrapper|triger|is|visible|buttons|attr|indexOf'.split('|'),0,{
}
))

JS代码(public.js):

jQuery(function(){
	//选项卡滑动切换通用jQuery(function(){
	jQuery(".hoverTag .chgBtn").hover(function(){
	jQuery(this).parent().find(".chgBtn").removeClass("chgCutBtn");
	jQuery(this).addClass("chgCutBtn");
	var cutNum=jQuery(this).parent().find(".chgBtn").index(this);
	jQuery(this).parents(".hoverTag").find(".chgCon").hide();
	jQuery(this).parents(".hoverTag").find(".chgCon").eq(cutNum).show();
}
)}
)//选项卡点击切换通用jQuery(function(){
	jQuery(".clickTag .chgBtn").click(function(){
	jQuery(this).parent().find(".chgBtn").removeClass("chgCutBtn");
	jQuery(this).addClass("chgCutBtn");
	var cutNum=jQuery(this).parent().find(".chgBtn").index(this);
	jQuery(this).parents(".clickTag").find(".chgCon").hide();
	jQuery(this).parents(".clickTag").find(".chgCon").eq(cutNum).show();
}
)}
)/*function autoCenter(){
	$(".keautoCon").css({
	"left":-($(".keautoCon").width()-$(document).width())/2}
);
}
setInterval(autoCenter,1);
	*/
$(".jarc2_ul li").hover(function(){
	$(this).find(".jarc2_show").show()}
,function(){
	$(this).find(".jarc2_show").hide()}
);
	$(".jarc2_ul:first").css("z-index",100);
	$(".jar_selOption li").hover(function(){
	$(this).css("background","#C6C9CC")}
,function(){
	$(this).css("background","none")}
);
	$(".jar_selOption li").click(function(){
	$(this).parents(".jar_pubSel").find(".jar_selHtml span").html($(this).text());
	$(".jar_selOption").hide();
}
);
	$(".jar_pubSel").hover(function(){
	$(this).find(".jar_selOption").show()}
,function(){
	$(this).find(".jar_selOption").hide()}
);
	$(".jar_serOption li").hover(function(){
	$(this).css("background","#1C5295")}
,function(){
	$(this).css("background","none")}
);
	$(".jar_serOption li").click(function(){
	$(this).parents(".jar_serSel").find(".jar_serHtml").html($(this).text());
	$(".jar_serOption").hide();
}
);
	$(".jar_serSel").hover(function(){
	$(this).find(".jar_serOption").show()}
,function(){
	$(this).find(".jar_serOption").hide()}
);
	$(".jar2_nav li:last").css("background","none");
	for(jar1=0;
	jar1<$(".jar2_subNav").size();
	jar1++){
	$(".jar2_subNav").eq(jar1).find("dd:last").css("background","none");
}
$(".jar2_nav li:not('.jar2_cutLi')").hover(function(){
	$(this).find(".jar2_subNav").css({
	"display":"block","z-index":100}
);
}
,function(){
	$(this).find(".jar2_subNav").css({
	"display":"none","z-index":0}
);
}
);
	$(".jar2r_u1 li:odd").addClass("jar2r_even");
}
)//屏蔽页面错误jQuery(window).error(function(){
	return true;
}
);
	jQuery("img").error(function(){
	$(this).hide();
}
);

CSS代码(style.css):

@charset "utf-8";body,ul,dl,dd,dt,ol,li,p,h1,h2,h3,h4,h5,h6,textarea,form,select,fieldset,table,td,div,input{margin:0;padding:0;-webkit-text-size-adjust:none}
h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:normal}
a img{border:0}
body{color:#333;text-align:center;font:12px "宋体";}
ul,ol,li{list-style-type:none;vertical-align:0}
a{outline-style:none;color:#535353;text-decoration:none}
a:hover{color:#D40000;text-decoration:none}
.jcarousel-skin-index .jcarousel-direction-rtl{direction:rtl}
.jcarousel-skin-index .jcarousel-clip{overflow:hidden}
.jcarousel-skin-index .jcarousel-clip-horizontal{width:520px}
.jcarousel-skin-index .jcarousel-list{position:relative}
.jcarousel-skin-index .jcarousel-item{width:520px}
.newsIndex .banner{width:500px;height:300px;margin:10px;margin-top:0;position:relative;float:left}
.newsIndex .banner #news-hero-footer{position:absolute;left:0;bottom:0;width:100%;background:#000;opacity:.9;line-height:37px;height:37px;overflow:hidden;font-size:18px}
.newsIndex .banner #news-hero-footer #news-hero-title{width:390px;float:left}
.newsIndex .banner #news-hero-footer #news-hero-title li{display:none;text-align:left;text-indent:20px}
.newsIndex .banner #news-hero-footer #news-hero-title li a{color:#fff;text-decoration:none}
.newsIndex .banner #news-hero-footer #news-hero-control{width:72px;float:right}
.newsIndex .banner #news-hero-footer #news-hero-control li{width:17px;height:37px;float:left}
.newsIndex .banner1{width:520px;height:312px;padding-right:15px;position:relative;margin:0 auto}
.newsIndex .banner1 .control-index-hero{position:absolute;left:0;bottom:0}
.newsIndex .banner1 .control-index-hero li{float:left;width:37px;height:37px;line-height:37px;overflow:hidden;background:#000;opacity:.9;margin-right:1px;text-align:left}
.newsIndex .banner1 .control-index-hero li.over{width:406px}
.newsIndex .banner1 .control-index-hero li.last{margin-right:0}
.newsIndex .banner1 .control-index-hero li a{text-decoration:none;float:left;color:#fff;font-size:18px;line-height:38px}
.newsIndex .banner1 .control-index-hero li a.index-hero-number{display:inline-block;font-size:16px;font-weight:bold;width:21px;height:21px;line-height:21px;text-align:center;margin:8px;background:#c00}
.newsIndex .list{width:420px;height:310px;margin-left:2px;text-align:left;float:left}
.newsIndex .list1{width:375px;height:286px;margin-left:15px;text-align:left;float:left}
.newsIndex .h1{border-left:4px solid #194f9b;padding-left:8px;margin-bottom:4px}
.newsIndex .h1 a{font-family:"黑体";color:#194f9b;font-size:20px;line-height:23px;text-decoration:none}
.newsIndex .h1 a:hover{text-decoration:underline}
.newsIndex .h2{line-height:20px;padding-left:14px;text-align:justify;width:97%}
.newsIndex .h3{margin-top:5px}
.newsIndex .menu1{width:385px;height:40px;float:left;margin-left:15px;_margin-left:7px}
.newsIndex .menu1 .over{background-position:bottom;color:#fff}
.newsIndex .menu1 a{display:block;margin:auto 1px;margin-left:0;height:36px;width:93px;color:#727272;text-decoration:none;line-height:26px;background:url(../images/but_bg_1.gif) repeat-x;float:left}
.newsIndex .menu1 a:hover{background-position:bottom;color:#fff}
.newsIndex .menu1 a.last{margin-right:0}
.newsIndex .toMore{background:url(../images/but_more.gif) no-repeat 0 4px;padding-left:12px;float:right;text-decoration:none;color:#4a4a4a}
.newsIndex .toMore:hover{text-decoration:underline}
.newsIndex .block{height:1px;padding-top:8px;display:block;font-size:0}

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