简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  jQuery插件slides实现无缝轮播图特效_jquery

jQuery插件slides实现无缝轮播图特效_jquery

WBOY
WBOYOriginal
2016-05-16 16:03:191578Durchsuche

初始化插件：

slides是一款基于jQuery无缝轮播图插件,支持图内元素动画，可以自定义动画类型

$(".slideInner").slide({
slideContainer: $('.slideInner a'),
effect: 'easeOutCirc',//动画类型
autoRunTime: 5000,//自动轮播时间
slideSpeed: 1000,//速度
nav: true,//是否显示左右导航
autoRun: true,//是否自动滚动
prevBtn: $('a.prev'),//左按钮
nextBtn: $('a.next')//右按钮
});

兼容性： ie8+、google、firefox、360、QQ、欧朋、safi

html实例：

slides默认会为个个滑块里面的类名为moveElem的元素添加上动画的效果 元素上的rel属性则是设置对应的 延迟执行时间和动画类型两个属性 每个滑块内可同时添加多个元素

<body>
  <div class="slides">
    <div class="slideInner">
      <a href="#" style="background: url(img/slide1.jpg) no-repeat;">
        <div class="moveElem img1" rel="0,easeInOutExpo">
          <img  src="img/slide1p1.png" / alt="jQuery插件slides实现无缝轮播图特效_jquery" >
        </div>
        <div class="moveElem img2" rel="150,easeInOutExpo">
          <img  src="img/slide1p2.png" / alt="jQuery插件slides实现无缝轮播图特效_jquery" >
        </div>
      </a>
      <a href="#" style="background: url(img/slide2.jpg) no-repeat">
        <div class="moveElem img1" rel="0,easeInOutExpo">
          <img  src="img/slide2p1.png" / alt="jQuery插件slides实现无缝轮播图特效_jquery" >
        </div>
      </a>
      <a href="#" class="slide3" style="background: url(img/slide3.jpg) no-repeat;">
        <div class="moveElem img1" rel="0,easeInOutExpo">
          <img  src="img/slide3p1.png" / alt="jQuery插件slides实现无缝轮播图特效_jquery" >
        </div>
        <div class="moveElem img2" rel="150,easeInOutExpo">
          <img  src="img/slide3p2.png" / alt="jQuery插件slides实现无缝轮播图特效_jquery" >
        </div>
        <div class="moveElem img3" rel="300,easeInOutExpo">
          <img  src="img/slide3p3.png" / alt="jQuery插件slides实现无缝轮播图特效_jquery" >
        </div>
      </a>
      <a href="#" style="background: rgb(113, 209, 231);">
        <div class="moveElem img1" rel="0,easeInOutExpo">
          <img  src="img/slide1p1.png" / alt="jQuery插件slides实现无缝轮播图特效_jquery" >
        </div>
        <div class="moveElem img2" rel="150,easeInOutExpo">
          <img  src="img/slide1p2.png" / alt="jQuery插件slides实现无缝轮播图特效_jquery" >
        </div>
      </a>
      <a href="#" style="background: rgb(178, 44, 44);">
        <div class="moveElem img1" rel="0,easeInOutExpo">
          <img  src="img/slide1p1.png" / alt="jQuery插件slides实现无缝轮播图特效_jquery" >
        </div>
        <div class="moveElem img2" rel="150,easeInOutExpo">
          <img  src="img/slide1p2.png" / alt="jQuery插件slides实现无缝轮播图特效_jquery" >
        </div>
      </a>

    </div>
    <div class="nav">
      <a class="prev" href="#"></a>
      <a class="next" href="#"></a>
    </div>
  </div>
</body>

Github地址：https://github.com/727712787/jquery.slides 下载地址：https://github.com/727712787/jquery.slides/archive/master.zip

以上所述就是本文的全部内容了，希望大家能够喜欢。

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：完美兼容多浏览器的js判断图片路径代码汇总_javascript技巧Nächster Artikel：JavaScript控制网页平滑滚动到指定元素位置的方法_javascript技巧

In Verbindung stehende Artikel

Mehr sehen