Question

这是我在stackoverflow中的第一篇文章，我也开始使用JQuery编程。我试图制作自己的Jquery图像滑块，我希望图像从右到左滑动，但图像保留了左上角的滑块，我无法知道为什么？

我的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/

如果这不是您留下评论并准确说出您想要的内容

Jquery滑块：水平图像滑块

1 个答案: