js实现幻灯片效果.pdf

xuexiaodong2009的专栏
js实现幻灯片效果
分类: js 2013-11-01 10:28 366人阅读评论(3) 收藏举报
  在网站中使用幻灯片效果的目前很普遍,如何实现,自己经过一番研究,本以为很复杂,想不到却很简单。有现
。
 
  htm代码:
<div id="focusNews" style="visibility:hidden;" class="ifocus" >
<a href="" target="_blank"><img src="images/" alt="标题一" /></a>
<a href="" target="_blank"><img src="images/" alt="标题二" /></a>
<a href="" target="_blank"><img src="images/" alt="标题三" /></a>
<a href="" target="_blank"><img src="images/" alt="标题四" /></a>
<a href="" target="_blank"><img src="images/" alt="标题五" /></a>
<a href="" target="_blank"><img src="images/" alt="标题六" /></a>
</div>
js代码:
$(function () {
$("#focusNews").KinSlideshow({
// moveStyle:"down", //设置切换方向为向下[默认向左切换]
intervalTime:8, //设置间隔时间为8秒[默认为5秒]
mouseEvent:"mouseover", //设置鼠标事件为“鼠标滑过切换”[默认鼠标点击时切换]
titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} //设置标题文字大小为14px,颜色:#FF0000
});

})
设置图片大小的CSS
.ifocus{width:400px;height:300px;visibility:hidden;}
.ifocus img{width:700px;height:400px; }
最终效果图
1
更多
上一篇:如何从树叶层开始建树三?
下一篇:js实现幻灯片效果二
顶
6
踩
0
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

核心技术类目
全部主题 Java VPN Android iOS ERP IE10 Eclipse CRM JavaScript Ubuntu NFC WAP jQuery 数据库 BI HTML5
Spring Apache Hadoo