<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 800px;
height: 500px;
border: 2px solid #000;
margin: 100px auto;
position: relative;
overflow: hidden;
}
ul,
ol {
list-style: none;
}
li {
float: left;
}
ul {
width: 4800px;
height: 500px;
position: absolute;
top: 0;
left: 0;
}
ul>li {
width: 800;
height: 500px;
font-size: 60px;
text-align: center;
line-height: 300px;
}
ul>li>img{
width: 800PX;
height: 500PX;
}
#btn div {
width: 40px;
height: 60px;
background-color: rgba(0, 0, 0, 0.5);
font-size: 40px;
text-align: center;
color: #fff;
line-height: 60px;
position: absolute;
top: 50%;
margin-top: -30px;
}
#btn #left {
left: 0;
}
#btn #right {
right: 0;
}
ol {
width: 82px;
height: 10px;
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -41px;
/* background-color: red; */
}
ol li {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ccc;
}
ol li.target {
background-color: #f40;
}
ol li+li {
margin-left: 8px;
}
</style>
</head>
<body>
<div id="box">
<!-- 装图片的盒子 -->
<ul>
<li><img src="../img/1.jpg" ></li>
<li><img src="../img/2.jpg" ></li>
<li><img src="../img/3.jpg" ></li>
<li><img src="../img/4.jpg" ></li>
<li><img src="../img/5.jpg" ></li>
<li ><img src="../img/1.jpg" ></li>
</ul>
<!-- 小圆点 -->
<ol>
<li class="target"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<!-- 两侧点击的按钮 -->
<div id="btn">
<div id="left"><</div>
<div id="right">></div>
</div>
</div>
//引入的js文件,我放最后面的
<script src="../js/utils.js" charset="utf-8"></script>
<script type="text/javascript">
//通过封装函数获取元素
let ul = $("ul")
let box = $("#box")
console.log(box)
let ol = $("ol")
let olis = $$("ol li")
let leftbtn = $("#left")
let rightbtn = $("#right")
//定义三个全局变量
let crindex = 0 ;
let nextindex = 1
let timer = null
//封装move函数,
function move (){
//将netx的值付给crindex,循环执行
crindex = nextindex
//index在循环里面++
nextindex ++
// 总共是 6 张图片
// 判断是否到了最后一张 如果到了最后一张 就直接 让 ul 的 left = 0
if(nextindex == 6){
//ul的立即会带0的位置
ul.style.left = 0
//在初始化执行nextindexde等于1
nextindex = 1
}
//先将olis的小圆点的样式清除
olis.forEach(item => {
item.className = ""
})
//在将olis的小圆点背景颜色依次按照index的值改变
olis[nextindex -1].className = "target"
//调用封装的多属性运动函数
animate(ul,{left: -(nextindex -1)*800},1000)
}
//开启定时器,执行2秒依次
timer = setInterval(move,2000)
//利用封装的事件监听函数 设置box的移入移除样式
on(box,"mouseover",function(){
clearInterval(timer)
})
on(box,"onmouseout",function(){
timer = setInterval(move,2000)
})
//利用封装的事件监听函数,设置下面小圆点的点击事件
on(ol,"click",function(e){
//目标target确定点击的函数 li
if(e.target.nodeName == "LI"){
//olis 小圆点遍历 循环,先清空初始化样式
olis.forEach((item,index) => {
//想清空
item.className = ""
//减time 的是属性值 设置为 index(下标),
item.setAttribute("index",index)
})
//先清空的之后 在设置小圆点的背景颜色
e.target.className = "target"
// 要让相对应的哪一个 li 显示,
let index = e.target.getAttribute("index")
// 再将index的值给nextindex
nextindex = index
//调用上面的函数
move()
}
})
// 右边按钮点击事件 显示下一张
on(rightbtn,"click",function(){
move()
})
on(rightbtn,"click",function(){
nextindex -= 2
if(nextindex < 0){
ul.style.left = 5
nextindex = 4
}
move()
})
//-----下面是---封装的函数--------------------------------------------
//另外一个文件的封装函数
/*
@param ele DOM 元素
@param options 对象 所有要改变属性的目标值 {left:500,top:1000}
@param speed 运动经过的时间
@param fn 运动执行完毕的回调函数
*/
function animate(ele, options, speed,fn) {
// fn 是如果所有的运动执行完了以后 再来执行的函数
// 一开始先清除定时器
clearInterval(ele.timer)
// 获取初始值和计算运动区间,获取起始时间
let start = {}, range = {}, startTime = new Date().getTime()
for (var key in options) {
// 分别获取初始值
start[key] = parseFloat(css(ele, key))
// 分别计算区间值
range[key] = options[key] - start[key]
}
// console.log(range);
ele.timer = setInterval(function () {
// 获取当前的时间 并且计算时间差
let cha = Math.min(new Date().getTime() - startTime, speed)
for (var key in options) {
// 计算要设置的结果
let result = range[key] / speed * cha + start[key]
//给元素设置属性值
ele.style[key] = result + "px"
}
// 判断停止条件 当经过的时间和我传入的时间一样 就停止运动
if (cha >= speed) {
clearInterval(ele.timer)
// 判断用户有没有传入这个函数 如果传入了就调用 如果没有就不调用
fn && fn()
}
}, 10)
}
/*
添加事件监听
@param ele DOM元素
@param type 事件类型
@param callback 回调函数 事件处理函数
*/
function on(ele, type, callback) {
if (ele.addEventListener) {
if (type.indexOf("on") === 0) {
type = type.slice(2)
}
ele.addEventListener(type, callback)
} else {
if (type.indexOf("on") !== 0) {
type = "on" + type
}
ele.attachEvent(type, callback)
}
}
//获取元素封装
function $(id){
return document.querySelector(id)
}
function $$(id){
return document.querySelectorAll(id)
}
</script>
</body>
</html>
轮播图,封装函数,样式
最新推荐文章于 2022-06-13 18:42:25 发布