经过几天的努力，终于攻克了这一难题，于是迫不及待的想要分享给大家，编写之前，我也看了不少其他博主的博客，大多是用偏移量写的，对新手来说，还是有些难以理解，虽然可能实现的需求不一样，但我想先从简入手，所以自己查阅资料，修改bug，终于完成。话不多说，上代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>www.vevb.com JS轮播图</title><script src="jquery.js"></script><style>*{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;}</style></head><div id="flash"><img src="http://demo.vevb.com/js/2018/html5-css3-3d-img-flash-codes/images/Guardians-of-the-Galaxy-Poster-High-Res.jpg" src="/uploads/allimg/180819/104J544U-0.jpg" style="border: 1px solid rgb(204, 204, 204); vertical-align: middle; padding: 1px; overflow: hidden; max-width: 650px;" /> 感兴趣的朋友可以自己动手测试一下。
希望本文所述对大家JavaScript程序设计有所帮助。
