0
我得到了下面的代碼：功能添加到jQuery的滑塊
$(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();
});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;
}<!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>如何添加2-3更多的div並保持滑動。此刻，我可以通過第一，第二和第三次滑動，如果我添加更多，它會停止滑動。我是初學者，這是我可以實現的最簡單的方法。
瞭解更多有關委派的事件，更多的是Jquery的'.on'函數。這應該有所幫助。 –
@AkshayKhandelwal謝謝。 –
'$（next_button）.on（'可以是'next_button.on（'因爲它已經是一個jQuery對象，但是爲什麼它被封裝在一個函數中（'next'）） - 我沒有看到這個包中的值，爲什麼不只是使用帶'.on'的選擇器並消除該變量？（以及prev之一） –