目录
一、效果展示
二、H5的布局
三、CSS的布局
四、JS的布局
第一步
第二步
第三步
一、效果展示
主要通过，设置点击事件来实现，简单的轮播图效果
主要通过，设置点击事件来实现，简单的轮播图效果
主要通过，设置点击事件来实现，简单的轮播图效果
二、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;
给图片下的小圆点进行布局
给图片下的小圆点进行布局
给图片下的小圆点进行布局
.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; } 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判断来实现自动点击小圆点，从而实现自动播放的效果
var i = 1; setInterval(function(){ if(i<=3){ circle.children[i].click(); i++; }else{ i=0; circle.children[0].click(); i++; } },2000)
