标签： 幻灯片

仿百度新闻首页左右按钮控制焦点图片淡出淡进轮播切换 – jquery.yx_rotaion

仿百度新闻首页左右按钮控制焦点图片淡出淡进轮播切换 – jquery.yx_rotaion 

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<title>仿百度新闻首页左右按钮控制焦点图片淡出淡进轮播切换 - jquery.yx_rotaion</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<!--开始-->
<div class="yx-rotaion">
	<ul class="rotaion_list">
		<li><a href="http://www.lrxin.com/archives-785.html"><img src="uploads/1.jpg" alt="美国俄州遭遇龙卷风 已致91人死"></a></li>
		<li><a href="http://www.lrxin.com/archives-785.html"><img src="uploads/2.jpg" alt="深圳路面塌陷形成直径10米大坑"></a></li>
		<li><a href="http://www.lrxin.com/archives-785.html"><img src="uploads/3.jpg" alt='"520" 武汉新人扎堆结婚'></a></li>
		<li><a href="http://www.lrxin.com/archives-785.html"><img src="uploads/4.jpg" alt="暴雨突袭广州 南沙上演科幻大片"></a></li>
		<li><a href="http://www.lrxin.com/archives-785.html"><img src="uploads/5.jpg" alt="上海美博会模特赤身才会博眼球"></a></li>
	</ul>
</div>
<link href="css/yx_rotaion.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.yx_rotaion.js"></script>
<script type="text/javascript">
$(".yx-rotaion").yx_rotaion({auto:true });
</script>
<!--结束-->
</body>
</html>

幻灯片参数说明：

$(".yx-rotaion").yx_rotaion({
    /**轮换间隔时间，单位毫秒*/
    during:3000,
    /**是否显示左右按钮*/
    btn:true,
    /**是否显示焦点按钮*/
    focus:true,
    /**是否显示标题*/
    title:true,
    /**是否自动播放*/
    auto:true		
});

设置幻灯片图片大小 在 yx_rotaion.css 文件中

/* 这里修改图片大小*/
.yx-rotaion img{ width:549px; height:366px; }

演示地址：http://www.17sucai.com/preview/53522/2013-11-22/jquery.yx_rotaion_1/demo.html

下载地址：http://pan.baidu.com/s/1nt63Juh