index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="animate.js"></script>
<script src="index.js"></script>
<style>
*{
padding:0;margin:0;
}
.foc{
position: relative;
margin: 100px auto;
width: 300px;
height: 400px;
overflow: hidden;
}
.foc .tp li img{
width: 300px;
height: auto;
}
.foc .tp{
position: absolute;
top: 0px;
left: 0px;
width:600%;
margin: auto;
}
.foc li{
float: left;
list-style:none;
}
.ri{
position: absolute;
background-color: #629b93c9;
right: 0px;
top: 190px;
width: 30px;
height: 30px;
z-index: 1;
}
.le{
position: absolute;
background-color: #629b93c9;
transform: rotateY(180deg);
left: 0px;
top: 190px;
width: 30px;
height: 30px;
z-index: 1;
}
.xb{
position: absolute;
bottom: 5px;
left: 100px;
}
.xb li{
float: left;
margin-right: 10px;
border: 10px solid rgb(104, 102, 102);
border-radius: 50%;
}
.xb .yes{
border-color: brown;
}
.xb .no{
border-color: rgb(104, 102, 102);
}
</style>
</head>
<body>
<div class="foc">
<!-- 上一页和下一页图片 -->
<a href="#"><img src="next.png" class="ri" alt=""></a>
<a href="#"><img src="next.png" class="le" alt=""></a>
<ul class="tp">
<!-- 轮播图片 -->
<li>
<img src="1.jpg" alt="">
</li>
<li>
<img src="2.jpg" alt="">
</li>
<li>
<img src="3.jpg" alt="">
</li>
<li>
<img src="4.jpg" alt="">
</li>
</ul>
<ul class="xb">
</ul>
</div>
</body>
</html>
index.js
window.addEventListener('load', function () {
function animate(obj,target,callback){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var step=(target-obj.offsetLeft)/10;
step=step>0?Math.ceil(step):Math.floor(step);
if(obj.offsetLeft==target){
clearInterval(obj.timer);
if(callback){
callback();
}
}
obj.style.left=obj.offsetLeft+step+'px';
},15)
}
//鼠标进入显示左右图标,鼠标离开图标消失
var foc = document.querySelector('.foc');
var le = document.querySelector('.le');
var ri = document.querySelector('.ri');
foc.addEventListener('mouseover', function () {
le.style.display = 'block';
ri.style.display = 'block';
})
foc.addEventListener('mouseleave', function () {
le.style.display = 'none';
ri.style.display = 'none';
})
//动态生成底部小圆圈
var xb = document.querySelector('.xb')
var tp = document.querySelector('.tp')
var focwidth=foc.offsetWidth;
var num=0;
for (var i = 0; i < tp.children.length; i++) {
var li = document.createElement('li')
//设定自定义属性
li.setAttribute('index',i);
xb.appendChild(li);
//点击当前小圆圈变色
li.addEventListener('click', function (e) {
for (var i = 0; i < xb.children.length; i++) {
xb.children[i].className = 'no'
}
this.className = 'yes';
//点击小圆圈相应图片出现
num=this.getAttribute('index')
var index=this.getAttribute('index');
animate(tp,-index*focwidth)
})
}
xb.children[0].className = 'yes'
//克隆第一张图片,以此来实现无缝翻页
var first=tp.children[0].cloneNode(true);
tp.appendChild(first);
//点击左右图标实现向前向后翻页
// var num=0;
le.addEventListener('click',function(){
if(num==0){
num=tp.children.length-1;
tp.style.right=0;
}
num--;
for (var i = 0; i < xb.children.length; i++) {
xb.children[i].className = 'no'
}
if(num==tp.children.length-2){
xb.children[xb.children.length-1].className = 'yes'
}
else{
xb.children[num].className = 'yes'
}
animate(tp,-num*focwidth)
})
ri.addEventListener('click',function(){
if(num==tp.children.length-1){
num=0;
tp.style.left=0;
}
num++;
for (var i = 0; i < xb.children.length; i++) {
xb.children[i].className = 'no'
}
if(num==tp.children.length-1){
xb.children[0].className = 'yes'
}
else{
xb.children[num].className = 'yes'
}
animate(tp,-num*focwidth)
})
//自动播放
// var ti=setInterval(function(){
// ri.click();
// },2000)
})