目录

一、效果展示

二、H5的布局

三、CSS的布局

第一步

第二步

第三步

四、JS的布局

第一步

第二步

第三步

五、源码评论区自取

---

一、效果展示

主要通过，设置点击事件，定时器，if判断,排他思想来实现，简单的轮播图效果，是非常普通的轮播样式。

二、H5的布局

可以使用自己的图片，需要注意路径，不注意路径会出现错误，呈现不出所需要的效果。

可以使用自己的图片，需要注意路径，不注意路径会出现错误，呈现不出所需要的效果。

可以使用自己的图片，需要注意路径，不注意路径会出现错误，呈现不出所需要的效果。

		

			

				

				

				

				

				
			
			

			
		
1
2
3
4
5
6
7
8
9
10
11

三、CSS的布局

第一步

第一个盒子的布局

		*{
				padding: 0px;
				margin: 0px;
			}
			.banner{
				 width: 600px;
				 margin: auto;
				 border: 10px solid green;
				 height: 350px;
				 position: relative;
				overflow: hidden;
				position: relative;
			}
1
2
3
4
5
6
7
8
9
10
11
12
13

第二个盒子

主要注意两个盒子之间的定位，还有浮动

			.imgList img{
				width: 600px;
				height: 350px;
			}
			.imgList{
				/* 绝对定位 */
				 position: absolute;
			}
			.imgList li{
				float:left;
				margin-right: 20px;
				 list-style: none;
1
2
3
4
5
6
7
8
9
10
11
12

第二步

给图片下的小圆点进行布局，需要注意，定位，浮动，在这里可以设置一个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;
			}

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

第三步

给图片实现，滑动效果，要给left设置一个初始值，这样就会减少不会移动的BUG，需要注意一下的小小细节。

    ul {

    transition-duration: 0.3s;
    left: 0px; 
	
     }
1
2
3
4
5
6

四、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);
			 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

第二步

使用点击事件，可以通过小圆点来切换图片，还有排他思想，来呈现更加直观的点击效果

      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

            var i = 1;
                setInterval(function(){
                 if(i<=3){
                    circle.children[i].click();
                    i++;
                 }else{
                    i=0;
                    circle.children[0].click();
                    i++;
                 }
                },2000)
1
2
3
4
5
6
7
8
9
10
11