html5简单的轮播图代码生成器,原生JS实现的简单轮播图功能【适合新手】

╰+攻爆jí腚メ 2022-10-06 11:48 283阅读 1赞

本文实例讲述了原生JS实现的简单轮播图功能。分享给大家供大家参考，具体如下：

经过几天的努力，终于攻克了这一难题，于是迫不及待的想要分享给大家，编写之前，我也看了不少其他博主的博客，大多是用偏移量写的，对新手来说，还是有些难以理解，虽然可能实现的需求不一样，但我想先从简入手，所以自己查阅资料，修改bug，终于完成。话不多说，上代码：

www.jb51.net JS轮播图

\*\{

margin: 0px;

padding:0px;

list-style: none;

text-decoration: none;

\#flash\{ /\*根据图片的大小来设置外层div的大小\*/

width: 520px;

height: 280px;

margin: 0 auto;

position: relative; /\*设置div定位，方便之后图片及圆点位置的设定\*/

border:1px solid black;

\#flash img\{

width: 100%;

height: 100%;

position: absolute; /\*设置所有图片重叠\*/

left: 0px;

top: 0px;

display: none; /\*设置所有图片隐藏，通过改变第一个图片的行间样式来使第一个图片显示\*/

\#flash ul\{

width: 150px;

height: 25px;

border-radius: 20px;

background-color:rgba(255,255,255,0.5);

position: absolute;

left: 35%;

bottom: 10%;

\#flash ul li\{

width: 12px;

height: 12px;

margin-top:5px;

background-color: \#fff;

border-radius: 50%;

margin-left: 15px;

float: left;

\#flash ul .li\_1\{

background-color: \#f40; /\*设置第一个圆点背景色为红色\*/

\#flash .span-r\{

width: 50px;

height: 50px;

border-radius: 50%;

position: absolute;

right: 2%;

top: 45%;

background-color: rgba(255,255,255,0.5);

\#flash .span-r span\{

width: 100%;

height:100%;

color:rgba(0,0,0,0.5);

font-size: xx-large;

font-weight: 700;

line-height: 50px;

margin-left: 15px;

cursor: pointer;

\#flash .span-l\{

width: 50px;

height: 50px;

border-radius: 50%;

position: absolute;

left: 2%;

top: 45%;

background-color: rgba(255,255,255,0.5);

\#flash .span-l span\{

width: 100%;

height:100%;

color:rgba(0,0,0,0.5);

font-size: xx-large;

font-weight: 700;

line-height: 50px;

margin-left: 15px;

cursor: pointer;

![cdcb781cd5dacef3ddd2265f0a19ae3d.png][]

![f1ffe86b2db5a552f0d028340ac2fd85.png][]

![70a19c2d662665a459712fbb49e0a214.png][]

![70754c810a640f06a94568126d2a2a38.png][]

![defb415df8a84fb2a192ae291c6ea516.png][]

var div = document.getElementById('flash');

var img = div.getElementsByTagName('img'); /\*选中div下所有的图片\*/

var ul = document.getElementsByTagName('ul')\[0\];

var li = ul.getElementsByTagName('li');

var div\_r = document.getElementsByTagName('div')\[1\];

// var span\_r = div\_r.getElementsByTagName('span');

var div\_l = document.getElementsByTagName('div')\[2\];

// var sapn\_l = div\_l.getElementsByTagName('span');

var len = img.length;

var count = 0; /\*设置count来显示当前图片的序号\*/

function run()\{ /\*将定时器里的函数提取到外部\*/

count++;

count = count==5?0:count; /\*当图片加载到最后一张时，使其归零\*/

for(var i=0;i

img\[i\].style.display = 'none'; /\*利用for循环使除当前count位其他图片隐藏\*/

img\[count\].style.display = 'block'; /\*显示当前count的值所代表的图片\*/

for(var i=0;i

li\[i\].style.backgroundColor = "\#fff"; /\*原理同上\*/

li\[count\].style.backgroundColor = "\#f40";

var timer = setInterval(run,1000); /\*定义定时器，使图片每隔1s更换一次\*/

div.onmouseover = function()\{

clearInterval(timer);

div.onmouseleave = function()\{ /\*定义鼠标移出事件，当鼠标移出div区域，轮播继续\*/

timer = setInterval(run,1000);

for(var i=0;i

li\[i\].index = i; /\*定义index记录当前鼠标在li的位置\*/

li\[i\].onmouseenter = function()\{ /\*定义鼠标经过事件\*/

for(var i=0;i

li\[i\].style.background = '\#fff';

img\[i\].style.display = 'none';

this.style.background = '\#f40'; /\*设置当前所指圆点的背景色\*/

img\[this.index\].style.display = 'block'; /\*使圆点对应的图片显示\*/

div\_r.onclick = function()\{ /\*因为span没有设置宽高，直接把事件添加到他的父级\*/

run(); /\*直接调用现成的run函数\*/

function reverse()\{

count--;

count = count==-1?4:count;

for(var i=0;i

img\[i\].style.display = 'none'; /\*利用for循环使除当前count位其他图片隐藏\*/

img\[count\].style.display = 'block'; /\*显示当前count的值所代表的图片\*/

for(var i=0;i

li\[i\].style.backgroundColor = "\#fff"; /\*原理同上\*/

li\[count\].style.backgroundColor = "\#f40";

div\_l.onclick = function()\{

reverse(); /\*重新设置函数\*/

这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试运行效果如下：

![6ca58381f69c14fac84ac4828bf0fb08.gif][]

感兴趣的朋友可以自己动手测试一下。

希望本文所述对大家JavaScript程序设计有所帮助。

[cdcb781cd5dacef3ddd2265f0a19ae3d.png]: /images/20221005/36a33baf8cd34df98e8f79527dd0e813.png
[f1ffe86b2db5a552f0d028340ac2fd85.png]: /images/20221005/181829c0b6124d76bbe4ba671c610f79.png
[70a19c2d662665a459712fbb49e0a214.png]: /images/20221005/427548aefebb42f8b8b5b27da05fb7bc.png
[70754c810a640f06a94568126d2a2a38.png]: /images/20221005/7d3dc7a09cf04524ac4c3dae8cfa21fc.png
[defb415df8a84fb2a192ae291c6ea516.png]: /images/20221005/17ffed2fcef843d2b0c5c8c65c7c541d.png
[6ca58381f69c14fac84ac4828bf0fb08.gif]: /images/20221005/93af8c58265b4b0d8a54a729c0471db8.png