所属分类:网页特效-焦点图/幻灯片
安装方法:
载入CSS样式:css/ScrollPic.css
载入jQuery库文件:js/jquery-1.7.1.min.js
载入插件JS:js/jquery.ScrollPic.js
HTML部分放置:(不同样式有不同的效果,与下面的JS配置对应)
<div class="yiz-slider-1">
<ul>
<li><img src="images/1.jpg" />li>
<li><img src="images/2.jpg" />li>
<li><img src="images/3.jpg" />li>
<li><img src="images/4.jpg" />li>
ul>
div>
<div class="yiz-slider-2">
<ul>
<li><img src="images/1.jpg" />li>
<li><img src="images/2.jpg" />li>
<li><img src="images/3.jpg" />li>
<li><img src="images/4.jpg" />li>
ul>
div>
<div class="yiz-slider-3 yiz-slider" id="yiz-slider" data-yiz-slider="3">
<ul>
<li><img src="images/1.jpg" />li>
<li><img src="images/2.jpg" />li>
<li><img src="images/3.jpg" />li>
<li><img src="images/4.jpg" />li>
ul>
div>
JS配置:(与上面HTML对应)
/*
插件介绍:本插件实现图片轮播效果,可以配置切换时间、是否自动切换、切换速度、插件效果(左右箭头 Or 方块点控制)
*/
$(function(){
$('.yiz-slider-1').ScrollPic({
autoscrooll: true,
numbercontrol: false
});
$('.yiz-slider-2').ScrollPic({
Time: '3000',
speed: '800',
autoscrooll: true
});
$('.yiz-slider-3').ScrollPic({
Time: 4000, //自动切换时间
speed: 1000, //图片切换速度
autoscrooll: true, //设置是否自动切换
arrowcontrol: true, //开启开右箭头
numbercontrol: false //关闭右下角按钮
});
})
根据自身的需求,自由配置即可,能DIY的插件就是好插件