最新消息:

第33款插件:jcSlider.js图片下边有小按钮的轮换图片

图片幻灯插件 杨红伟 1789浏览 0评论

描述:jcSlider.js可以制作图片下边有小按钮的轮换图片,而且也有很多参数,对于有小按钮的图片轮换,是非常不错的,支持自动播放,左右图片按钮是否显示,总之是非常好的!
预览: http://www.ijquery.cn/demo/jcSlider/
JS下载:http://www.ijquery.cn/js/jQuery-jcSlider.js
打包下载:http://www.ijquery.cn/demo/jcSlider/jcSlider.zip
图片展示:

1

官方网址:没有找到,不过作者是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]

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址