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" type="text/css" href="css/yx_rotaion.css"/>
</head>
<body>
<!--UL标签class属性必需，图片alt属性值即标题文字-->
<div class="yx-rotaion">
	<ul class="rotaion_list">
		<li><a href="#"><img src="uploads/1.jpg" alt="美国俄州遭遇龙卷风 已致91人死"></a></li>
		<li><a href="#"><img src="uploads/2.jpg" alt="深圳路面塌陷形成直径10米大坑"></a></li>
		<li><a href="#"><img src="uploads/3.jpg" alt='"520" 武汉新人扎堆结婚'></a></li>
		<li><a href="#"><img src="uploads/4.jpg" alt="暴雨突袭广州 南沙上演科幻大片"></a></li>
		<li><a href="#"><img src="uploads/5.jpg" alt="上海美博会模特赤身才会博眼球"></a></li>
	</ul>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.yx_rotaion.js"></script>
<script type="text/javascript">
$(".yx-rotaion").yx_rotaion({auto:true});
</script>
</body>
</html>

JS代码(jquery.yx_rotaion.js):

(function($){
	$.fn.extend({
	yx_rotaion:function(options){
	//默认参数 var defaults ={
	/**轮换间隔时间，单位毫秒*/
 during:3000,/**是否显示左右按钮*/
 btn:true,/**是否显示焦点按钮*/
 focus:true,/**是否显示标题*/
 title:true,/**是否自动播放*/
 auto:true}
var options = $.extend(defaults,options);
	return this.each(function(){
	var o = options;
	var curr_index = 0;
	var $this = $(this);
	var $li = $this.find("li");
	var li_count = $li.length;
	$this.css({
	position:'relative',overflow:'hidden',width:$li.find("img").width(),height:$li.find("img").height()}
);
	$this.find("li").css({
	position:'absolute',left:0,top:0}
).hide();
	$li.first().show();
	$this.append('<div class="yx-rotaion-btn"><span class="left_btn"><\/span><span class="right_btn"></span><\/div>');
	if(!o.btn) $(".yx-rotaion-btn").css({
	visibility:'hidden'}
);
	if(o.title) $this.append(' <div class="yx-rotation-title"><\/div><a href="" class="yx-rotation-t"><\/a>');
	if(o.focus) $this.append('<div class="yx-rotation-focus"><\/div>');
	var $btn = $(".yx-rotaion-btn span"),$title = $(".yx-rotation-t"),$title_bg = $(".yx-rotation-title"),$focus = $(".yx-rotation-focus");
	//如果自动播放，设置定时器if(o.auto) var t = setInterval(function(){
	$btn.last().click()}
,o.during);
	$title.text($li.first().find("img").attr("alt"));
	$title.attr("href",$li.first().find("a").attr("href"));
	// 输出焦点按钮 for(i=1;
	i<=li_count;
	i++){
	$focus.append('<span>'+i+'</span>');
}
// 兼容IE6透明图片 if($.browser.msie && $.browser.version == "6.0" ){
	$btn.add($focus.children("span")).css({
	backgroundImage:'url(images/ico.gif)'}
);
}
var $f = $focus.children("span");
	$f.first().addClass("hover");
	// 鼠标覆盖左右按钮设置透明度 $btn.hover(function(){
	$(this).addClass("hover");
}
,function(){
	$(this).removeClass("hover");
}
);
	//鼠标覆盖元素，清除计时器 $btn.add($li).add($f).hover(function(){
	if(t) clearInterval(t);
}
,function(){
	if(o.auto) t = setInterval(function(){
	$btn.last().click()}
,o.during);
}
);
	//鼠标覆盖焦点按钮效果 $f.bind("mouseover",function(){
	var i = $(this).index();
	$(this).addClass("hover");
	$focus.children("span").not($(this)).removeClass("hover");
	$li.eq(i).fadeIn(300);
	$li.not($li.eq(i)).fadeOut(300);
	$title.text($li.eq(i).find("img").attr("alt"));
	curr_index = i;
}
);
	//鼠标点击左右按钮效果 $btn.bind("click",function(){
	$(this).index() == 1?curr_index++:curr_index--;
	if(curr_index >= li_count) curr_index = 0;
	if(curr_index < 0) curr_index = li_count-1;
	$li.eq(curr_index).fadeIn(300);
	$li.not($li.eq(curr_index)).fadeOut(300);
	$f.eq(curr_index).addClass("hover");
	$f.not($f.eq(curr_index)).removeClass("hover");
	$title.text($li.eq(curr_index).find("img").attr("alt"));
	$title.attr("href",$li.eq(curr_index).find("a").attr("href"));
}
);
}
);
}
}
);
}
)(jQuery);

CSS代码(yx_rotaion.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial,Helvetica,sans-serif,"新宋体";}
/*yx_rotaion*/
.yx-rotaion{margin:0 auto;}
.yx-rotaion-btn,.yx-rotaion-title,.yx-rotation-focus,.yx-rotation-t,.yx-rotaion-btn{position:absolute}
.yx-rotation-title{position:absolute;width:100%;height:40px;line-height:40px;background:#000;filter:alpha(opacity=40);-moz-opacity:0.4;-khtml-opacity:0.4;opacity:0.4;left:0;bottom:0;_bottom:-1px;z-index:1}
.yx-rotation-t{color:#fff;font-size:16px;font-family:microsoft yahei;z-index:2;bottom:0;left:10px;line-height:40px}
.yx-rotation-focus span,.yx-rotaion-btn span{background:url(../images/ico.png) no-repeat;display:block;}
.yx-rotation-focus{height:40px;line-height:40px;right:20px;bottom:0;z-index:2}
.yx-rotation-focus span{width:12px;height:12px;line-height:12px;float:left;margin-left:5px;position:relative;top:14px;cursor:pointer;background-position:-24px -126px;text-indent:-9999px}
.yx-rotaion-btn{width:100%;height:41px;top:50%;margin-top:-20px;}
.yx-rotaion-btn span{width:41px;height:41px;cursor:pointer;filter:alpha(opacity=30);-moz-opacity:0.3;-khtml-opacity:0.3;opacity:0.3;position:relative}
.yx-rotaion-btn .left_btn{background-position:-2px -2px;float:left;left:10px}
.yx-rotaion-btn .right_btn{background-position:-2px -49px;float:right;right:10px}
.yx-rotaion-btn span.hover{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8}
.yx-rotation-focus span.hover{background-position:-10px -126px}
.rotaion_list{width:0;height:0;overflow:hidden;}

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