实现功能:
1.单击左右两边按钮，可以滚动
2.页面加载完有定时器，循环播放
3.单击“小圆点”会滚动，“小圆点”对应图片显示
4.当你点击过快，不会出现空白（不做处理，点击过快，图片会消失）
5.“小圆点”是动态创建，在js里面加入，你加了多少张图片，对应有多少个“小圆点”出来
6.当你点击按钮，“小圆点’的样式会对应改变
效果图:
CSS代码：给大div一个:over-flow:hidden
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
#caroul {
left: 50%;
transform: translateX(-50%);
position: relative;
width: 790px;
height: 340px;
font-size: 0;
overflow: hidden;
}
ul {
width: 999999px;
height: 340px;
position: relative;
}
ul:after {
content: '';
display: block;
clear: both;
}
li {
display: inline-block;
width: 790px;
height: 340px;
}
img {
width: 790px;
height: 340px;
}
#left,
#right {
position: absolute;
width: 150px;
height: 340px;
background: rgba(0, 0, 0, .2);
font-size: 30px;
text-align: center;
line-height: 340px;
top: 0;
z-index: 1;
cursor: pointer;
}
#left {
left: 0;
}
#right {
right: 0;
}
span {
/*display: block;*/
text-align: center;
width: 30px;
height: 30px;
background: yellow;
border-radius: 50%;
float: left;
margin: 0 1px;
cursor: pointer;
transition: 0.2s linear;
}
.btn {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
/*width: 300px;*/
height: auto;
}
</style>
HTML代码:注意格式
<div id="caroul">
<div id="left">向左</div>
<ul id="ul">
<li><img src="img/campIcon_01.jpg" alt="" /></li>
<li><img src="img/campIcon_02.jpg" alt="" /></li>
<li><img src="img/campIcon_03.jpg" alt="" /></li>
<li><img src="img/campIcon_03.jpg" alt="" /></li>
<li><img src="img/campIcon_02.jpg" alt="" /></li>
<li><img src="img/campIcon_02.jpg" alt="" /></li>
<li><img src="img/campIcon_02.jpg" alt="" /></li>
<li><img src="img/campIcon_02.jpg" alt="" /></li>
<li><img src="img/campIcon_04.jpg" alt="" /></li>
</ul>
<div id="right">向右</div>
<div class="btn">
这里是动态创建“小圆点”
</div>
</div>
创建DOM：
var caroul=document.getElementById('caroul');
var left = document.getElementById('left');
var right = document.getElementById('right');
var ul = document.getElementById('ul');
var li = document.querySelectorAll('li');
var lis = li.length;
var cloneLI = li[0].cloneNode(true); //复制第一张
var clonelastLI = li[lis - 1].cloneNode(true); //复制最后一张
ul.appendChild(cloneLI); //加载末尾
ul.insertBefore(clonelastLI, li[0]); //加载第一张之前
var width = li[0].offsetWidth; //获取ul宽度
ul.style.transform = 'translateX(-' + width + 'px)'; //让第一张显示，因为前面还有一张
var btn = true; //定义开关按钮
//当前轮播的索引
var i = 1;//初始值为1
var m;
动态创建“小圆点”
//动态创建点
var click=document.getElementsByClassName('btn')[0];
for(var x=0;x<lis;x++){
var dian=document.createElement('span');
click.appendChild(dian);
}
var span = document.getElementsByTagName('span');
span[0].style.background = 'gray';
for(var y=0;y<span.length;y++){
span[y].setAttribute('id',y+1);
}
click.style.width=span.length*span.offsetWidth+"px";
单击右边按钮:
function goRight() {
btn = false;
i++; //每一张的宽度 * 索引
ul.style.transform = 'translateX(-' + (i * width) + 'px)'; //每一次走i * width的距离
ul.style.transition = 'all .2s linear'; //添加动画
//四个点的触发事件
for(var j = 0; j < span.length; j++) {
span[j].style.background = 'yellow';
}
if(i-1<span.length){
span[i - 1].style.background = 'gray';
}
else{
span[0].style.background = 'gray';
}
//监听transition结束的时候
ul.addEventListener("transitionend", function() {
btn = true;
if(i == li.length + 1) {
//到达轮播的最后一张（克隆第一张的那个）
//重置动画时间，瞬间完成
ul.style.transition = 'none';
i = 1;
//回到起始位置
ul.style.transform = 'translateX(-' + i * width + 'px)';
//重新计算样式，阻断线程
// setTimeout(0);
// ul.style.transition = 'all 0s linear';
}
})
}
阻断事件和定时器:
//阻断事件，当点击一次时，btn为false,当监听事件执行完，btn为true，如果在没有执行完监听事件，btn还是为false，goright()事件不起作用
right.addEventListener('click',function(){
if(btn==true){
goRight();
}
})
//定时器
var time_right=window.setInterval(goRight,2000);
//事件取消和开始
function over(){
caroul.addEventListener('mouseover',function(){
clearInterval(time_right);
})
caroul.addEventListener('mouseout',function(){
time_right=window.setInterval(goRight,2000);
})
}over();
“小圆点”的单击事件：
//四个点的点击事件
function spans() {
for(var m= 0; m < span.length; m++) {
span[m].addEventListener('click', function(e) {
var x = parseInt(e.target.id);
i=x;
ul.style.transform = 'translateX(-' + x* width + 'px)';
ul.style.transition = 'all .2s linear';
for(var j = 0; j < span.length; j++) {
span[j].style.background = 'yellow';
}
span[x-1].style.background = 'gray';
})
}
}
spans();
单击左边按钮:
function goLeft() {
btn = false;
i--; //每一张的宽度 * 索引
ul.style.transform = 'translateX(-' + (i * width) + 'px)'; //走到第一张的前一张
ul.style.transition = 'all .2s linear'; //添加动画
//点的背景色
for(var j = 0; j < span.length; j++) {
span[j].style.background = 'yellow';
}
if(i>0){
span[i - 1].style.background = 'gray';
}
else{
span[span.length-1].style.background = 'gray';
}
//监听transition结束的时候
ul.addEventListener("transitionend", function() {
btn = true;
if(i == 0) {
//重置动画时间，瞬间完成
span[span.length-1].style.background = 'gray';
ul.style.transition = 'none';
i = li.length;
ul.style.transform = 'translateX(-' + i * width + 'px)';
}
})
}
//阻断事件，当点击一次时，btn为false,当监听事件执行完，btn为true，如果在没有执行完监听事件，btn还是为false，goright()事件不起作用
left.addEventListener('click',function(){
if(btn==true){
goLeft();
}
})
太简单了！！！可也花了我三天时间，没办法，笨有笨的解决方法。
转载于:https://www.cnblogs.com/LWJ-booke/p/7091383.html
原文链接：https://blog.csdn.net/weixin_30342827/article/details/96512027
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
还没有人抢沙发呢~