javascript - 改善幻灯片效果

Question

我创建了一个简单的 slider

html

<div id="sldvid1" class="slider" >
    <img picnum="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png" />
      <img picnum="2"  style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png" />
      <img picnum="3" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png" />
</div>
<hr>
<div id="sldvid2" class="slider" >
    <img picnum="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png" />
      <img picnum="2"  style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png" />
      <img picnum="3" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png" />
</div>

$

var timer1 = setInterval(runSlide, 1000);
var curnum = 1;
function runSlide()
{
    curnum = $(".slider img:visible").attr('picnum');
    //$("#sldvid1 img[picnum=" + curnum + "]").fadeOut(); 
    if(curnum == 3){
        curnum = 1;
    }
    else
    {
        curnum++;
    }
   // $(".slider img").hide();
   //$(".slider img[picnum=" + curnum + "]").show(); 
     $(".slider img").hide();
   $(".slider img[picnum=" + curnum + "]").show(); 
    //console.log(curnum);

}

CSS

.slider{
    height:50px;
}

演示

http://jsfiddle.net/mparvez1986/vf401e2y/

一切正常，我只需要一些东西来改善效果，这样它就可以像从左向右移动一样产生效果，我尝试了一些效果，但似乎也需要一些 css 操作

谢谢

Answer 1

我修改了您的代码以创建一个图像可以滑入和滑出的轮播。我通过使用 jQuery 为 margin-left CSS 属性设置动画来实现这一点。我为 .slider 类指定了一个大小，并使用 overflow: hidden; 来确保滑动图像不会显示在它之外。

如果您愿意，您可以通过更改动画的 CSS 属性并确保元素在动画开始前处于正确的位置来更改过渡效果。

您还可以通过更改 magic number 来更改动画速度1000 我在调用 animate 时留下的。此数字以毫秒为单位指定。

顺便说一句，我应该指出，虽然自定义 HTML 属性在 HTML5 中是允许的，但它们应该以 data- 开头；他们被称为data attributes .

jsfiddle

HTML

<div id="sldvid1" class="slider">
    <img class="active" data-slide-to="0" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png"/>
    <img data-slide-to="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png"/>
    <img data-slide-to="2" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png"/>
</div>
<hr>
<div id="sldvid2" class="slider">
    <img class="active" data-slide-to="0" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png"/>
    <img data-slide-to="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png"/>
    <img data-slide-to="2" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png"/>
</div>

CSS

.slider {
    position: relative;
    width: 50px;
    height: 50px;
    overflow: hidden;
}

.slider img {
    display: none;
    width: 100%;
    position: absolute;
}

.slider .active {
    display: inline-block;
}

.slider .sliding {
    display: inline-block;
}

JavaScript

var timer = setInterval(runSlide, 2000);

function runSlide() {
    // Slide each slider on the page.
    $(".slider").each(function (index, element) {
        // Get the elements involved in the slide.
        var numChildren = $(this).children().length;
        var activeChild = $(this).children(".active");
        var activeSlideTo = $(activeChild).attr("data-slide-to");
        var nextSlideTo = (parseInt(activeSlideTo) + 1) % numChildren;
        var nextChild = $(this).find("*[data-slide-to=" + nextSlideTo + "]");

        // Prepare for slide.
        $(activeChild).css("margin-left", "0%");
        $(nextChild).css("margin-left", "-100%");
        $(activeChild).addClass("sliding");
        $(nextChild).addClass("sliding");
        $(activeChild).removeClass("active");

        // Slide using CSS margin-left.
        $(activeChild).animate({"margin-left": "100%"}, 1000, function () {
            $(this).removeClass("sliding");
        });
        $(nextChild).animate({"margin-left": "0%"}, 1000, function () {
            $(this).addClass("active");
            $(this).removeClass("sliding");
        });
    });
}