本文目录一览：
怎么用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即可实现轮播图。
js里面可以写轮播图吗？
当然可以，css3就可以写轮播，只不过js写的轮播图兼容性更好，使用顺畅。
js实现轮播图主要是搞懂原理，还有js知识就OK啦
图片切换 是index值切换
换下一张 按钮实现功能
到最后一张回到第一张
第一张往上翻回到最后一张
写效果就OK啦
原创文章，作者：BLHR5，如若转载，请注明出处：https://www.506064.com/n/129912.html
微信扫一扫 
支付宝扫一扫 