目录
一、效果展示
主要通过，设置点击事件，定时器，if判断,排他思想来实现，简单的轮播图效果，是非常普通的轮播样式。
二、H5的布局
可以使用自己的图片，需要注意路径，不注意路径会出现错误，呈现不出所需要的效果。
可以使用自己的图片，需要注意路径，不注意路径会出现错误，呈现不出所需要的效果。
可以使用自己的图片，需要注意路径，不注意路径会出现错误，呈现不出所需要的效果。
-
-
<div class="banner">
-
<ul class="imgList">
-
<li>
<img src="1.png"/>
</li>
-
<li>
<img src="2.jpg"/>
</li>
-
<li>
<img src="3.jpg"/>
</li>
-
<li>
<img src="4.jpg"/>
</li>
-
-
</ul>
-
<div class="circle">
-
</div>
-
</div>
三、CSS的布局
第一步
第一个盒子的布局
-
*{
-
padding:
0px;
-
margin:
0px;
-
}
-
.banner{
-
width:
600px;
-
margin: auto;
-
border:
10px solid green;
-
height:
350px;
-
position: relative;
-
overflow: hidden;
-
position: relative;
-
}
第二个盒子
主要注意两个盒子之间的定位，还有浮动
-
-
.imgList
img{
-
width:
600px;
-
height:
350px;
-
}
-
.imgList{
-
/* 绝对定位 */
-
position: absolute;
-
}
-
.imgList
li{
-
float
:left;
-
margin-right:
20px;
-
list-style: none;
第二步
给图片下的小圆点进行布局，需要注意，定位，浮动，在这里可以设置一个hover，来为JS实现排他思想做布局，这样所呈现的效果就是，可以明确的显示出我点击了那个小圆点，有很直观的效果。
-
-
.circle{
position: absolute;
bottom:
15px;
left:
50%;
transform:
translateX(-
50%);}
-
.circle
a{
-
width:
15px;
-
height:
15px;
-
background: green;
-
display: block;
-
border-radius:
50%;
-
opacity: .
8;
-
float: left;
-
margin-right:
10px;
-
}
-
.circle
a
.hover{
-
background: black;
-
opacity: .
7;
-
}
-
-
第三步
给图片实现，滑动效果，要给left设置一个初始值，这样就会减少不会移动的BUG，需要注意一下的小小细节。
-
ul {
-
-
transition-duration:
0.3s;
-
left:
0px;
-
-
}
四、JS的布局
第一步
基本的获取元素
-
// 确定ul的宽度 动态的创建小圆点
-
var imgList =
document.
querySelector(
'.imgList');
-
var circle =
document.
querySelector(
'.circle');
-
var flag =
true;
-
-
//给ui标签设置宽度
-
imgList.
style.
width =imgList.
children.
length*
620+
'px';
-
-
//下面动态创建a标签
-
for (
var i =
0; i < imgList.
children.
length; i++) {
-
var aNode =
document.
createElement(
'a');
-
-
//我们在这里创建index属性来记录索引值
-
aNode.
setAttribute(
'index',i);
-
circle.
appendChild(aNode);
-
}
第二步
使用点击事件，可以通过小圆点来切换图片，还有排他思想，来呈现更加直观的点击效果
-
circle.
addEventListener(
'click',
function(
e){
-
var cirCle = e.
target.
getAttribute(
'index');
-
if(e.
target.
nodeName==
'A'){
-
imgList.
style.
left = cirCle*-
620+
'px';
-
for(j=
0;j<circle.
children.
length;j++){
-
circle.
children[j].
className=
'';
-
}
this.
children[cirCle].
className=
'hover';
-
}
-
})
第三步
通过，定义新的值，设置一个定时器，在里面使用if判断来实现自动点击小圆点，从而实现自动播放的效果，主要注意其中i值的变化，来进行判断，输出，不然会出现混乱现象，需要多加注意。
有大致的逻辑后，在通过值来实现自动点击的效果的定时器，实现最简单的轮播，也可以使用滑动动画实现，本人觉得这种实现方式比较简单，所以使用此方法。
-
var i =
1;
-
setInterval(
function(
){
-
if(i<=
3){
-
circle.
children[i].
click();
-
i++;
-
}
else{
-
i=
0;
-
circle.
children[
0].
click();
-
i++;
-
}
-
},
2000)
五、源码评论区自取
在评论区留下自己的QQ邮箱，看到会立马发送。还有很多可以优化和添加各种实用的效果，我会在以后的时间，发表更加完善的轮播图，更具有使用性。也可以关注博主互相分享经验，非常欢迎大佬指导。（本人小白，可能不是很完善，会在今后补齐）
转载：https://blog.csdn.net/yzq0820/article/details/125712299
查看评论