javascript - 我们可以在 jquery 中显示图像的一部分吗？

Question

我尝试制作一个图像 slider ，用户可以在其中滑动图像。我能够制作 slider ，但存在问题。它一次显示一个图像。换句话说，它在 ul 中显示 one 图像。 但我想要

• 当应用程序运行时，它显示第一张图片，它显示第二张图片的某些部分。见下图

• 当用户点击next 时，它会显示第二张图片，同时还会显示第三张和第一张图片的一部分。例如

我们可以在 jquery 中制作这种类型的 slider 吗？

我试过这样

https://jsfiddle.net/uvsb6asa/10/

$(function(){
    $('#next').click(function(){
        addToMarginLeft($('.outer ul'), -210);
    });
    $('#pre').click(function(){
        addToMarginLeft($('.outer ul'), 210);
    });

  function addToMarginLeft(elem, pixels) {
    var ml = parseFloat(elem.css('margin-left'));
    elem.animate({
    'margin-left': (ml + pixels) + 'px'
    },1000)

  }
});

Answer 1

在 CSS 中更改 .outer 中的 width 和 .outer ul 中的 margin-left

.outer {
width:400px;
overflow:hidden
}
.outer ul {
    width: 610px;
    margin:0;
    padding:0px
    margin-left:100px;  
}

$(function(){
	$('#next').click(function(){
		addToMarginLeft($('.outer ul'), -210);
	});
	$('#pre').click(function(){
		addToMarginLeft($('.outer ul'), 210);
	});
  
  function addToMarginLeft(elem, pixels) {
  	var ml = parseFloat(elem.css('margin-left'));
    elem.animate({
    'margin-left': (ml + pixels) + 'px'
    },1000)

  }
});

.outer {
width:300px;
overflow:hidden
}
.outer ul {
    width: 610px;
    margin:0;
    padding:0px
    margin-left:100px;

    
    
}

.outer li {
    display: inline-block;

   
}
.outer li img {
   width:200px;
   height:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
    <ul>
        <li><img alt=""  src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"></li>
        <li><img alt=""  src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT7lw5rwUWCsmOFSTUuFF84niMBZg6J9KeWhws1Ysib3VdVTM8-RA"></li>
        <li><img alt=""   src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"></li>
    
    </ul>
     <button id='pre'>
    previous
    </button>
    <button id='next'>
    next
    </button>
   
</div>