描述:jcSlider.js可以制作图片下边有小按钮的轮换图片,而且也有很多参数,对于有小按钮的图片轮换,是非常不错的,支持自动播放,左右图片按钮是否显示,总之是非常好的!
预览: http://www.ijquery.cn/study/demo/jcSlider/
JS下载:http://www.ijquery.cn/js/jQuery-jcSlider.js
打包下载:http://www.ijquery.cn/study/demo/jcSlider/jcSlider.zip
图片展示:
官方网址:没有找到,不过作者是Riddick
兼容浏览器:IE6+/Firefox/Chrome
参数说明:
loading:false,//预加载loading开关设置,提供true,false
loadpic:'img/loading.gif',//预加载loading图片路径,相对定位,如../img/riddick.png
play:true,//是否开起自动播放功能,提供true,false
play_speed:1500,//自动播放速度设置,提供easing值 或 数值(mm)
slider_btn:true,//左右按钮开关,提供true,false
slider_speed:500,//图片切换速度设置,提供easing值 或 数值(mm)
slider_num:true,//数字按钮开关,提供true,false
offset:40,//设置左右按钮偏移量(px)
btn_event:'click',//数字按钮事件设置,提供click,mouseover等
btn_position:'middle',//数字按钮位置,提供left,middle,right
num_offsetW:0,//设置数字按钮的X偏移(px)
num_offsetH:330,//设置数字按钮的Y偏移(px)
scaling:true,//是否设置图片大小,提供true,false
width:956,//设置图片宽度单位(px)
height:300,//设置图片高度单位(px)
sliderModle:'fade'//设置slider显示模式,提供fade,xScroll
HTML代码:
[html]
<div id="wrap">
<ul id="imgShow">
<li><img src="images/s1.png" alt="图片一" /></li>
<li><img src="images/s2.png" alt="图片二" /></li>
<li><img src="images/s3.png" alt="图片三" /></li>
<li><img src="images/s4.png" alt="图片四" /></li>
</ul>
</div>
[/html]
JS引用代码:
[js]
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/jQuery-easing.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/jQuery-jcSlider.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$('#wrap').jcSlider({
loading:false, //预加载loading开关设置,提供true,false
loadpic:'images/loading.gif', //预加载loading图片路径,相对定位,如../images/riddick.png
play:true, //是否开起自动播放功能,提供true,false
play_speed:1500, //自动播放速度设置,提供easing值 或 数值(mm)
slider_btn:true, //左右按钮开关,提供true,false
slider_speed:500, //图片切换速度设置,提供easing值 或 数值(mm)
slider_num:true, //数字按钮开关,提供true,false
offset:40, //设置左右按钮偏移量(px)
btn_event:'click', //数字按钮事件设置,提供click,mouseover等
btn_position:'middle', //数字按钮位置,提供left,middle,right
num_offsetW:0, //设置数字按钮的X偏移(px)
num_offsetH:330, //设置数字按钮的Y偏移(px)
scaling:true, //是否设置图片大小,提供true,false
width:956, //设置图片宽度单位(px)
height:300, //设置图片高度单位(px)
});
});
</script>
[/js]
CSS代码:
[css]
#wrap { width:974px; margin:0 auto; margin-top:50px; position:relative; height:318px; background:url(images/sliderbg.png) no-repeat; }
#wrap #picHide { width:956px; height:300px; overflow:hidden; position:relative; }
#wrap #imagesShow { height:300px; width:100%; position:absolute; top:0; left:0;}
#wrap #imagesShow li { float:left; height:300px; width:956px; list-style:none;}
#wrap #sliderNum { position:absolute; left:0; height:14px; z-index:998;}
#wrap #sliderNum li { top:0; z-index:999;width:14px; height:14px; float:left; list-style:none; cursor:pointer; margin:0 3px; overflow:hidden; text-indent:-999em; background:url(images/pagination.png) no-repeat 0 0;}
#wrap #sliderNum li:hover { background:url(images/pagination.png) no-repeat 0 -14px;}
#wrap #sliderNum li.visited { background:url(images/pagination.png) no-repeat 0 -14px;}
#wrap #slider_prev,#wrap #slider_next { position:absolute; z-index:1001; display:block; cursor:pointer; height:32px; width:24px;}
#wrap #slider_prev { background:url(images/navigation-previous.png) no-repeat;}
#wrap #slider_next { background:url(images/navigation-next.png) no-repeat;}
[/css]