基于jQuery的内容滚动插件flexSlider.js

描述:轻松创建各种图片轮播效果、焦点图效果、图文混排滚动效果。

特性:

1)支持滑动和淡入淡出效果;

2)支持水平、垂直方向滑动;

3)支持键盘方向键控制;

4)支持触控滑动;

5)支持图文混排,支持各种html元素;

6)自适应屏幕尺寸;

7)可控制滑动单元个数;

8)更多选项设置和回调函数。

使用方法:

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.flexslider.js"></script>    
        
    </head>   
3)引入CSS样式文件
<link href="css/flexslider.css" rel="stylesheet">

4)HTML页面

<section id="banner" class="slider2">
			<div class="flexslider">
				<ul class="slides">
					<li>
						<div class="slider-info">
							<img src="images/papers/ban.jpg" class="img-responsive" alt="">
						</div>
					</li>
					<li>
						<div class="slider-info">
							<img src="images/papers/ban1.jpg" class="img-responsive" alt="">
						</div>
					</li>
					<li>	
						<div class="slider-info">
							<img src="images/papers/ban2.jpg" class="img-responsive" alt="">
						</div>
					</li>
				</ul>
			</div>
</section>

5)JavaScript脚本

$(function() { 
    $(".flexslider").flexslider(); 
});  


<script type="text/javascript">
								$(function(){
								  SyntaxHighlighter.all();
								});
								$(window).load(function(){
								  $('.flexslider').flexslider({
									animation: "slide",
									start: function(slider){
									  $('body').removeClass('loading');
									}
								  });
								});
</script>
注:可以根据参数配置,进行个性化设置。
6)运行代码即可

你可能感兴趣的:(JavaScript,jquery,插件)