我們可以在jquery中顯示圖像的某些部分嗎？

Question

我試圖製作一個圖像滑塊，用戶可以在其中滑動圖像。我可以製作滑塊但存在問題。一次顯示one圖像。換句話說，它在ul中顯示one圖像。 但我想

• 當應用程序運行它表明第一圖像沿其顯示圖像的兩個。看到的某些部分下面的圖片

• 當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

在.outer和margin-left變化CSS的width在.outer ul

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

$(function(){ 
 
\t $('#next').click(function(){ 
 
\t \t addToMarginLeft($('.outer ul'), -210); 
 
\t }); 
 
\t $('#pre').click(function(){ 
 
\t \t addToMarginLeft($('.outer ul'), 210); 
 
\t }); 
 
    
 
    function addToMarginLeft(elem, pixels) { 
 
    \t 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>