轮播图,封装函数,样式

最新推荐文章于 2022-06-13 18:42:25 发布

仰望星空001

最新推荐文章于 2022-06-13 18:42:25 发布

阅读量244

点赞数

本文链接：https://blog.csdn.net/weixin_45789271/article/details/102988611

版权

<!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">&lt;</div>
		        <div id="right">&gt;</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>

仰望星空001

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
轮播图,封装函数,样式

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } #box {...
复制链接

扫一扫