向jquery滑块添加功能

时间：2017-04-11 14:19:31

标签： javascript jquery html5 css3

我收到了以下代码：

＆＃13;
＆＃13; 
$(document).ready(function(){

    var $item_width = $('.item').width();
    var $items_count = $('.item').length;
    var $vutreshen_container_shirina = $item_width * $items_count;
    $('.inner-box').css('width', $vutreshen_container_shirina);

   var previous_button = $(".previous");
   var next_button = $(".next");

    //Next

    function next() {
        $(next_button).on('click', function (event) {
            event.preventDefault();
            var current_margin = $('.inner-box').css('margin-left').replace(/[^-\d.]/g, '');
            var inner_container_offset = 300;
            var parse_current = parseInt(current_margin);

            var totalAmount = parse_current + inner_container_offset;
            if(totalAmount >= 0) {
                $('.inner-box').css('margin-left', '-=' + inner_container_offset + 'px');
            }
        });
    };
    //Next
    next();

    function previous() {
        $(previous_button).on('click', function (event) {
            event.preventDefault();
            var current_margin = $('.inner-box').css('margin-left').replace(/[^-\d.]/g, '');
            var inner_container_offset = 300;
            var parse_current = parseInt(current_margin);

            var totalAmount = parse_current + inner_container_offset;
            if (totalAmount <= 0) {
                $('.inner-box').css('margin-left', '+=' + inner_container_offset + 'px');
            }
        });
    };
    //Prev
    previous();

});
＆＃13; 
body{
    text-align: center;
}

.outer-box{
    overflow: hidden;
    display: inline-block;
    width: 300px;
}

img{
    width:  100%;
    height: 100%;
}

.inner-box{
    display: inline-block;
}

.item{
    float: left;
    width: 300px;
}

.previous{
    margin-right: 10px;
}

.next{
    margin-left: 25px;
}

.previous, .next{
    position: relative;
    left: 210px;
    top: 20px;
    margin-bottom: 50px;
}
＆＃13; 
<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>

    <button type="button" class="previous">Previous</button>
    <button type="button" class="next">Next</button>

    <div class="outer-box">
        <div class="inner-box">
            <div class="item1 item">
                <div class="inner_item">
                    <img src="https://static.comicvine.com/uploads/original/14/146991/5041526-7374741911-grizzl.jpeg" alt="animal-gallery">
                    <h3>Giraffe</h3>
                    <p>The Giraffe (giraffe) is a genus of African even-toed ungulate mammals.
                    </p>
                </div>
            </div>

            <div class="item2 item">
                <div class="inner_item">
                    <img src="http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/Q-Z/sloth-beach-upside-down.jpg.adapt.945.1.jpg" alt="animal-gallery">
                    <h3>Sloth</h3>
                    <p>Sloths are mammals classified in the families Megalonychidae (two-toed sloths). </p>
                </div>
            </div>

            <div class="item3 item">
            <div class="inner_item">
                <img src="http://animals.sandiegozoo.org/sites/default/files/2016-12/Wolf_ZN.jpg" alt="animal-gallery">
                <h3>Wolf</h3>
                <p>The gray wolf or grey wolf (Canis lupus), also known as the timber wolf or wes.</p>
            </div>
        </div>

            <div class="item4 item">
                <div class="inner_item">
                    <img src="http://animals.sandiegozoo.org/sites/default/files/2016-12/Wolf_ZN.jpg" alt="animal-gallery">
                    <h3>Wolf</h3>
                    <p>The gray wolf or grey wolf (Canis lupus), also known as the timber wolf or wes.</p>
                </div>
            </div>

            <div class="item5 item">
                <div class="inner_item">
                    <img src="http://animals.sandiegozoo.org/sites/default/files/2016-12/Wolf_ZN.jpg" alt="animal-gallery">
                    <h3>Wolf</h3>
                    <p>The gray wolf or grey wolf (Canis lupus), also known as the timber wolf or wes.</p>
                </div>
            </div>
        </div>
    </div>


    <script src="https://code.jquery.com/jquery-3.2.1.js"
            integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
            crossorigin="anonymous">

    </script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='https://www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
        </script>
    </body>
</html>
＆＃13;
＆＃13;
＆＃13;

如何添加2-3个div并继续滑动。目前我可以刷过第一，第二和第三，如果我添加更多，它会停止滑动。我是初学者，这是我能够实现这一目标的最简单方法。

1 个答案:

答案 0 :(得分：0)

我改变了你的JS。

特别是使用totalAmount设置margin。

使用items

的总金额对其进行评估

我还将点击function合并为一个，然后检查event.target：

＆＃13;
＆＃13; 
$(document).ready(function() {
  var $item_width = $('.item').width();
  var $items_count = $('.item').length;
  var $vutreshen_container_shirina = $item_width * $items_count;
  $('.inner-box').css('width', $vutreshen_container_shirina);

  $(".next, .previous").on("click", change);

  function change(event) {
    event.preventDefault();
    var current_margin = $('.inner-box').css('margin-left').replace(/[^-\d.]/g, '');
    var inner_container_offset = 300;
    var parse_current = parseInt(current_margin);

    if(event.target === $('.previous')[0]) {
      var totalAmount = parse_current + inner_container_offset;
      if (totalAmount <= 0) {
        $('.inner-box').css('margin-left', totalAmount + 'px');
      }
    } else if (event.target === $('.next')[0]) {
      var totalAmount = parse_current - inner_container_offset;
      if(totalAmount >= -inner_container_offset * ($items_count - 1)) {
        $('.inner-box').css('margin-left', totalAmount + 'px');
      }
    }
  }
});
＆＃13; 
body {
  text-align: center;
}

.outer-box {
  overflow: hidden;
  display: inline-block;
  width: 300px;
}

img {
  width: 100%;
  height: 100%;
}

.inner-box {
  display: inline-block;
}

.item {
  float: left;
  width: 300px;
}

.previous {
  margin-right: 10px;
}

.next {
  margin-left: 25px;
}

.previous,
.next {
  position: relative;
  left: 210px;
  top: 20px;
  margin-bottom: 50px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="previous">Previous</button>
<button type="button" class="next">Next</button>

<div class="outer-box">
  <div class="inner-box">
    <div class="item1 item">
      <div class="inner_item">
        <img src="https://static.comicvine.com/uploads/original/14/146991/5041526-7374741911-grizzl.jpeg" alt="animal-gallery">
        <h3>Giraffe</h3>
        <p>The Giraffe (giraffe) is a genus of African even-toed ungulate mammals.
        </p>
      </div>
    </div>

    <div class="item2 item">
      <div class="inner_item">
        <img src="http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/Q-Z/sloth-beach-upside-down.jpg.adapt.945.1.jpg" alt="animal-gallery">
        <h3>Sloth</h3>
        <p>Sloths are mammals classified in the families Megalonychidae (two-toed sloths). </p>
      </div>
    </div>

    <div class="item3 item">
      <div class="inner_item">
        <img src="http://animals.sandiegozoo.org/sites/default/files/2016-12/Wolf_ZN.jpg" alt="animal-gallery">
        <h3>Wolf</h3>
        <p>The gray wolf or grey wolf (Canis lupus), also known as the timber wolf or wes.</p>
      </div>
    </div>

    <div class="item4 item">
      <div class="inner_item">
        <img src="http://animals.sandiegozoo.org/sites/default/files/2016-12/Wolf_ZN.jpg" alt="animal-gallery">
        <h3>Bear</h3>
        <p>The gray wolf or grey wolf (Canis lupus), also known as the timber wolf or wes.</p>
      </div>
    </div>

    <div class="item5 item">
      <div class="inner_item">
        <img src="http://animals.sandiegozoo.org/sites/default/files/2016-12/Wolf_ZN.jpg" alt="animal-gallery">
        <h3>Cat</h3>
        <p>The gray wolf or grey wolf (Canis lupus), also known as the timber wolf or wes.</p>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题