logo标签列表

简单的JavaScript/HTML幻灯片演示

javascripthtmlsliderslideshowuislider
8

我对JavaScript还不熟悉，但经过一些研究后，看起来这是实现我想要的输出的最佳方法。我正在尝试生成一个图像幻灯片（5个预选图像），它们会在5秒间隔内自动更换。有人可以指向教程或在这个过程中指导我吗？非常感谢任何帮助。

1
你是想把这个作为练习来实现，还是接受以jQuery插件的形式提供的预制解决方案？有许多免费可用的幻灯片脚本可以完全满足你的需求。 - Xenethyl
5个回答
11

这里是一个非常简单的代码，只使用简单的JavaScript和HTML代码就能创建一个简单的JavaScript/HTML幻灯片：

<script language="JavaScript"> 
var i = 0; var path = new Array(); 

// LIST OF IMAGES 
path[0] = "image_1.gif"; 
path[1] = "image_2.gif"; 
path[2] = "image_3.gif"; 

function swapImage() 
{ 
document.slide.src = path[i]; 
if(i < path.length - 1) i++; 
else i = 0; 
setTimeout("swapImage()",3000); 
} 
window.onload=swapImage; 
</script> 
<img height="200" name="slide" src="image_1.gif" width="400" />
1
script 标签的 language 属性已经被弃用。我建议使用 type 属性代替。 - Ben
6
一个非常好用的jQuery幻灯片插件是这个http://www.devtrix.net/sliderman/，它有许多不同的幻灯片切换效果，并且非常易于使用。
虽然有很多类似的插件，但只要在谷歌上搜索“jQuery幻灯片”，就会得到数百个结果。
4
将2015年的当前URL更新。 - Michael Durrant
3

有成千上万的例子，一些非常复杂和精细。然而，对于初学者来说，难点在于找到一个易于理解的例子。

经过一些研究，我从css-tricks找到了这个例子。（也使用了jquery）。

2
我知道这是一篇旧文章，但我想分享我的教程，以便未来任何人受益。

简单幻灯片

希望这能帮到某些人。 这是一个相当简单和基本的幻灯片，易于构建/实现。

以防链接失效，以下是代码： 第一步是设置HTML如下：

<div id="slideShow">
 <div id="slideShowWindow">
 <div class="slide">
 <img src="”img1.png”/">
 <div class="slideText">
 <h2>The Slide Title</h2> 
 <p>This is the slide text</p>
 </div> <!-- </slideText> -->
 </div> <!-- </slide> repeat as many times as needed --> 
 </div> <!-- </slideShowWindow> -->
 </div> <!-- </slideshow> -->

接下来我们将编写CSS，代码如下：
img {
 display: block;
 width: 100%;
 height: auto;
}
p{
 background:none;
 color:#ffffff;
}
#slideShow #slideShowWindow {
 width: 650px;
 height: 450px;
 margin: 0;
 padding: 0;
 position: relative;
 overflow:hidden;
 margin-left: auto;
 margin-right:auto;
}

#slideShow #slideShowWindow .slide {
 margin: 0;
 padding: 0;
 width: 650px;
 height: 450px;
 float: left;
 position: relative;
 margin-left:auto;
 margin-right: auto;
 }

#slideshow #slideshowWindow .slide, .slideText {
    position:absolute;
    bottom:18px;
    left:0;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    color:#ffffff;
    font-family:Myriad Pro, Arial, Helvetica, sans-serif;
} 
.slideText {
 background: rgba(128, 128, 128, 0.49);
}

#slideshow #slideshowWindow .slide .slideText h2, 
#slideshow #slideshowWindow .slide .slideText p {
    margin:10px;
    padding:15px;
}

.slideNav {
 display: block;
 text-indent: -10000px;
 position: absolute;
 cursor: pointer;
}
#leftNav {
 left: 0;
 bottom: 0;
 width: 48px;
 height: 48px;
 background-image: url("../Images/plus_add_minus.png");
 background-repeat: no-repeat;
 z-index: 10;
}
#rightNav {
 right: 0;
 bottom: 0;
 width: 48px;
 height: 48px;
 background-image: url("../Images/plus_add_green.png");
 background-repeat: no-repeat;
 z-index: 10; }

正如您所看到的，这个CSS并没有什么令人兴奋或复杂的地方。实际上，它更基础一些，但我保证这就是所需的全部。

接下来，我们将创建jQuery：

$(document).ready(function () {

 var currentPosition = 0;
 var slideWidth = 650;
 var slides = $('.slide');
 var numberOfSlides = slides.length;
 var slideShowInterval;
 var speed = 3000;

 //Assign a timer, so it will run periodically
 slideShowInterval = setInterval(changePosition, speed);

 slides.wrapAll('<div id="slidesHolder"></div>');

 slides.css({ 'float': 'left' });

 //set #slidesHolder width equal to the total width of all the slides
 $('#slidesHolder').css('width', slideWidth * numberOfSlides);

 $('#slideShowWindow')
 .prepend('<span class="slideNav" id="leftNav">Move Left</span>')
 .append('<span class="slideNav" id="rightNav">Move Right</span>');

 manageNav(currentPosition);

 //tell the buttons what to do when clicked
 $('.slideNav').bind('click', function () {

 //determine new position
 currentPosition = ($(this).attr('id') === 'rightNav')
 ? currentPosition + 1 : currentPosition - 1;

 //hide/show controls
 manageNav(currentPosition);
 clearInterval(slideShowInterval);
 slideShowInterval = setInterval(changePosition, speed);
 moveSlide();
 });

 function manageNav(position) {
 //hide left arrow if position is first slide
 if (position === 0) {
 $('#leftNav').hide();
 }
 else {
 $('#leftNav').show();
 }
 //hide right arrow is slide position is last slide
 if (position === numberOfSlides - 1) {
 $('#rightNav').hide();
 }
 else {
 $('#rightNav').show();
 }
 }


 //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
 function changePosition() {
 if (currentPosition === numberOfSlides - 1) {
 currentPosition = 0;
 manageNav(currentPosition);
 } else {
 currentPosition++;
 manageNav(currentPosition);
 }
 moveSlide();
 }


 //moveSlide: this function moves the slide 
 function moveSlide() {
 $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
 }

});
2
什么情况下会有人点踩呢？更重要的是，谁认为有必要点踩我的回答，却又不值得发表评论呢？我对点踩并没有意见，但我想知道为什么，留个评论有多难呢？如果没有建设性的批评，我怎么能改进我的回答呢？ - M_Griffiths
如何在悬停时停止滑块的轮播？ - Murulimadhav
停止悬停时，我的建议是在悬停时中断计时器函数。因此，在鼠标悬停时停止计时器，并在鼠标离开时重新启动它。 - M_Griffiths
1
好的，谢谢，我懂了。它运行得非常好。 - Murulimadhav
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接