本文目录一览：
- 1、js图片轮播点击
- 2、使用dreamweaver cs5如何制作像幻灯片一样播放的图片？cs5中的时间轴已经取消，请高手指点！
- 3、如何用原生js和css制作轮播图
- 4、怎么用js的原生写法写出来一个轮播图呢？
- 5、简单的HTML+js图片轮播?
js图片轮播点击
实现轮播图思路
布局：
1. 使用 flex 布局使子元素水平排列；
2. 子元素宽度设置100%，flex-shrink 设置为 0（这个属性保证子元素不被压缩）;
定时器无缝轮播：
轮播之前需要将首尾各添加一张图片。其目的就是实现无缝轮播。
然后将父元素 left 向左移动一个屏幕宽度的距离。这样才能让第二张（因为首尾各添加了一张图片，所以原先的第一张就变成了第二张）变成可视范围的第一张。
轮播到最后一张图片（这里的最后一张指的是拼接的第一张）时；
①清除掉定时器；
②开启临界处理（重置父元素的left）；
③开启下一轮轮播。
这里是实现无缝轮播的关键；其目的是播放最后一张的同时，与第一张偷梁换柱。因为最后一张与第一张图片相同，所以快速地改变其 left 用户并无感知。并且同时开启下一轮定时器，1.5s 之后执行第二张图片播放。而这个 1.5s 之内就好了准备（清除当前定时器，重置父元素 left）。
右边按钮点击无缝轮播：
逻辑同定时器无缝轮播类似，因为方向都是从右向左播放。无缝轮播的核心都是播放到最后一张时偷梁换柱（播放最后一张图片的1.5s 同时，改变父元素 left 成初始值，负数的屏幕宽度）。
左边按钮点击无缝轮播：
左边按钮无缝轮播的核心与以上差不多，唯一的区别就是当播放到第一张图片时，开始偷梁换柱（播放第一张图片的1.5s 同时，改变父元素 left 成最大值，负数的（屏幕宽度*（子元素个数-2）））。
指示灯点击无缝轮播：
点击第一张图片时，同左边按钮点击无缝轮播。点击最后一张图片时，同右边按钮点击无缝轮播。
使用dreamweaver cs5如何制作像幻灯片一样播放的图片？cs5中的时间轴已经取消，请高手指点！
详细的代码在很多js源码下载站点就可以下载到，你只要找网页幻灯片或者网页轮播效果代码，能在百度上找到很多。还可以下载到源文件。
即便使用原来旧版本的dreamweaver的时间轴，也难以做出现在网页录播图片的效果，这个时间轴实际上就是在dreamweaver内置的一个js功能，不过代码已经过时了，所以被新版本取消了。
这样的效果只能是编写js程序来制作了，不过既然网上有人家编写好的程序，那么拿过来用，直接粘贴在网页上就可以了。
如何用原生js和css制作轮播图
曾经插件不太流行我就自己写，这个问题我来回答你，原生你需要对CSS跟JS都比较熟练，才能去制作，先用CSS排版出你需要的界面，之后才能去写JS。
JS部分你要取出你的轮播图个数，然后定义一个切换到单前的变量，再定义切换效果，切到最后一张图片了要如何处理，切换都第一张用户点击上一站又要如何处理。当你这些都处理好了之后，一个页面多个轮播等等，JS兼容页面兼容又得处理吧，我就问你头痛不。
现在使用框架这些通通都不用自己管，高效轻松他不好吗？
怎么用js的原生写法写出来一个轮播图呢？
1：排出一个版，包含上下切换的标识和图片导航，所有图片隐藏，给图片第一张加一个class名，样式设为显示，图片导航的第一个加一个class名，加上背景色；
2：获取节点；
3：给向下切换写一个点击事件，点击图片切换到下一张，注意当图片切换到最后一张的时候会报错，所以必须要判断一下，当图片切换到最后一张的时候在，再次击会切换到第一张；
4：给向上切换写一个点击事件，注意当图片切换到第一张之后会报错，所以必须要判断一下，当图片切换到第一的时候，再次点击会切换到最后张，循环起来；
5：写一个定时器，定时器的播放顺序和向下切换一致，可以封装一个函数方便调用；
6：写鼠标划入事件，清除定时器；
7：写鼠标移出事件，定时器继续运行；
8：图片导航的点击事件
点击事件click
定时器setlnterval（）
if判断
for（）循环
简单的HTML+js图片轮播?
h5代码：
div id="wrap"
ul id="list"
li10/li
li9/li
li8/li
li7/li
li6/li
li5/li
li4/li
li3/li
li2/li
li1/li
/ul
/div
css代码：
style type="text/css"
@-webkit-keyframes move{
0%{left:-500px;}
100%{left:0;}
}
#wrap{width:600px;height:130px;border:1px solid #000;position:relative;margin:100px auto;
overflow: hidden;}
#list{position:absolute;left:0;top:0;padding:0;margin:0;
-webkit-animation:5s move infinite linear;width:200%;}
#list li{list-style:none;width:120px;height:130px;border:1px solid red;background: pink;
color:#fff;text-align: center;float:left;font:normal 50px/2.5em '微软雅黑';}
#wrap:hover #list{-webkit-animation-play-state:paused;}
/style
扩展资料：
轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张图片，在网页的某一部位进行轮流的呈现，从而做到让浏览者很快的了解到网站想要表达的主要信息。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。
轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px、高度为512px.那么轮播的窗口大小就应该为一张图片的尺寸，即为：1024×512。之后将这5张图片0px水平相接组成一张宽度为：5120px,高度依然为：512px。最后将这张合成后的大图每次向左移动1024px即可实现轮播图。
