挑战1：使用jQuery生成水平图片幻灯效果-CSDN博客

本文链接：https://blog.csdn.net/zeyu1021/article/details/44178277

在http://www.gbtags.com/gb/gbtutorials/478.htm发现的：

<!doctype html>
<html>
  <head>
    <style type="text/css">

      .slider {
        width: 542px;
        overflow: hidden;
      }

      .slider ul {
        width: 10000px;
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .slider li {
        display: inline-block;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="slider">
      <ul>
        <li><img src="http://www.gbtags.com/gb/networks/uploads/afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags1.jpg" alt="image"></li>
        <li><img src="http://www.gbtags.com/gb/networks/uploads/afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags2.jpg" alt="image"></li>
        <li><img src="http://www.gbtags.com/gb/networks/uploads/afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags3.jpg" alt="image"></li>
        <li><img src="http://www.gbtags.com/gb/networks/uploads/afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags4.jpg" alt="image"></li>
      </ul>
    </div>
     
    <div id="slider-nav">
      <button data-direction="prev"> «　上一个</button>
      <button data-direction="next">下一个 »</button>
    </div>
    <script type='text/javascript' src="http://cdn.gbtags.com/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      (function(){
        var Slider = function(){
          var imageWidth = $(".slider img:eq(0)").width();
          var imageLength = $(".slider img").size();
          var $slider = $(".slider ul");
          var index = 0;

          var slideImage = function(index){
            var margin = -1 * imageWidth * index;
            $slider.animate({"margin-left": margin});
          }

          this.prev = function(){
            if(index == 0) {
              index = imageLength;
            }

            slideImage(--index);
          }

          this.next = function(){
            if(index + 1 == imageLength) {
              index = -1;
            }

            slideImage(++index)
          }
        };

        var slider = new Slider();

        $("#slider-nav button").click(function(){
          if($(this).data("direction") == "prev") {
            slider.prev();
          } else {
            slider.next();
          }
        });
      })(jQuery);
    </script>
  </body>
</html>