欢迎光临一流素材网,免积分免费素材下载!
AD

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

所属栏目:轮播图/幻灯片更新时间:2016-10-17原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明

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/357537556479ab90dca8_b.jpg",
    "http://farm4.static.flickr.com/3163/2505235306_b456603cf3_b.jpg",
    "http://farm4.static.flickr.com/3235/29259471218b1f95c95b_b.jpg",
    "http://farm3.static.flickr.com/2769/448122045091b0aa9e99_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;
}



具体效果请看演示,一流资源网推荐下载。

标签:
代码下载
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1jquery手机端响应式banner图片滚动切换效果

2兼容触屏手机浏览的JS全屏焦点图代码

3jQuery touchSlider全屏图片轮播幻灯焦点图代码

4jquery灯箱画廊插件lightgallery

5jquery轮播焦点图

6js卡片式图片叠加滚动切换代码

7带左右箭头滑动焦点图幻灯片jQuery特效代码

8jquery旋转木马插件SLICK

93D效果图片轮播效果代码

10jQ轻量级触摸响应滑块插件JQuery lightSlideruery轮播图插件movingboxes.js

最新更新的

1jQuery响应式触屏图片左右滚动代码owl.carousel

2轻量级响应式jQuery轮播图/幻灯片插件-lightslider

3移动端滑动JS响应式轮播图插件

4jQuery倾斜图片切换滚动焦点图幻灯片代码

5jQuery版仿淘宝商城天猫首页多格焦点图效果

6易迅网竖排多格jquery焦点图代码

7jQ索引按钮+缩略图双重切换

8兼容触屏手机浏览的JS全屏焦点图代码

9鼠标滑过+自动播放jQ全屏焦点图代码

10Diapo轮播图-幻灯片插件