Question

我正在尝试使用HTML，CSS和Jquery构建基本的成像器滑块。向左移动（750px）时，它只移动最顶层的图像而不显示剩余的图像。

好像它只是一次性移动所有图像而不是最顶层的图像。

HTML文件：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="demolayout.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

<style>
</style>

</head>
<body >

<div class="container">
<div id="slider">
<ul class="slides" >
        <li class="slide"><img src="5.jpg" alt="Chania"></li>
        <li class="slide"><img src="5.jpg" alt="Chania"></li>
        <li class="slide"><a href="#"><img src="4.jpg" alt="Chania"></a></li>
        <li class="slide"><a href="#"><img src="4.jpg" alt="Chania"></a></li>
        <li class="slide"><a href="#"><img src="4.jpg" alt="Chania"></a></li>
        <li class="slide"><a href="#"><img src="4.jpg" alt="Chania"></a></li>
    </ul>
    </div>
    </div>
    <script src="demo.js"></script>


</body>

.CSS文件：

  #slider {
  width:100%;
  height:400px;
  overflow:hidden;
    }

#slider .slides{ 

  width:6000px;
  height:400px;
  margin: 0;
  padding:0;

}

#slider1 .slide{
  float: left;
  list-style-type:none;
  width:240px;
  height:400px;
}

.JS档案：

$("#slider .slides").animate({'margin-left':'-=650px'},1000)

Jsfiddle链接：https://jsfiddle.net/q3c21f7q/1/

Answer 1

您忘了在JSFiddle中添加jQuery。

我添加了一个能够以间隔时间显示幻灯片的功能。

See this fiddle

var yrs = Enumerable.Range(2010, DateTime.Today.Year);
var months =  Enumerable.Range(1, 12);    
var squery =
        (from bk in db.Books
        from year in yrs
        from month in months
        let key = new { Year = year, Month = month }
...

Answer 2

在你的js文件中，当代码加载时，你的代码只会将滑块750px向左移动一次。滑块是幻灯片的容器，因此它显然会移动所有幻灯片......

不确定您打算如何使用此代码创建工作滑块，但这里有一些提示：

将您的列表设置为水平列表：
```
li.slide { display: inline; }
```

然后，使用setInterval将滑块向左移动2秒。例如：

setInterval(rotate, 2000);

function rotate() {
  $("#slider .slides").animate({
    'margin-left': '-=750px'
  }, 1000);
}

但是，当所有照片都显示出来时，你仍然需要找到回到第一个位置的方法。

要创建滑块，我建议采用略有不同的方法：

首先，隐藏所有幻灯片（此处为您的ul）。
有一个特殊的div，一开始是空的，一次只显示一张幻灯片
每隔X秒：
1. 如果div已经包含幻灯片，请将其剪切并粘贴到ul的末尾（轻松使用jquery）
2. 获取slide的第一个ul并将其插入div

另一种方法是使用.active类，就像@VincentG建议的那样。

Jquery：仅显示图像滑块中的最顶层图像

2 个答案: