循环 jquery 幻灯片答案

【问题标题】：Looping jquery slideshow循环 jquery 幻灯片
【发布时间】：2013-07-27 16:19:09
【问题描述】：

我知道如何制作幻灯片，虽然我不知道如何让它连续运行，而不是只运行一次我还没有制作幻灯片，所以无法向您展示任何代码，但我知道我将在带有overflow: hidden; 的div 中使用<ul>，然后在li 项目上使用绝对位置，以便它们彼此堆叠

我虽然在项目的不透明度发生变化时使用 jquery，但如果不透明度为 0，则像这样重做循环。那是怎么编码的

我宁愿不必依赖其他人制作的插件

提前致谢

【问题讨论】：

你可能想使用现有的 jQuery 插件，或者至少看看它们是如何工作的。
我不喜欢使用插件
如果您查看插件，它们中的大多数都是水平移动图像。当您在最后一张图像上时，设置第一张图像的位置。如果您不尝试编写代码，那么帮助您并不难，您不要自己尝试。
我可以很容易地制作一个幻灯片，虽然它不循环是我所说的

标签： jquery html css slideshow

【解决方案1】：

既然你知道如何制作幻灯片，我就给你一些循环部分的代码：

var images = new Array("image1.jpg", "image2.jpg", etc.)
var index = 0;

// Visually clearer method (my opinion)
function changeImage() {
    index++;
    if (index == images.length) index = 0; // Avoid going out of range

    $("#imageElement").attr("src", images[index]);
}

setInterval("changeImage()", 5000);

// More concise method
setInterval(function() {
    index++;
    if (index == images.length) index = 0;
    $("#imageElement").attr("src", images[index]);
}, 5000);

如果你想要字幕，我推荐一个与图像源数组“平行”的数组。

【讨论】：

嗯...一定有更简单的方法，因为我已经看到它完成了，但我似乎找不到在哪里
我知道如何制作幻灯片我只需要知道如何让图片循环播放
这是一种方法！将图像路径存储在数组中，您就大功告成了。
有没有更简单的方法，因为我希望在 html 中设置图像
搜索 jQuery slideshows similar 到 this。有很多方法可以处理 HTML 中设置的图像。试试var images = $("#slideshow img")，你把images当作一个数组。

【解决方案2】：

我不确定您要如何处理不透明度。你是对的 Ollie。你必须使用你在问题中描述的类似 html 结构。像这样：

<div class="mask">
   <ul class="images">
     <li style="display: none;">
      <img border="0" usemap="#Map" src="images/image.png">
     </li>
     <li style="display: none;"> 
      <img src="images/image1.png"> 
     </li>
    </ul>
</div>
<div class="pagination">
  <ul class="triggers">
    <li class="">1</li>
    <li class="">2</li>
  </ul>
</div>

上述结构的 CSS 将是这样的：

.mask {
    float: left;
    height: 156px;
    margin-top: 10px;
    overflow: hidden;
    position: relative;
    width: 822px;
}
ul.images {
    left: 0;
    position: relative;
    top: 0;
}
ul.images li {
    left: 0;
    position: absolute;
    top: 0;
}
ul.triggers {
    left: 870px;
    list-style: none outside none;
    top: 250px;
}
ul.triggers li {
    background-color: #000000;
    color: #FFFFFF;
    cursor: pointer;
    float: left;
    font: bold 10px arial;
    margin: 0 3px;
    padding: 2px;
}
ul.triggers li.selected {
    background-color: #FFFFFF;
    color: #000000;
}

一些使它作为幻灯片放映的脚本将是这样的：

$(document).ready(function(){
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var target;
triggers.first().addClass('selected');
images.hide().first().show();
function sliderResponse(target) {
images.fadeOut(300).eq(target).fadeIn(300);
triggers.removeClass('selected').eq(target).addClass('selected');
}
triggers.click(function() {
if ( !$(this).hasClass('selected') ) {
target = $(this).index();
sliderResponse(target);
resetTiming();
}
});
function sliderTiming() {
target = $('ul.triggers li.selected').index();
if ( target === lastElem ) { target = 0; }
else { target = target+1; }
sliderResponse(target);
}
var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
clearInterval(timingRun);
timingRun = setInterval(function() { sliderTiming(); },5000);
}
});

您可以通过将 5000 更改为其他值来增加/减少时间间隔。

【讨论】：