Javascript 创建自动滑动div的水平列表

我试图为我的主页创建一个水平的div列表，它每x秒从左到右快速滑动一次。以下是我迄今为止取得的成就：

正如您所看到的，我无法将三个div水平对齐，我认为这可能是因为宽度设置为100%，但这是必要的，因为我更希望div占据整个页面的宽度，而且我不确定使div像幻灯片一样每x秒快速滚动所需的jquery

---

有什么建议吗？

Stackoverflow通常是有效的，你可以发布你尝试过的东西，告诉我们问题出在哪里，我们会帮你解决，这并不意味着我们要从头开始做整件事。不管怎样，既然你是初学者，我不想你放弃，所以我建立了我认为你想要的：

var时间=2000//毫秒 var指数=0； var container=$container； var childrenCount=$.section.length； 函数slideToNext{ 指数=指数+1%儿童计数； console.logindex； container.css{ 边际收益：-1*指数*100+% } } var pt=window.setIntervalfunction{ 下一步； }，时间 html，正文{margin:0；padding:0；overflow-x:hidden；} 容器{ 宽度：300%； 溢出：隐藏； -webkit过渡：边距左侧500ms缓进缓出； -moz过渡：边距左侧500ms缓进缓出； -o型过渡：左边缘500ms缓进缓出； -ms过渡：左边距500ms缓进缓出； 过渡：左边缘500ms缓进缓出； } .科{ 宽度：33.3333%； 浮动：左； 高度：200px； } 蓝色部分{背景：蓝色；} 第_节红色{背景：红色；} 第_节绿色{背景：绿色；}

---

我建议你使用

对于您的问题，这可能是一个巧妙的配置

$document.readyfunction{ $‘容器’。光滑{ 无限：是的， 速度:300,， 自动播放速度：500， 自动播放：对， 幻灯片放映：1 }; }; 为您的容器设置100%宽度的样式，以便进行全宽幻灯片放映

---

有关更多配置选项，请查看。

我不确定您想要实现什么。你想做你自己的滑块吗？所以你一次只能看到一种颜色？我投票认为太宽了。。。。你离最终目标还太远了至少先搜索如何将divs float或inline block放在一边，所以有很多问题…然后转到JS部分搜索元素的位置更改。如何使某个元素既占据整个页面的宽度，又水平对齐。这毫无意义

<div id="container">

    <div id="section_blue"></div>
    <div id="section_red"></div>
    <div id="section_green"></div>

  </div>