web-dev-qa-db-ja.com

jqueryシンプルイメージスライドショーチュートリアル

左と右のナビゲーションボタンなしで（プラグインなしで）初心者向けの簡単なjqueryイメージスライドショーチュートリアルをどこで見つけることができますか？

ありがとうございました。

jqueryimageslideshow
34
vaanipala

これは、私がネット上で見つけた最も簡単な例です。 http://jonraasch.com/blog/a-simple-jquery-slideshow

この例を要約すると、これはスライドショーを行うために必要なものです。

HTML：

<div id="slideshow">
    <img src="img1.jpg" style="position:absolute;" class="active" />
    <img src="img2.jpg" style="position:absolute;" />
    <img src="img3.jpg" style="position:absolute;" />
</div>

絶対位置は、各画像を他の画像の上に重ねるために使用されます。

CSS

<style type="text/css">
    .active{
        z-index:99;
    }
</style>

Class = "active"の画像は他の画像の上に表示され、class = activeプロパティは次のJqueryコードで変更されます。

<script>
    function slideSwitch() {
        var $active = $('div#slideshow IMG.active');
        var $next = $active.next();    

        $next.addClass('active');

        $active.removeClass('active');
    }

    $(function() {
        setInterval( "slideSwitch()", 5000 );
    });
</script>

スライドショーをさらに進めたい場合は、上記のリンク（アニメーション化された不透明度の変更-2nの例を参照）または他のより複雑なスライドショーのチュートリアルをご覧になることをお勧めします。

50
zurfyx

これらのgr8の回答をマークしていない理由を私は知らない...ここにあなたと他の誰もが遷移速度と一時停止時間を制御することを可能にする別のオプションがある

JAVASCRIPT

$(function () {

    /* SET PARAMETERS */
    var change_img_time     = 5000; 
    var transition_speed    = 100;

    var simple_slideshow    = $("#exampleSlider"),
        listItems           = simple_slideshow.children('li'),
        listLen             = listItems.length,
        i                   = 0,

        changeList = function () {

            listItems.eq(i).fadeOut(transition_speed, function () {
                i += 1;
                if (i === listLen) {
                    i = 0;
                }
                listItems.eq(i).fadeIn(transition_speed);
            });

        };

    listItems.not(':first').hide();
    setInterval(changeList, change_img_time);

});

。

HTML

<ul id="exampleSlider">
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x250" alt="" /></li>
</ul>

。
これをシンプルにすれば、簡単に反応しやすくなります
訪問するのがベスト： DEMO

。
特別なトランジションFX（まだレスポンシブ）が必要な場合-これをチェックしてください
特別なFXによるデモ

18
Sagive SEO

Michael Sorianoのチュートリアルの私の適応です。以下または JSBin を参照してください。

$(function() {
  var theImage = $('ul#ss li img');
  var theWidth = theImage.width();
  //wrap into mother div
  $('ul#ss').wrap('<div id="mother" />');
  //assign height width and overflow hidden to mother
  $('#mother').css({
    width: function() {
      return theWidth;
    },
    height: function() {
      return theImage.height();
    },
    position: 'relative',
    overflow: 'hidden'
  });
  //get total of image sizes and set as width for ul 
  var totalWidth = theImage.length * theWidth;
  $('ul').css({
    width: function() {
      return totalWidth;
    }
  });

  var ss_timer = setInterval(function() {
    ss_next();
  }, 3000);

  function ss_next() {
    var a = $(".active");
    a.removeClass('active');

    if (a.hasClass('last')) {
      //last element -- loop
      a.parent('ul').animate({
        "margin-left": (0)
      }, 1000);
      a.siblings(":first").addClass('active');
    } else {
      a.parent('ul').animate({
        "margin-left": (-(a.index() + 1) * theWidth)
      }, 1000);
      a.next().addClass('active');
    }
  }

  // Cancel slideshow and move next manually on click
  $('ul#ss li img').on('click', function() {
    clearInterval(ss_timer);
    ss_next();
  });

});
* {
  margin: 0;
  padding: 0;
}
#ss {
  list-style: none;
}
#ss li {
  float: left;
}
#ss img {
  width: 200px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="ss">
  <li class="active">
    <img src="http://leemark.github.io/better-simple-slideshow/demo/img/colorado-colors.jpg">
  </li>
  <li>
    <img src="http://leemark.github.io/better-simple-slideshow/demo/img/monte-Vista.jpg">
  </li>
  <li class="last">
    <img src="http://leemark.github.io/better-simple-slideshow/demo/img/colorado.jpg">
  </li>
</ul>
4
Justin

これはあなたが興味を持っているもののように見えます

http://www.designchemical.com/blog/index.php/jquery/jquery-image-swap-gallery/

3
Schokea