Jquery slider : horizontal image slider

Question

这是我在 stackoverflow 中的第一篇文章，我也是 JQuery 编程的新手。我试图制作自己的 Jquery 图像 slider ，我希望图像从右向左滑动，但图像保持从左上角滑动，我不知道为什么？

这是 fiddle http://jsfiddle.net/rAqcP/193/

我的 CSS 是:

.slider {
width:100%;
height:400px;
overflow:hidden;
background-image:url("http://test.softvex.com/Slider/Img/loading.gif");
background-repeat:no-repeat;
background-position:center;}
    .slider img {
    width:100%;
    height:400px;
    display:none;
}

我的 JS 是:

$(document).ready(function() {

$('.slider #1').show({right:'0'}, 500);
$('.slider #1').delay(5500).hide('slide', 'linear', 500);

var sliderTotalImg = $('.slider img').size();
var counterIndex = 2;

setInterval(function () {
    $('.slider #' + counterIndex).show({right:'0'}, 500);
    $('.slider #' + counterIndex).delay(5500).hide('slide', 'linear', 500);

    if (counterIndex == sliderTotalImg) {
        //reset counter
        counterIndex = 1;
    }
    else {
        counterIndex = counterIndex + 1;
    }
},6500);});

最后是我的标记

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div class = "slider">
 <img id="1" src="http://test.softvex.com/Slider/Img/photography/001.jpg"/>
 <img id="2" src="http://test.softvex.com/Slider/Img/photography/003.jpg"/>
</div>

感谢帮助

Answer 1

如果我理解你的意思，那么只需像隐藏一样制作幻灯片

$(document).ready(function() {

//$('.slider #1').show({right:'0'}, 500);
$('.slider #1').show('slide', 'linear', 500);
$('.slider #1').delay(5500).hide('slide', 'linear', 500);

var sliderTotalImg = $('.slider img').size();
var counterIndex = 2;

setInterval(function () {
    //$('.slider #' + counterIndex).show({right:'0'}, 500);
    $('.slider #' + counterIndex).show('slide', 'linear', 500);
    $('.slider #' + counterIndex).delay(5500).hide('slide', 'linear', 500);

    if (counterIndex == sliderTotalImg) {
        //reset counter
        counterIndex = 1;
    }
    else {
        counterIndex = counterIndex + 1;
    }
},6500);});

在这里试试 http://jsfiddle.net/rAqcP/198/

如果这不是你想要的，请留下评论并说出你想要的