360新闻图文混排js焦点图轮播滚动切换特效代码

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

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

以下是 360新闻图文混排js焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(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>360新闻图文混排js焦点图 </title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/ImageSlide.js"></script>

</head>
<body>

<div id="focusImage" class="slide">

	<ul class="contents">
		<li class="current">
			<div class="image"><a href="#"><img src="images/1.jpg" width="400" height="282"></a></div>
			<div class="text">
				<span class="title"><a href="#">新华社英文推出习近平系列旧照</a></span>
				<p>12月23日，新华英文推出习近平系列新老照片，题目为《Profile photos: Xi Jinping: Man of the people, statesman of vision》。</p>
			</div>
		</li>
		<li>
			<div class="image"><a href="#"><img src="images/2.jpg" width="400" height="282"></a></div>
			<div class="text">
				<span class="title"><a href="#">新华社英文推出李克强系列旧照</a></span>
				<p>12月23日，新华英文推出李克强系列新老照片，题目为《Profile photos: Li Keqiang: A man who puts people first》。</p>
			</div>
		</li>
		<li>
			<div class="image"><a href="#"><img src="images/3.jpg" width="400" height="282"></a></div>
			<div class="text">
				<span class="title"><a href="#">中国老一辈领导的夫人们</a></span>
				<p>劳安与朱镕基同是湖南人，且都在湘西上过学。朱镕基与劳安的结识，得益于朱镕基中学时的一位同窗好友，劳安是朱镕基一位名为劳特夫同学的妹妹。</p>
			</div>
		</li>
		<li>
			<div class="image"><a href="#"><img src="images/4.jpg" width="400" height="282"></a></div>
			<div class="text">
				<span class="title"><a href="#">北京异地考生家长请愿被警方驱散 </a></span>
				<p>12月22日，北京，部分非京籍考生家长在奥运大厦附近请愿，呼吁教育公平，集会持续很短时间后被警方驱散。近日，15岁的江西女孩占海特在微博上争取非沪...</p>
			</div>
		</li>
		<li>
			<div class="image"><a href="#"><img src="images/5.jpg" width="400" height="282"></a> </div>
			<div class="text">
				<span class="title"><a href="#">越南抗议者组成足球队反华</a></span>
				<p>越南抗议者为避政府驱散，成立名为“NO U FC”足球队反华，U暗指南海“九段线”，FC既代表“足球俱乐部”，也是“该死的中国”的简称。</p>
			</div>
		</li>
	</ul>
	
	<div class="triggers">
		<a href="javascript:;" class="cur current"><img src="images/1.jpg" width="58" height="38"></a>
		<a href="javascript:;"><img src="images/2.jpg" width="58" height="38"></a>
		<a href="javascript:;"><img src="images/3.jpg" width="58" height="38"></a>
		<a href="javascript:;"><img src="images/4.jpg" width="58" height="38"></a>
		<a href="javascript:;"><img src="images/5.jpg" width="58" height="38"></a>
	</div>

	<div class="icon-dot">
		<a href="javascript:;" class="cur current"></a>
		<a href="javascript:;"></a>
		<a href="javascript:;"></a>
		<a href="javascript:;"></a>
		<a href="javascript:;"></a>
	</div>
	
	<span class="link-watch pre down"></span>
	<span class="link-watch next down"></span>
	
</div>

<script type="text/javascript">
new ImageSlide({
	project:"#focusImage",
	content:".contents li",
	tigger:".triggers a",
	dot:".icon-dot a",
	watch:".link-watch",
	auto:!0,
	hide:!0
})
</script>
</body>
</html>

JS代码(ImageSlide.js):

var ImageSlide = function(e){
	this.project = W(e.project),this.content = this.project.query(e.content),this.tigger = e.tigger ? this.project.query(e.tigger):null,this.watch = e.watch ? this.project.query(e.watch):null,this.dot = e.dot ? this.project.query(e.dot):null,this.isAuto = e.auto || !0,this.hide = e.hide && !0,this.init()}
;
	ImageSlide.prototype.init = function(){
	this.register(),this.isAuto && this.auto()}
,ImageSlide.prototype.register = function(){
	var e = this;
	this.tigger && this.tigger.forEach(function(t,n){
	W(t).on("mouseover",function(){
	return e.stop(),e.show(n),!1}
)}
),this.dot && this.dot.forEach(function(t,n){
	W(t).on("click",function(){
	return e.stop(),e.show(n),!1}
),W(t).on("mouseover",function(){
	return e.stop(),e.show(n),!1}
)}
),this.watch && this.watch.forEach(function(t,n){
	W(t).on("mouseup",function(){
	e.stop(),this.className += " down"}
),W(t).on("mousedown",function(){
	e.stop(),this.className = this.className.replace("down","")}
),W(t).on("mouseover",function(){
	W(this).removeClass("down")}
),W(t).on("mouseout",function(){
	W(this).addClass("down")}
),W(t).on("click",function(){
	var t = e.index();
	this.className.indexOf("pre") >= 0 && (t = t - 1 < 0 ? e.content.length - 1:t - 1),this.className.indexOf("next") >= 0 && (t = t + 1 > e.content.length - 1 ? 0:t + 1),e.show(t)}
)}
),this.project.on("mouseenter",function(){
	e.tigger && e.hide && e.tigger.css("display",""),e.watch && e.hide && e.watch.css("display","inline-block"),e.stop()}
),this.project.on("mouseleave",function(){
	e.tigger && e.hide && e.tigger.css("display","none"),e.watch && e.hide && e.watch.css("display","none"),e.auto()}
)}
,ImageSlide.prototype.index = function(){
	var e = 0,t = this.content;
	for (var n = 0,r = t.length;
	n < r;
	n++) t[n].className.indexOf("current") > -1 && (e = n);
	return e}
,ImageSlide.prototype.auto = function(){
	var e = this;
	this.timer = setInterval(function(){
	var t = e.index();
	t = t >= e.content.length - 1 ? 0:t + 1,e.show(t)}
,5e3)}
,ImageSlide.prototype.stop = function(){
	this.timer && clearInterval(this.timer)}
,ImageSlide.prototype.show = function(e){
	this.tigger && this.tigger.addClass && this.tigger.removeClass("current").item(e).addClass("current"),this.dot && this.dot.addClass && this.dot.removeClass("current").item(e).addClass("current"),this.content && this.content.addClass && (this.content.filter(".current").removeClass("current"),this.content.item(e).addClass("current"))}
;

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;border:0;list-style:none;}
body{font-family:"微软雅黑","宋体";}
a{color:#333;text-decoration:none}
a:hover{color:#C00;text-decoration:underline}
/* slide */
.slide,.slide li{width:568px;height:280px;background-color:#fbfbfb;}
.slide{overflow:hidden;border:1px #ededed solid;position:relative;margin:40px auto 0 auto;}
.slide li{position:absolute;overflow:hidden;display:none;}
.slide li.current{display:block;}
.slide li .image{position:absolute;top:-2px;left:-2px;}
.slide li .text{bottom:0;overflow:hidden;background-color:rgba(0,0,0,0.6);width:148px;float:right;position:relative;height:auto;background:0;filter:none;text-indent:0;margin:15px 10px 0 0;padding:6px 0;}
.slide li .text a{color:#fff;font-size:14px;line-height:17px;float:left;}
.slide li img{width:400px;height:282px;}
.slide li .text .title a{font-size:16px;font-weight:700;color:#000;font-family:"微软雅黑","宋体";line-height:22px;text-indent:0;float:none;}
.slide li .text p{color:#888;font-size:12px;text-indent:0;clear:both;line-height:20px;margin-top:4px;}
.slide .triggers{position:absolute;z-index:1;width:400px;text-align:center;bottom:10px;height:38px;right:0;left:0;padding:0 0 8px;}
.slide .triggers a{font-size:11px;line-height:12px;color:#000;overflow:hidden;border-radius:1px;-webkit-text-size-adjust:none;float:none;width:62px;height:42px;text-align:center;display:inline-block;background:0;margin:0 3px 0 0;}
.slide .triggers a:hover{text-decoration:none;}
.slide .triggers a img{width:58px;height:38px;border:1px #999 solid;vertical-align:middle;opacity:.6;}
.slide .triggers a.current img{border:2px #2fac00 solid;opacity:1;}
.slide .icon-dot{display:inline-block;position:absolute;bottom:20px;right:43px;}
.slide .icon-dot a{width:9px;height:9px;display:inline-block;background-image:url(../images/nav.png);background-repeat:no-repeat;background-position:-1px -1px;overflow:hidden;margin:0 2px;}
.slide .icon-dot a.current{background-position:-1px -12px;}
.slide .link-watch{width:30px;height:44px;display:none;position:absolute;top:110px;background:url(../images/arrow.png) no-repeat 0 -57px;filter:alpha(opacity=60);cursor:pointer;}
.slide .link-watch.pre{left:0;}
.slide .link-watch.next{left:368px;right:0;background-position:right -57px;}
.slide .link-watch.down{background-position-y:-2px;}

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