效果展示
SDGIF_Rusult_1.gif
HTML框架
<body>
<div class="box">
<a href="javascript:;">
<div class="lbox"> ← </div>
</a>
<a href="javascript:;">
<div class="rbox">  → </div>
</a>
<!-- 放图片 -->
<ul>
<li><img src="./upload/focus.jpg" alt=""></li>
<li><img src="./upload/focus1.jpg" alt=""></li>
<li><img src="./upload/focus2.jpg" alt=""></li>
<li><img src="./upload/focus3.jpg" alt=""></li>
</ul>
<!-- 放小圆圈 -->
<ol>
</ol>
</div>
</body>
设计思路
轮播图的移动是ul的移动。调用了animate函数，所以ul是有定位的
JavaScript部分
javaScript设计思路
1.获取元素
2.鼠标进入box两侧的小盒子会显示
3.鼠标离开box两侧的小盒子会隐藏.
4.通过图片的个数动态的创建并添加底部的小圆圈，在创建的同事，为每一个小圆圈添加点击会变色的事件，点击小圆圈就会移动ul，用自定义变量index辅助
5.左右两边点击移动用变量num，每次自增一换到下一个（注意条件）
6.自动播放setinterval，用自调用函数，调用右边点击小框
7.鼠标进入box，计时清除，离开则计时继续
6.简化代码量
window.addEventListener('load', function() {
var box = document.querySelector('.box');
var ol = document.querySelector('ol');
var ul = document.querySelector('ul');
var lbox = document.querySelector('.lbox');
var rbox = document.querySelector('.rbox');
//鼠标进入盒子的时候，两侧的两个小按钮会显示，离开则会消失
box.addEventListener('mouseenter', function() {
lbox.style.display = 'block';
rbox.style.display = 'block';
clearInterval(time); //清除定时器变量.
time = null;
console.log(time); //没有 time = null;，输出有数字
});
box.addEventListener('mouseleave', function() {
lbox.style.display = 'none';
rbox.style.display = 'none';
time = setInterval(function() {
rbox.click();
}, 2000);
});
//动态生成下面的小圆圈,第一个小圆圈给一个变色
var boxwidth = box.offsetWidth - 2; //边框有2像素
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
ol.appendChild(li);
ol.children[i].setAttribute('index', i);
//添加点击就会移动的事件，点击之后自己变白，其他都是空心，
li.addEventListener('click', function() {
for (var j = 0; j < ol.children.length; j++) {
ol.children[j].className = '';
}
this.className = 'bianse';
var index = this.getAttribute('index');
num = index; //让左右两个按钮也跟着同步
circle = index; //让左右两个按钮也跟着同步
var boxwidth = box.offsetWidth - 2; //边框有2像素
// console.log(boxwidth);
animate(ul, -index * boxwidth);
});
}
ol.children[0].className = 'bianse';
//右边小框点击会移动
var num = 0;
var circle = 0;
//克隆第一的节点到最后一个
var clone = ul.children[0].cloneNode(true);
ul.appendChild(clone);
rbox.addEventListener('click', function() {
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++
circle++;
if (circle == ul.children.length - 1) {
circle = 0;
}
animate(ul, -num * boxwidth);
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'bianse';
});
//设置左边的小框点击之后ul会向右滑动
lbox.addEventListener('click', function() {
if (num == 0) {
ul.style.left = -(ul.children.length - 1) * boxwidth + 'px';
num = ul.children.length - 1;
}
num--;
circle--;
if (circle == -1) {
circle = ol.children.length - 1;
}
animate(ul, -num * boxwidth);
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
// console.log(circle);
ol.children[circle].className = 'bianse';
});
//每隔两秒自动播放
var time = setInterval(function() {
rbox.click();
}, 2000);
//鼠标经过会停止计时器
})
css
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
position: relative;
width: 320px;
height: 200px;
margin: 100px auto;
overflow: hidden;
border: 1px solid red;
}
.lbox,
.rbox {
display: none;
width: 20px;
height: 18px;
line-height: 18px;
opacity: 0.5;
z-index: 3;
color: #ffffff;
background-color: black;
}
.lbox {
position: absolute;
top: 50%;
left: 0;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
cursor: pointer;
transform: translateY(-50%);
}
.rbox {
position: absolute;
top: 50%;
right: 0;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
transform: translateY(-50%);
}
ul {
position: absolute;
left: 0;
top: 0;
width: 500%;
}
img {
float: left;
width: 320px;
}
ol {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
}
ol li {
float: left;
width: 10px;
height: 10px;
z-index: 2;
margin: 0 10px;
cursor: pointer;
border-radius: 10px;
border: 1px solid #ffffff;
}
.bianse {
background-color: #ffffff;
box-shadow: 1px 1px 3px #ffffff;
}
</style>
网友评论