在线观看亚洲精品视频,中文字幕日韩一级,成人爽a毛片一区二区免费

導(dǎo)航首頁(yè) ? 技術(shù)教程 ? jQuery旋轉(zhuǎn)木馬式幻燈片輪播特效

全站頭部文字我要出現(xiàn)在這里

jQuery旋轉(zhuǎn)木馬式幻燈片輪播特效 639 2024-03-18

本文為大家分享anoSlide是一款超輕型響應(yīng)式j(luò)Query旋轉(zhuǎn)木馬幻燈片插件，它適合在PC端與移動(dòng)端實(shí)現(xiàn)旋轉(zhuǎn)木馬幻燈片特效。具體內(nèi)容如下

特點(diǎn)

響應(yīng)式——適應(yīng)任何視窗的寬度混合內(nèi)容不需要CSS 輕量級(jí)(< 8 kb未壓縮) 基于jQuery構(gòu)建集成圖像預(yù)加載回調(diào)函數(shù)——onConstruct onStart,onEnd 多個(gè)可配置選項(xiàng) 延遲加載圖片自動(dòng)旋轉(zhuǎn) 容易擴(kuò)展

jquery實(shí)例：anoSlide使用方法

引入核心文件

<script src="http://www.gimoo.net/t/1904/js/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1904/js/jquery.anoslide.js"></script>

寫(xiě)入基礎(chǔ)CSS樣式，可根據(jù)項(xiàng)目完全自定義

.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旋轉(zhuǎn)木馬anoSlide混合顯示

查看圖片

JS

$('.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

$('.carousel[data-mixed] ul').anoSlide(
{
  items: 5,
  speed: 500,
  prev: 'a.prev[data-prev]',
  next: 'a.next[data-next]',
  lazy: true,
  delay: 100})

HTML

<div class="carousel" data-mixed=""> <a class="prev" data-prev=""></a>
 <ul>
  <li>
   <div class="wrap">
    <figure><img data-src="http://www.gimoo.net/t/1904/images/slides/thumbnails/1.jpg" src="http://www.gimoo.net/t/1904/images/slides/1.jpg"></figure>
   </div>
  </li>
  <li>
   <div class="wrap">
    <figure><img data-src="http://www.gimoo.net/t/1904/images/slides/thumbnails/2.jpg" src="http://www.gimoo.net/t/1904/images/slides/2.jpg"></figure>
   </div>
  </li>
  <li>
   <div class="wrap">
    <figure><img data-src="http://www.gimoo.net/t/1904/images/slides/thumbnails/3.jpg" src="http://www.gimoo.net/t/1904/images/slides/3.jpg"></figure>
   </div>
  </li>
  <li>
   <div class="wrap">
    <figure><img data-src="http://www.gimoo.net/t/1904/images/slides/thumbnails/4.jpg" src="http://www.gimoo.net/t/1904/images/slides/4.jpg"></figure>
   </div>
  </li>
  <li>
   <div class="wrap">
    <figure><img data-src="http://www.gimoo.net/t/1904/images/slides/thumbnails/5.jpg" src="http://www.gimoo.net/t/1904/images/slides/5.jpg"></figure>
   </div>
  </li>
  <li>
   <div class="wrap">
    <figure><img data-src="http://www.gimoo.net/t/1904/images/slides/thumbnails/6.jpg" src="http://www.gimoo.net/t/1904/images/slides/6.jpg"></figure>
   </div>
  </li>
  <li>
   <div class="wrap">
    <figure><img data-src="http://www.gimoo.net/t/1904/images/slides/thumbnails/7.jpg" src="http://www.gimoo.net/t/1904/images/slides/7.jpg"></figure>
   </div>
  </li>
 </ul>
 <a class="next" data-next=""></a> </div>

jquery旋轉(zhuǎn)木馬anoSlide分頁(yè)

查看圖片

js

$('.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

<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標(biāo)題

查看圖片

js

$('.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

<div class="carousel captions">
  <a class="prev" data-prev-caption></a>
  <ul>
    <li data-caption="Adding captions is really easy">
      <figure><img data-src="http://www.gimoo.net/t/1904/images/slides/1.jpg" src="http://www.gimoo.net/t/1904/5cb17ae1aed70.html" /></figure>
    </li>
    <li data-caption="anoSlide's callback functions can be used for adding Captions">
      <figure><img data-src="http://www.gimoo.net/t/1904/images/slides/2.jpg" src="http://www.gimoo.net/t/1904/5cb17ae1aed70.html" /></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="http://www.gimoo.net/t/1904/images/slides/3.jpg" src="http://www.gimoo.net/t/1904/5cb17ae1aed70.html" /></figure>
    </li>
    <li>
      <figure><img data-src="http://www.gimoo.net/t/1904/images/slides/4.jpg" src="http://www.gimoo.net/t/1904/5cb17ae1aed70.html" /></figure>
    </li>
    <li>
      <figure><img data-src="http://www.gimoo.net/t/1904/images/slides/5.jpg" src="http://www.gimoo.net/t/1904/5cb17ae1aed70.html" /></figure>
    </li>
    <li>
      <figure><img data-src="http://www.gimoo.net/t/1904/images/slides/6.jpg" src="http://www.gimoo.net/t/1904/5cb17ae1aed70.html" /></figure>
    </li>
    <li>
      <figure><img data-src="http://www.gimoo.net/t/1904/images/slides/7.jpg" src="http://www.gimoo.net/t/1904/5cb17ae1aed70.html" /></figure>
    </li>
  </ul>
  <a class="next" data-next-caption></a>
  <a class="badge"></a>
</div>

以上就是關(guān)于jQuery旋轉(zhuǎn)木馬式幻燈片輪播特效，希望對(duì)大家的學(xué)習(xí)有所幫助。

#免責(zé)聲明#

本站[綠夏技術(shù)導(dǎo)航]提供的一切軟件、教程和內(nèi)容信息僅限用于學(xué)習(xí)和研究目的；不得將上述內(nèi)容用于商業(yè)或者非法用途，否則，一切后果請(qǐng)用戶自負(fù)。本站信息來(lái)自網(wǎng)絡(luò)收集整理，版權(quán)爭(zhēng)議與本站無(wú)關(guān)。您必須在下載后的24個(gè)小時(shí)之內(nèi)，從您的電腦或手機(jī)中徹底刪除上述內(nèi)容。如果您喜歡該程序或內(nèi)容，請(qǐng)支持正版，購(gòu)買(mǎi)注冊(cè)，得到更好的正版服務(wù)。我們非常重視版權(quán)問(wèn)題，如有侵權(quán)請(qǐng)郵件[admin@lxwl520.com]與我們聯(lián)系進(jìn)行刪除處理。敬請(qǐng)諒解！

文章分類(lèi)