基于jQuery的响应式旋转木马插件flexisel.js

描述:flexisel.js响应适应屏幕宽度旋转木马插件,效果很好。它设置为启用自动播放,定义动画的速度和悬停。

特点:

1)Flexisel 将顺应需求适应屏幕宽度变小;

2)根据项目的数量可以更改显示的屏幕宽度;

3)其他选项包括自动播放,动画速度时右和左。

使用方法:

1)下载flexisel.js插件

2)引入js文件

<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>fullPageDemo</title>  
  
<script src="js/jquery-1.8.3.min.js"></script>  
<script src="js/jquery.flexisel.js"></script>  
  
</head> 

3)引入CSS样式文件
<link href="css/flexslider.css" rel="stylesheet">

4)HTML页面

<div class="slider1">
			<div class="arrival-grids">			 
			 <ul id="flexiselDemo1">
				 <li>
					 <a href="#"><img src="images/awards/b3.jpg" alt=""/>
					 </a>
				 </li>
				 <li>
					 <a href="#"><img src="images/awards/b4.jpg" alt=""/>
					 </a>
				 </li>
				 <li>
					 <a href="#"><img src="images/awards/b5.jpg" alt=""/>
					 </a>
				 </li>
				 <li>
					 <a href="#"><img src="images/awards/b6.jpg" alt=""/>
					 </a>
				 </li>
				 <li>
					 <a href="#"><img src="images/awards/b7.jpg" alt=""/>
					 </a>
				 </li>
				 <li>
					 <a href="#"><img src="images/awards/b8.jpg" alt=""/>
					 </a>
				 </li>
			</ul>
            </div>
</div>



5)JavaScript脚本

<script type="text/javascript">
	 $(window).load(function() {			
		$("#flexiselDemo1").flexisel({
			visibleItems: 4,
			animationSpeed: 1000,
			autoPlay: true,
			autoPlaySpeed: 3000,    		
			pauseOnHover:true,
			enableResponsiveBreakpoints: true,
			responsiveBreakpoints: { 
				portrait: { 
					changePoint:480,
					visibleItems: 1
				}, 
				landscape: { 
					changePoint:640,
					visibleItems: 2
				},
				tablet: { 
					changePoint:768,
					visibleItems: 3
				}
			}
		});
	});
</script>

6)运行代码即可

你可能感兴趣的:(jquery,插件,响应式)