幻灯片使用HTML不起作用 [英] slideshow using html not working
问题描述
我已经浏览了本网站之前发布的答案，但我的幻灯片不起作用并始终显示第一张图片。
下面是我的代码
< div id = slideshow>
< img class ='imagem_artigo'src =/ images1 / coveover.jpgname =Myslidewidth = 750; height = 300 align =middle>
< script type =text / javascript>
var step = 1;
var img1 = new Image（）;
img.src =/images1/tecover.jpg;
var img2 = new Image（）;
img2.src =/ images1 / te.jpg;
var img3 = new Image（）;
img3.src =/ images1 / te1.jpg;
var img4 = new Image（）;
img4.src =/ images1 / im7.jpg;
function slideshow（）{
document.images.Myslide.src = eval（img+ step +。src）;
if（step <= 4）
step ++;
else
step = 1;
setTimeout（function（）{slideshow（）}，1000）;
}
幻灯片放映（）;
< / script>
< / div>
制作滑块时最好写下大部分内容你想在DOM中显示，所以它会加载，搜索引擎可以找到它等。
这就是我要做的事情
< div id =imageSlider>
< div class =imageSliderContainer clearfix>
< div class =article>
< / div>
< div class =article>
< img src =/ images1 / tecover.jpgwidth =height =alt =title =>
< / div>
< div class =article>
< img src =/ images1 / te.jpgwidth =height =>
< / div>
< div class =article>
< img src =/ images1 / te1.jpgwidth =height =>
< / div>
< div class =article>
< img src =/ images1 / im7.jpgwidth =height =>
< / div>
< / div>
< / div>
使用alt和title将意味着您的html将符合wc3;）也可以使用图片互联网搜索:)或其他什么
现在你想制作幻灯片吗？我会告诉你一些很酷的CSS让你先走，然后我会回到javascript：p
首先，我们要确保避难的人没有启用JavaScript能够查看您的图像，不是吗？因此，让我们为那些没有javascript的特殊偏执人士制作一个漂亮的滚动窗口：p #imageSlider {overflow：auto; }
现在任何超过100％宽度的 #imageSlider 将可滚动。
我使用过称为文章的类。我这样做的原因后来会变得更清晰:)但现在这只是原因。
有5篇文章，您希望每篇文章都是家长的100％，以便其他人在您使用该图片时不会显示正确的文章？所以5 * 100 = 500
.imageSliderContainer {width：500％;}
100/5 = 20
.imageSliderContainer。文章{width：20％; float：left;}
.clearfix：after {clear：both; display：block; visibility：hidden; content：'';}
现在每篇文章/图片都是父级宽度的100％，因此在选择其中一项时它们将不可见：p
和clearfix和float将使文章彼此内联:)而不会导致与其他元素的冲突
接下来我们要制作确保我们的图像在文章中看起来很酷。并且它们的位置和大小都很合适，因此它们不在容器外面等。
.imageSliderContainer .article img {max宽度：100％; height：auto; display：inline-block;}
.imageSliderContainer .article {width：20％; text-align：center; background：＃000000;}
现在事情应该开始看起来相当漂亮和流畅了吧？如果您仍在关注：p
接下来是javascript。我会更流利的jQuery，但我会举两个例子：）
首先我们要关闭滚动
$（'＃imageSlider'）。css（{'overflow'：'hidden'}）; / * jquery * /
document.getElementById （'imageSlider'）。style.overflow =hidden; / * javascript * /
当我真正想要做的事情是让图片改变时，我们将滚动元素，这样我们就可以看到下一张; p
有些人喜欢使用负余量，但有些设计师喜欢 AGHHHH负值出于某种原因，所以我只是使用scrollLeft来代替：p
这是ganna变得有点复杂的地方。首先你要获得容器scrollLeft的当前位置，然后调整它。
/ * jQuery * /
function nextSlide（）{
var sliderScroll = $（'＃imageSlider'）。scrollLeft（）;
var artWid = $（'。article'）。width（）;
var artQuant = $（'。article'）。length;
var next = 0-（sliderScroll ==（（artQuant-1）* artWid））？0（sliderScroll + artWid）;
$（'＃imageSlider'）。animate（{scrollLeft：next}，500）;
}
/ * javascript * /
function nextSlideA（）{
var slider = document.getElementById（'imageSlider'）;
var art = document.getElementsByClassName（'article'）;
var next = 0-（slider.scrollLeft ==（（art.length-1）* art [0] .offsetWidth（）））0：（art [0] .offsetWidth（）+ slider.scrollLeft ）;
document.getElementById（'position'）。innerHTML = next;
slider.scrollLeft = next;
}
如果您在最后一张图片上，则下一个变量将等于0如果你正在幻灯片中间，请转到下一个图像:)
Javascript看起来不像jQuery那样华丽，但它会完成工作。我很抱歉，如果我在写这篇文章的时候犯了一些错误，请告诉我是否有问题，然后我会解决它:)
接下来只需使用 setInterval（）;
var slider = setInterval（function（）{nextSlide（）;}，1000）;
完成工作:)希望这有帮助！我会为你做一个快速的jsfiddle，这样你就可以看到它是如何工作的:)
http：// jsfiddle .net / s6crzzfr /
I have gone through the answer posted earlier on this website but my slideshow does not work and shows the first image always. Below is my code
<div id= slideshow>
<img class ='imagem_artigo' src="/images1/coveover.jpg" name="Myslide" width=750; height=300 align="middle">
<script type="text/javascript">
var step = 1;
var img1 = new Image();
img.src = "/images1/tecover.jpg";
var img2 = new Image();
img2.src = "/images1/te.jpg";
var img3 = new Image();
img3.src = "/images1/te1.jpg";
var img4 = new Image();
img4.src = "/images1/im7.jpg";
function slideshow(){
document.images.Myslide.src = eval("img" + step+".src");
if(step<=4)
step++;
else
step = 1;
setTimeout(function(){slideshow()},1000);
}
slideshow();
</script >
</div>
When building sliders it's better to write the majority of what you want to show in the DOM so it'll load and search engines can find it etc.
Here's what I would do
<div id="imageSlider">
<div class="imageSliderContainer clearfix">
<div class="article">
<img src="/images1/coverover.jpg" width="" height="" alt="write stuff here etc" title="">
</div>
<div class="article">
<img src="/images1/tecover.jpg" width="" height="" alt="" title="">
</div>
<div class="article">
<img src="/images1/te.jpg" width="" height="">
</div>
<div class="article">
<img src="/images1/te1.jpg" width="" height="">
</div>
<div class="article">
<img src="/images1/im7.jpg" width="" height="">
</div>
</div>
</div>
using alt and title will mean your html will be wc3 compliant ;) also the image can be found using an internet search :) or whatever
Now you wanna build a slideshow huh? I'll show you some cool CSS to get you going first then I'll come back to the javascript :p
first off, we want to make sure people who haven't got javascript enabled are able to view your images don't we? So lets make a nice scroll window looking thingy for those special paranoid people with no javascript :p
#imageSlider{overflow:auto;}
Now anything that's over 100% width of #imageSlider will be scrollable.
I've used classes called articles. The reason I've done this will become much clearer later :) but for now this is simply why.
There are 5 articles and you want each to be 100% of the parent so that the others aren't showing when you're on that image right? So 5*100=500
.imageSliderContainer{width:500%;}
100/5=20
.imageSliderContainer .article{width:20%;float:left;}
.clearfix:after{clear:both;display:block;visibility:hidden;content:'';}
Now each article/image will be 100% width of the parent so they won't be visible when one is selected :p
and the clearfix and float will make the articles inline with each other :) without causing conflicts with other elements
Next we want to make sure our images look cool inside the article. and they're properly positioned and sized so they're not outside of the container etc.
.imageSliderContainer .article img{max-width:100%;height:auto;display:inline-block;}
.imageSliderContainer .article{width:20%;text-align:center;background:#000000;}
now things should be starting to look rather nice and smooth right? IF you're still following :p
Next comes the javascript. I'm more fluent in jQuery but I'll give examples of both just incase :)
First off we want to turn off the scrolling
$('#imageSlider').css({'overflow':'hidden'});/*jquery*/
document.getElementById('imageSlider').style.overflow="hidden";/*javascript*/
Next we want to make the images 'change' when really what I'm going to do is scroll the element along so we can see the next one ;p Some people like to use a negative margin left but some designers are like "AGHHHH NEGATIVE VALUES" for some reason so I'll just use scrollLeft instead :p
this is where it's ganna get a little complicated. First you want to get the current location of the container's scrollLeft then adjust it.
/*jQuery*/
function nextSlide(){
var sliderScroll=$('#imageSlider').scrollLeft();
var artWid=$('.article').width();
var artQuant=$('.article').length;
var next=0-(sliderScroll==((artQuant-1)*artWid))?0(sliderScroll+artWid);
$('#imageSlider').animate({scrollLeft:next},500);
}
/*javascript*/
function nextSlideA() {
var slider=document.getElementById('imageSlider');
var art=document.getElementsByClassName('article');
var next=0-(slider.scrollLeft==((art.length-1)*art[0].offsetWidth()))?0:(art[0].offsetWidth()+slider.scrollLeft);
document.getElementById('position').innerHTML=next;
slider.scrollLeft = next;
}
the variable next will equal 0 if you're on the last image and will go to the next image if you're in the middle of the slideshow :)
Javascript won't look as fancy as jQuery but it'll get the job done. I'm sorry if I've made any mistakes I'm currently on the phone as I'm writing this, let me know if something doesn't work and I'll fix it :)
Next just simply call the function using your setInterval();
var slider=setInterval(function(){nextSlide();},1000);
And job done :) Hope this was helpful! I'll make a quick jsfiddle for you so you can see how it all works :) http://jsfiddle.net/s6crzzfr/
这篇关于幻灯片使用HTML不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
