可缩放滑动幻灯片-JQUERY IMAGE SCALE CAROUSEL

jQuery Image Scale Carousel 和其他幻灯片不同的是，我们只需要改变外部容器的大小就可以将整个幻灯片调整到我们想要的大小以适应自己的页面，同时幻灯片中的任何元素都能很好地适应而不会发生变形。

使用步骤

1、引入以下的js和css文件

<link rel="stylesheet" href="lib.css" type="text/css" media="screen"charset="utf-8">
<link rel="stylesheet" href="jQuery.isc/jQuery.isc.css" type="text/css"media="screen" charset="utf-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script src="jQuery.isc/jquery-image-scale-carousel.js" type="text/javascript"charset="utf-8"></script>

2、在head标签中加入以下js代码，用来设置一个将要显示的图片数组，可以是本地图片和网络图片的url地址，接着就将该图片数组交给插件处理了。

<script>
  var carousel_images = [
    "images/1.jpg", // Example of a local image
    "http://farm4.static.flickr.com/3328/3575375564_79ab90dca8_b.jpg",
    "http://farm4.static.flickr.com/3163/2505235306_b456603cf3_b.jpg",
    "http://farm4.static.flickr.com/3235/2925947121_8b1f95c95b_b.jpg",
    "http://farm3.static.flickr.com/2769/4481220450_91b0aa9e99_b.jpg",
    "http://farm1.static.flickr.com/118/299048945_faba1a6a4b_b.jpg",
    "http://farm4.static.flickr.com/3089/2335224771_cec36d33a6_o.jpg"
  ];
 
  $(window).load(function() {
 
    $("#photo_container").isc({
        imgArray: carousel_images
    });
 
  });
 
</script>

3、在body标签中加入以下格式的html代码，就是提供一个div的容器，里面的内容为空

参数配置

该插件有3个参数：

 $(window).load(function() {
      $("#photo_container").isc({
	     imgArray: carousel_images,//设置要播放的图片数组
	     autoplay: true,//是否自动播放，默认为 false
	     autoplayTimer: 5000 // 5 seconds.//自动播放的时间间隔毫秒数
	});	
});

我们一般情况下是希望幻灯片自动播放的，所以只需要将 autoplay 参数设置为 true 即可。
自定义幻灯片大小
前面我已经说过，jQuery Image Scale Carousel 的一个优点就是只需要改变外部容器的大小就可以重新准确地定位幻灯片的大小。那么我们怎么去修改外部容器的大小呢？
其实很简单，打开 lib.css 文件（示例包的根目录下）
找到里面的这行样式代码：

 #photo_container {
	width: 960px;
	height: 400px;
	margin: auto;
	background-color: #000;
}

接下来我们只需要修改其中的 width 和 height 样式值即可。

PREVIOUS:
NEXT:
通用代码高亮插件-SYNTAXHIGHLIGHTER
模拟linux桌面的WEB界面-JQUERY DESKTOP