Question

我已经在我的页面上创建了一个幻灯片，但不是我的图片只是改变我希望它们具有滑入和滑出的效果。有什么建议吗？

<div class="main-container2">
        <div id="slideshow">
            <img src="c:/users/saleh/desktop/Abid/pics/limo_black.jpg" name="slide">
        </div>

<script type="text/javascript">

    var step = 1
    function slideit(){
        if (!document.images)
            return
        document.images.slide.src = eval("image"+step+".src");
        if (step<3);
            step++;
        else
            step = 1;
        setTimeout("slideit()",2500);

        }
        slideit();
</script>;

Answer 1

只是在玩......

LIVE DEMO

图像的确切宽度为#slideshow：

<div id="slideshow">
  <img src="image1.jpg" alt="">
  <img src="image2.jpg" alt="">
  <img src="image3.jpg" alt="">
</div>

您只需要：

#slideshow{
  overflow:hidden;
  width:300px;
  height:150px;
  white-space:nowrap;
  font-size:0;
}

和

var $s = $('#slideshow'),
    $i=$('img', $s),
    N=$i.length+1,
    C=0;  

$i.eq(0).clone().appendTo($s);

function anim(){
    if(C===N){$s.scrollLeft(0);C=0;}
    $s.delay(C?2000:0).animate({ scrollLeft: ++C*300 },400, anim);  
}
anim(); // Use this fn 'call' wherever you want to start the animation.

这样做是通过简单地克隆并将第一张图片追加到最后来实现的无限幻灯片移动，

这样（在我们注册增量变量C达到图像总数之后），我们可以立即将scrollLeft设置为0，使重置无法察觉。

通过简单地回忆anim回调中的函数.animate()来实现循环。

<小时/> If you want it to stop on mouseenter:

var $s = $('#slideshow'),
    $i = $('img', $s),
    N = $i.length+1,
    C = 0,
    m = 0; // flag for mouseover

$i.eq(0).clone().appendTo($s);

function anim(){
    if(m)return setTimeout(anim, 200);
    if(C===N){$s.scrollLeft(0);C=0;}
    $s.delay(C?2000:0).animate({ scrollLeft: ++C*300 },400, anim);  
}anim();

$s.hover(function(){ m^=1; });

Answer 2

你可以节省一些时间并使用Bootstrap。它使用JQuery实现了这一切。 http://getbootstrap.com/javascript/#carousel

<div id="carousel-example-generic" class="carousel slide">

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Alternative slide wrapper -->
  <div class="carousel-inner">  

    <div class="item active">
      <div class="container">
        <div class="contributor">
          <img class="image-circle" src="..." alt>
        </div>
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

关于替代幻灯片包装的说明。当我实现Bootstrap3轮播时，我发现它不起作用，但是如果我使用了Bootstrap2幻灯片封装器，它就可以了。没有押韵或理由，但这就是我发现的。至于你在这个二级布局中放置carousel-caption div的位置。我不是最模糊的，可能在容器内，而不是贡献者。

您在链接中看到的指标不是必需的，因为它们是由JavaScript初始化程序生成的。这是以这样的方式发起的。

$(".carousel").carousel({
    interval: false
});

但是你不需要为你的目的添加任何参数。我在我的interval:false设置了它，因此它没有自动滚动，但听起来你可能想要这种行为。所以你需要的只是.carousel();，你可以通过id或class初始化。我正在按班级初学。

在完全不同的说明中，我建议在您的计算机上安装Apache主机，以便您的代码可以发布。同样使用像这样的Windows文件链接并不是一种好的做法，并且在开发时会导致各种问题，特别是在包含CSS文件时。至少使用相对于您正在运行该页面的目录的链接。

我个人的偏好是使用SublimeText和Chrome本机安装的Linux操作系统，分别用于编辑和测试。但这是我的偏好，主要是因为我的大多数页面都是使用PHP和MySQL集成构建的。

如何让我的图像滑入和滑出？

2 个答案: