Question

我是新手网络开发，请帮助我以正确的方式学习！

我们不会使用任何框架或库。

Answer 1

这是一个简单的例子

 #slider{
    width : 400px;
    height : 160px;
    overflow : hidden;
}

#slider div{      
   height : 160px;
   transition : all 1s
}

#slider>div{
   width : 1200px;
   height : 160px;
   transition : all 1s
}

#slider>div>div{  
      width : 400px;
      float : left;
}

#red{
   background-color : red
}

#blue{
   background-color : blue
}

#green{
   background-color : green
}

<div id="slider">
   <div>
      <div class="slide" id=red></div>  
      <div class="slide" id=blue></div>  
      <div class="slide" id=green></div>  
    </div>
</div>

::-webkit-scrollbar-track

Answer 2

您只需要逐个浏览包含图片网址的数组，并且每次通过分配实际索引的图片网址来更改您正在使用的img标记的src时。

document.getElementById('image').src=pictures[i];

图片是你的阵列。

这是一个Demo，您可以添加所需的CSS（转换等）。

如何在没有jQuery的情况下使用Javascript创建轮播图像滑块？

2 个答案: