jsfiddle

Question

我创建了一个简单的滑块

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属性来更改过渡效果，并确保元素在开始之前处于动画的正确位置。

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

顺便说一句，我应该指出，虽然HTML5中允许自定义HTML属性，但它们应该以{{1}}开头;它们被称为data attributes。

jsfiddle

HTML

data-

CSS

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

的JavaScript

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

Answer 2

结束以下

setInterval(function() { 
  $('#sldvid1 > img:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#sldvid1');
},  3000);

改善幻灯片效果

2 个答案:

jsfiddle

HTML

CSS

的JavaScript