Question

我已经浏览了本网站上早些时候发布的答案，但我的幻灯片显示不起作用并始终显示第一张图片。以下是我的代码

<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>

Answer 1

在构建滑块时，最好编写你想在DOM中显示的大部分内容，这样它就可以加载，搜索引擎也可以找到它等。

这就是我要做的事情

<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>

使用alt和title将意味着你的html将符合wc3;）也可以使用互联网搜索找到图像:)或其他

现在你想制作幻灯片吗？我会告诉你一些很酷的CSS让你先走，然后我会回到javascript：p

首先，我们要确保未启用javascript的人能够查看您的图片不是吗？因此，让我们为那些没有javascript的特殊偏执人士制作一个漂亮的滚动窗口：p

#imageSlider{overflow:auto;}

现在，#imageSlider宽度超过100％的任何内容都可以滚动。我使用过称为文章的课程。我之所以这样做的原因后来会变得更加清晰:)但是现在这就是原因。

有5篇文章，您希望每个文章都是100％的父级，以便当您在该图像上时其他人没有显示？所以5 * 100 = 500

.imageSliderContainer{width:500%;}

5分之100= 20

.imageSliderContainer .article{width:20%;float:left;}
.clearfix:after{clear:both;display:block;visibility:hidden;content:'';}

现在每篇文章/图片都是父级的100％宽度，因此当选择一篇文章时，它们将不可见：p

并且clearfix和float将使文章彼此内联:)而不会导致与其他元素的冲突

接下来，我们要确保我们的图片在文章中看起来很酷。并且它们的位置和尺寸都合适，因此它们不在容器外等。

.imageSliderContainer .article img{max-width: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 NEGATIVE VALUES”所以我只会使用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;
}

如果您在最后一张图片上，则变量next将等于0，如果您正在幻灯片中间，则会转到下一张图片。

Javascript看起来不像jQuery那样华丽，但它可以完成工作。对不起，如果我犯了错误，我正在写电话，因为我正在写这个，让我知道如果有什么不行，我会解决它:)

接下来只需使用setInterval();

调用该功能即可

var slider=setInterval(function(){nextSlide();},1000);

完成工作:)希望这有用！我会为你做一个快速的jsfiddle所以你可以看到它是如何工作的:) http://jsfiddle.net/s6crzzfr/

幻灯片使用HTML无法正常工作

1 个答案: