目录
一、效果展示
二、H5的布局
三、CSS的布局
第一步
第二步
第三步
四、JS的布局
第一步
第二步
第三步
五、源码评论区自取
一、效果展示
主要通过,设置点击事件,定时器,if判断,排他思想来实现,简单的轮播图效果,是非常普通的轮播样式。
二、H5的布局
可以使用自己的图片,需要注意路径,不注意路径会出现错误,呈现不出所需要的效果。
可以使用自己的图片,需要注意路径,不注意路径会出现错误,呈现不出所需要的效果。
可以使用自己的图片,需要注意路径,不注意路径会出现错误,呈现不出所需要的效果。
三、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邮箱,看到会立马发送。还有很多可以优化和添加各种实用的效果,我会在以后的时间,发表更加完善的轮播图,更具有使用性。也可以关注博主互相分享经验,非常欢迎大佬指导。(本人小白,可能不是很完善,会在今后补齐)