当前位置: 首页 > 代码与插件 > jQuery Estorm Slider > 0.0.1

jQuery 焦点轮播图 jQuery Estorm Slider 0.0.1 发布日期:2014年06月15日 16:23:04

jQuery 仿win8 tab切换插件

浏览器支持:

  • IE10,11
  • Firefox
  • Chrome
  • Safri
  • Opera

1.支持缩略图分页;
2.支持配置是否自动播放;
3.支持同一个页面多个效果;
4.支持循环播放;
5.支持按钮切换;
6.支持自适应屏幕大小;
7.图片加载带loading效果;
8.可只有配置缩略图展示效果;
9.理论上支持无图片显示;
10.插件文件大小8K,压缩后大小5K。

安装使用

HTML代码:
<div class="estorm-slider">
	<div class="estorm-slider-container">
		<ul>
			<li data-small="../images/1s.jpg"><a href="#1"><img src="../images/1.jpg" width="1000" height="500"></a></li>
			<li data-small="../images/2s.jpg"><a href="#2"><img src="../images/2.jpg" width="1000" height="500"></a></li>
			<li data-small="../images/3s.jpg"><a href="#3"><img src="../images/3.jpg" width="1000" height="500"></a></li>
			<li data-small="../images/4s.jpg"><a href="#4"><img src="../images/4.jpg" width="1000" height="500"></a></li>
			<li data-small="../images/5s.jpg"><a href="#5"><img src="../images/5.jpg" width="1000" height="500"></a></li>
			<li data-small="../images/6s.jpg"><a href="#6"><img src="../images/6.jpg" width="1000" height="500"></a></li>
		</ul>
	</div>
</div>
CSS代码:
.estorm-slider { width:1000px; height:500px; overflow:hidden; background:#000000; position:relative; }
.estorm-slider .estorm-slider-container { width:1000px; height:500px; overflow:hidden; position:relative; }
.estorm-slider .estorm-slider-container li { width:1000px; height:500px; display:block; overflow:hidden; float:left; position:absolute; top:0; }
.estorm-slider .estorm-slider-container li a { width:1000px; height:500px; display:block; }
.estorm-slider .estorm-slider-container li img { display:none; }
.estorm-slider a.prev, .estorm-slider a.next { width:80px; height:80px; display:block; overflow:hidden; position:absolute; background-color:#000000; background-repeat:no-repeat; background-image:url(../images/arrow.png); top:200px; text-indent:-9999px; opacity:0.5; }
.estorm-slider a.prev { left:0; background-position:-10px -10px; border-radius:0 5px 5px 0; }
.estorm-slider a.next { right:0; background-position:-10px -110px; border-radius:5px 0 0 5px; }
.estorm-slider a.prev:hover, .estorm-slider a.next:hover { opacity:1; }
JS代码:
$('.estorm-slider').estormSlider({
	smallImg: { //缩略图设置
		width: 150, //宽
		height: 75, //高
		colwidth: 5, //item之间的空隙
		colnum: 6, //每行放几个
		borderwidth: 5, //边框宽度
		bordercolor: '#000000', //边框颜色
		current: '#ff6600', //当前对象的边框颜色
		bgcolor: '#050505', //背景颜色
		loadingimg: 'images/loading.gif', //loading图片地址
		skewing: 1, //离底部的距离
		opacity: 0.8 //初始透明度	
	},
	auto: {
		isauto: true, //是否自动播放,不需要设置为false就可以了
		delay: 5000, //自动播放时间间隔
	},
	animate: { 
		speed: 600 //动画持续时间
	}
});
补充说明:

下一版本支持:
1.数字分页;
2.优化快速点击时,切换效果的瑕疵;
3.向前向后按钮是否显示配置;
4.分屏切换(一个界面显示多个对象);
5.增加回调函数。