所属分类:网页特效-焦点图/幻灯片
很早之前就在用这个插件,兼容、扩展、配置、样式都很棒,值得长期使用
安装方法:
载入CSS样式文件(比较少,建议放到自己的CSS里面去)
<link rel="stylesheet" type="text/css" href="./js/sliderPlay-2.0.min.css">
载入JQ库文件和必要JS插件文件(这里jQuery库文件用的360CND,可以换成本地)
<script src="http://ajax.useso.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript">script>
<script src='./js/jquery-sliderPlay-2.0.min.js'>script>
HTML部分:
<div id='sliderPlay' style='visibility: hidden;'>
<a href='http://www.sucainiu.com/' target="_blank"><img src='01.jpg' alt='这是标题一' height='376px' width='720px'/>a>
<a href='http://www.sucainiu.com/' target="_blank"><img src='02.jpg' alt='这是标题二' height='376px' width='720px'/>a>
<a href='http://www.sucainiu.com/' target="_blank"><img src='03.jpg' alt='这是标题三' height='376px' width='720px'/>a>
<a href='http://www.sucainiu.com/' target="_blank"><img src='04.jpg' alt='这是标题四' height='376px' width='720px'/>a>
<a href='http://www.sucainiu.com/' target="_blank"><img src='05.jpg' alt='这是标题五' height='376px' width='720px'/>a>
div>
要兼容Chrome需要在img标签中写上图片的实际宽度和高度 或者放到window.onload里面执行调用 其他浏览器不需要。
插件配置解析:
<script>
$('#sliderPlay').sliderPlay({
speed: 300, //动画效果持续时间
timeout: 4000, //幻灯间隔时间
moveType: 'randomMove', // randomMove: 随机运动,moveTo: 切换运动 ,opacity: 淡入淡出
mouseEvent: 'click', //事件类型,默认是 click ,mouseover
isShowTitle: true, //是否开始标题,开启则采用img标签alt的文字
isShowBtn: true //是否显示按钮
});
</script>