首頁 > web前端 > js教程 > jQuery旋轉木馬式投影片輪播特效_jquery

jQuery旋轉木馬式投影片輪播特效_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-05-16 15:27:39
原創
1984 人瀏覽過

本文為大家分享anoSlide是一款超輕量響應式jQuery旋轉木馬幻燈片插件,它適合在PC端與行動端實現旋轉木馬幻燈片特效。具體內容如下

特徵

  • 響應式-適應任何視窗的寬度
  • 混合內容
  • 不需要CSS
  • 輕量級(
  • 基於jQuery建置
  • 整合影像預先載入
  • 回呼函數-onConstruct onStart,onEnd
  • 多個可設定選項
  • 延遲載入圖片
  • 自動旋轉
  • 容易擴充

jquery實例:anoSlide使用方法

引入核心檔案

1

2

<script src="js/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.anoslide.js"></script>

登入後複製

寫入基礎CSS樣式,可依項目完全自訂

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

.carousel {

  position: relative;

  min-height: 20px;

  height: auto !important;

  height: 20px;

  background: url(images/loader.gif) center center no-repeat;

}

.carousel .next, .carousel .prev {

  display: none;

  width: 56px;

  height: 56px;

  position: absolute;

  bottom: 20px;

  left: 50%;

  margin-top: -28px;

  z-index: 9999;

  cursor: pointer;

}

.carousel .prev {

  margin-left: -60px;

  background: url(images/prev.png) 0 0 no-repeat;

}

.carousel .next {

  margin-right: -60px;

  background: url(images/next.png) 0 0 no-repeat;

}

.carousel li {

  display: none;

}

.carousel li img {

  width: 100%;

  height: auto;

}

.paging {

  position: absolute;

  z-index: 9998;

}

.paging > a {

  display: block;

  cursor: pointer;

  width: 40px;

  height: 40px;

  float: left;

  background: url(images/dots.png) 0px -40px no-repeat;

}

.paging > a:hover, .paging > a.current {

  background: url(images/dots.png) 0px 0px no-repeat;

}

.badge {

  display: block;

  width: 104px;

  height: 104px;

  background: url(images/badge.png) 0 0 no-repeat;

  z-index: 9000;

  position: absolute;

  top: -3px;

  left: -3px;

}

img {

  -webkit-user-select: none; /* Chrome all / Safari all */

  -moz-user-select: none;   /* Firefox all */

  -ms-user-select: none;   /* IE 10+ */

  -o-user-select: none;

  user-select: none;

}

登入後複製

jquery旋轉木馬anoSlide混合顯示


JS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

$('.carousel ul').anoSlide(

{

  items: 1,

  speed: 500,

  prev: 'a.prev',

  next: 'a.next',

  lazy: true,

  auto: 4000

})

html

<div class="carousel">

  <a class="prev"></a>

  <ul>

    <li>Content goes here</li>

    <li>Content goes here</li>

    <li>Content goes here</li>

  </ul>

  <a class="next"></a>

</div>

登入後複製

jquery幻燈片anoSlide多圖

JS

1

2

3

4

5

6

7

8

$('.carousel[data-mixed] ul').anoSlide(

{

  items: 5,

  speed: 500,

  prev: 'a.prev[data-prev]',

  next: 'a.next[data-next]',

  lazy: true,

  delay: 100})

登入後複製

HTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

<div class="carousel" data-mixed=""> <a class="prev" data-prev=""></a>

 <ul>

  <li>

   <div class="wrap">

    <figure><img data-src="images/slides/thumbnails/1.jpg" src="images/slides/1.jpg"></figure>

   </div>

  </li>

  <li>

   <div class="wrap">

    <figure><img data-src="images/slides/thumbnails/2.jpg" src="images/slides/2.jpg"></figure>

   </div>

  </li>

  <li>

   <div class="wrap">

    <figure><img data-src="images/slides/thumbnails/3.jpg" src="images/slides/3.jpg"></figure>

   </div>

  </li>

  <li>

   <div class="wrap">

    <figure><img data-src="images/slides/thumbnails/4.jpg" src="images/slides/4.jpg"></figure>

   </div>

  </li>

  <li>

   <div class="wrap">

    <figure><img data-src="images/slides/thumbnails/5.jpg" src="images/slides/5.jpg"></figure>

   </div>

  </li>

  <li>

   <div class="wrap">

    <figure><img data-src="images/slides/thumbnails/6.jpg" src="images/slides/6.jpg"></figure>

   </div>

  </li>

  <li>

   <div class="wrap">

    <figure><img data-src="images/slides/thumbnails/7.jpg" src="images/slides/7.jpg"></figure>

   </div>

  </li>

 </ul>

 <a class="next" data-next=""></a> </div>

登入後複製

jquery旋轉木馬anoSlide分頁

js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

$('.carousel ul').anoSlide(

{

  items: 1,

  speed: 500,

  prev: 'a.prev[data-prev-paging]',

  next: 'a.next[data-next-paging]',

  lazy: true,

  onConstruct: function(instance)

  {

    var paging = $('<div/>').addClass('paging fix').css(

    {

      position: 'absolute',

      top: 1,

      left:50 + '%',

      width: instance.slides.length * 40,

      marginLeft: -(instance.slides.length * 40)/2

    })

      

    /* Build paging */

    for (i = 0, l = instance.slides.length; i < l; i++)

    {

      var a = $('<a/>').data('index', i).appendTo(paging).on(

      {

        click: function()

        {

          instance.stop().go($(this).data('index'));

        }

      });

        

      if (i == instance.current)

      {

        a.addClass('current');

      }

    }

  

    instance.element.parent().append(paging);

  },

  onStart: function(ui)

  {

    var paging = $('.paging');

      

    paging.find('a').eq(ui.instance.current).addClass('current').siblings().removeClass('current');

  }

})

登入後複製

html

1

2

3

4

5

6

7

8

9

<div class="carousel">

  <a class="prev"></a>

  <ul>

    <li>Content goes here</li>

    <li>Content goes here</li>

    <li>Content goes here</li>

  </ul>

  <a class="next"></a>

</div>

登入後複製

jquery幻燈片anoSlide標題

js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

$('.carousel.captions ul').anoSlide(

{

  items: 1,

  speed: 500,

  prev: 'a.prev[data-prev-caption]',

  next: 'a.next[data-next-caption]',

  lazy: true,

  onStart: function(ui)

  {

    /* Remove existing caption in slide */

    ui.slide.element.find('.caption').remove();

  },

  onEnd: function(ui)

  {

    /* Get caption content */

    var content = ui.slide.element.data('caption');

      

    /* Create a caption wrap element */

    var caption = $('<div/>').addClass('caption').css(

    {

      position: 'absolute',

      background: 'rgb(0,0,0)',

      color: 'rgb(255,255,255)',

      textShadow: 'rgb(0,0,0) -1px -1px',

      opacity: 0.5,

      top: -100,

      left: 50,

      padding: 20,

      webkitBorderRadius: 5,

      mozBorderRadius: 5,

      borderRadius: 5

    }).html(content);

      

    /* Append caption to slide and animate it. Animation is really up to you. */

    caption.appendTo(ui.slide.element).animate(

    {

      top:50

    });

  }

})

登入後複製

html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<div class="carousel captions">

  <a class="prev" data-prev-caption></a>

  <ul>

    <li data-caption="Adding captions is really easy">

      <figure><img data-src="images/slides/1.jpg" src="" /></figure>

    </li>

    <li data-caption="anoSlide's callback functions can be used for adding Captions">

      <figure><img data-src="images/slides/2.jpg" src="" /></figure>

    </li>

    <li data-caption="<span style='color:#00f0ff'>HTML - No problem</span><br /><br />It's really up to You to decide whether to use HTML or not.">

      <figure><img data-src="images/slides/3.jpg" src="" /></figure>

    </li>

    <li>

      <figure><img data-src="images/slides/4.jpg" src="" /></figure>

    </li>

    <li>

      <figure><img data-src="images/slides/5.jpg" src="" /></figure>

    </li>

    <li>

      <figure><img data-src="images/slides/6.jpg" src="" /></figure>

    </li>

    <li>

      <figure><img data-src="images/slides/7.jpg" src="" /></figure>

    </li>

  </ul>

  <a class="next" data-next-caption></a>

  <a class="badge"></a>

</div>

登入後複製

以上就是關於jQuery旋轉木馬式幻燈片輪播特效,希望對大家的學習有所幫助。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板