我们可以在jquery中显示图像的某些部分吗？

Question

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

• 当app运行时，它会显示第一张图像，显示图像的某些部分。见图像

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

我们可以在jquery中创建这种类型的滑块。

我试过这个

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

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

.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>