首页>>Jquery图片>>一个支持各种slide效果的js插件 包括一个/多个项目滚动,自动播放(2014-08-25)

一个支持各种slide效果的js插件 包括一个/多个项目滚动,自动播放

 一次滚动指定个数，一个项目，延迟加载，自动滚动等

一个支持各种slide效果的js插件 包括一个/多个项目滚动,自动播放
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="slider single-item">  
  2.                     <div><h3>1</h3></div>  
  3.                     <div><h3>2</h3></div>  
  4.                     <div><h3>3</h3></div>  
  5.                     <div><h3>4</h3></div>  
  6.                     <div><h3>5</h3></div>  
  7.                     <div><h3>6</h3></div>  
  8.                 </div>  

 

JavaScript Code
  1. $(document).ready(function() {  
  2.     $('.single-item').slick({  
  3.         dots: true,  
  4.         infinite: true,  
  5.         speed: 300,  
  6.         slidesToShow: 1,  
  7.         slidesToScroll: 1  
  8.     });  
  9.     $('.multiple-items').slick({  
  10.         dots: true,  
  11.         infinite: true,  
  12.         speed: 300,  
  13.         slidesToShow: 3,  
  14.         slidesToScroll: 3  
  15.     });  
  16.     $('.one-time').slick({  
  17.         dots: true,  
  18.         infinite: false,  
  19.         placeholders: false,  
  20.         speed: 300,  
  21.         slidesToShow: 5,  
  22.         touchMove: false,  
  23.         slidesToScroll: 1  
  24.     });  
  25.     $('.uneven').slick({  
  26.         dots: true,  
  27.         infinite: true,  
  28.         speed: 300,  
  29.         slidesToShow: 4,  
  30.         slidesToScroll: 4  
  31.     });  
  32.     $('.responsive').slick({  
  33.         dots: true,  
  34.         infinite: false,  
  35.         speed: 300,  
  36.         slidesToShow: 4,  
  37.         slidesToScroll: 4,  
  38.         responsive: [{  
  39.             breakpoint: 1024,  
  40.             settings: {  
  41.                 slidesToShow: 3,  
  42.                 slidesToScroll: 3,  
  43.                 infinite: true,  
  44.                 dots: true  
  45.             }  
  46.         }, {  
  47.             breakpoint: 600,  
  48.             settings: {  
  49.                 slidesToShow: 2,  
  50.                 slidesToScroll: 2  
  51.             }  
  52.         }, {  
  53.             breakpoint: 480,  
  54.             settings: {  
  55.                 slidesToShow: 1,  
  56.                 slidesToScroll: 1  
  57.             }  
  58.         }]  
  59.     });  
  60.   
  61.     $('.center').slick({  
  62.         centerMode: true,  
  63.         centerPadding: '60px',  
  64.         slidesToShow: 3,  
  65.         responsive: [{  
  66.             breakpoint: 768,  
  67.             settings: {  
  68.                 arrows: false,  
  69.                 centerMode: true,  
  70.                 centerPadding: '40px',  
  71.                 slidesToShow: 3  
  72.             }  
  73.         }, {  
  74.             breakpoint: 480,  
  75.             settings: {  
  76.                 arrows: false,  
  77.                 centerMode: true,  
  78.                 centerPadding: '40px',  
  79.                 slidesToShow: 1  
  80.             }  
  81.         }]  
  82.     });  
  83.     $('.lazy').slick({  
  84.         lazyLoad: 'ondemand',  
  85.         slidesToShow: 3,  
  86.         slidesToScroll: 1  
  87.     });  
  88.     $('.autoplay').slick({  
  89.         dots: true,  
  90.         infinite: true,  
  91.         speed: 300,  
  92.         slidesToShow: 3,  
  93.         slidesToScroll: 1,  
  94.         autoplay: true,  
  95.         autoplaySpeed: 2000  
  96.     });  
  97.   
  98.     $('.fade').slick({  
  99.         dots: true,  
  100.         infinite: true,  
  101.         speed: 500,  
  102.         fade: true,  
  103.         slide: 'div',  
  104.         cssEase: 'linear'  
  105.     });  
  106.   
  107.     $('.add-remove').slick({  
  108.         dots: true,  
  109.         slidesToShow: 3,  
  110.         slidesToScroll: 3  
  111.     });  
  112.     var slideIndex = 1;  
  113.     $('.js-add-slide').on('click', function() {  
  114.         slideIndex++;  
  115.         $('.add-remove').slickAdd('<div><h3>' + slideIndex + '</h3></div>');  
  116.     });  
  117.   
  118.     $('.js-remove-slide').on('click', function() {  
  119.         $('.add-remove').slickRemove(slideIndex - 1);  
  120.         if (slideIndex !== 0){  
  121.             slideIndex--;  
  122.         }   
  123.     });  
  124.   
  125.     $('.filtering').slick({  
  126.         dots: true,  
  127.         slidesToShow: 4,  
  128.         slidesToScroll: 4  
  129.     });  
  130.     var filtered = false;  
  131.     $('.js-filter').on('click', function() {  
  132.         if (filtered === false) {  
  133.             $('.filtering').slickFilter(':even');  
  134.             $(this).text('Unfilter Slides');  
  135.             filtered = true;  
  136.         } else {  
  137.             $('.filtering').slickUnfilter();  
  138.             $(this).text('Filter Slides');  
  139.             filtered = false;  
  140.         }  
  141.     });  
  142.   
  143.     $(window).on('scroll', function() {  
  144.         if ($(window).scrollTop() > 166) {  
  145.             $('.fixed-header').show();  
  146.         } else {  
  147.             $('.fixed-header').hide();  
  148.         }  
  149.     });  
  150.   
  151.     $('ul.nav a').on('click', function(event) {  
  152.         event.preventDefault();  
  153.         var targetID = $(this).attr('href');  
  154.         var targetST = $(targetID).offset().top - 48;  
  155.         $('body, html').animate({  
  156.             scrollTop: targetST + 'px'  
  157.         }, 300);  
  158.     });  
  159.   
  160. });  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_411.html