前端作业-图片轮播

最新推荐文章于 2024-05-17 06:14:41 发布

killer_queen4804

最新推荐文章于 2024-05-17 06:14:41 发布

阅读量634

点赞数 8

分类专栏：笔记文章标签： html html5 css javascript

本文链接：https://blog.csdn.net/weixin_52621204/article/details/120617961

版权

笔记专栏收录该内容

142 篇文章 0 订阅

订阅专栏

学完定时器就想来做一做，然而这个并不是我想象得这么简单，我以为在自动播放的基础上添加一个if条件即可，然而我基础不好，对于left和宽度的判断都不是很准确，写法也不规范，if判断老是失败，而且offseLeft的判断好像是实时的，这样我的想法更加实现不了了。于是找了个视频跟着做的，视频里还包括有点击圆点动画运动和图片自动轮播的功能，我就一并学习并写上了，下面含有代码注释（以防自己在忘掉。。。）

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="lunbo.css"/>
		<script src="animate.js"></script>
		<script src="lunbo.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
			
		<div id="div1">
			<a id="arrow1" class="arrow1" href="javascript:;"></a>
			<a id="arrow2" class="arrow2" href="javascript:;"></a>
			<ul id="ul">
				<li><a href="javascript:;"><img src="images/meilin1.jpg" height="400px" width="400px" ></a></li>
				<li><a href="javascript:;"><img src="images/meilin2.jpg" height="400px" width="400px" ></a></li>
				<li><a href="javascript:;"><img src="images/fate_aoerliang.jpg" height="400px" width="400px" ></a></li>
				<li><a href="javascript:;"><img src="images/zhende.jpg" height="400px" width="400px" ></a></li>
			</ul>
			<ol id="ol" class="circle">
				<!-- li></li>
				<li class="current"></li>
				<li></li>
				<li></li> -->
			</ol>
		</div>
	</body>
</html>

css代码

*{
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
}
#div1 {
	width: 400px;
	height: 400px;
	position: relative;
	margin: 150px 600px;
	overflow: hidden;
}
#div1 ul {
	width: 600%;
	position: absolute;
	left: 0;
	top: 0;
}
#div1 ul li {
	float: left;
	width: 400px;
	height: 400px;
}
#div1 ol {
	position: absolute;
	top: 375px;
	left: 10px;
	float: left;
}
ol li {
	float: left;
	background-color: white;
	margin: 0 6px;
	width: 8px;
	height: 8px;
	border-radius: 10px;
	cursor: pointer;
}
.current {
	background-color: #FF0000;
}
.arrow1,.arrow2 {
	display: none;
	z-index: 100;
	position: absolute;
	width: 50px;
	height: 50px;
}
.arrow1 {
	top: 200px;
	left: 0px;
	background:url(images/jiantou_zuo.png) no-repeat;
}
.arrow2 {
	top: 200px;
	left: 350px;
	background:url(images/jiantou_you.png) no-repeat;
}

js函数animate代码+js轮播实现代码

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);
			callback&&callback();//回调函数，运动函数实行完后，运行这个回调函数
		}
		obj.style.left=obj.offsetLeft+step+'px';
	},15);
}

window.addEventListener('load',function(){
	var arrow1=document.getElementById('arrow1');
	var arrow2=document.getElementById('arrow2');
	var oDiv=document.getElementById('div1');
	var num=0;
	var circle=0;
	//触摸显示箭头，鼠标离开箭头消失
	oDiv.onmouseover=function(){
		arrow1.style.display='block';
		arrow2.style.display='block';
		clearInterval(timer);//鼠标移入，图片自动轮播结束
		timer=null;
	}
	oDiv.onmouseout=function(){
		arrow1.style.display='none';
		arrow2.style.display='none';
		timer=setInterval(function(){
			arrow2.click();
		},2500)//鼠标离开，图片自动轮播再开始
	}
	var ol=document.getElementById('ol');
	var ul=document.getElementById('ul');
	var oDivwidth=oDiv.offsetWidth;
	//添加原点并实现排他思想
	for(var i=0;i<ul.children.length;i++){
		var li=document.createElement('li');
		//给圆圈编号
		li.setAttribute('index',i);
		ol.appendChild(li);
		li.onclick=function(){
			for(var i=0;i<ol.children.length;i++){
				ol.children[i].className='';
			}
			this.className='current';
			//点击圆圈，图片实现移动
			var index=this.getAttribute('index');
			num=circle=index;
			animate(ul,-index*oDivwidth);
		}
	}
	ol.children[0].className='current';
	//克隆第一张图片
	var fisrt=ul.children[0].cloneNode(true);
	ul.appendChild(fisrt);
	//实现左右箭头控制图片运动
	function circlechange(){
		for(var i=0;i<ol.children.length;i++){
			ol.children[i].className='';
		}
		ol.children[circle].className='current';
	}
	var flag=true;//节流阀
	arrow1.onclick=function(){
		if(flag){
			flag=false;
			if(num==0){
				num=ul.children.length-1;
				ul.style.left=-num*oDivwidth+'px';
			}
			num--;
			animate(ul,-num*oDivwidth,function(){
				flag=true;
			});
			//实现圆点跟踪图片
			circle--;
			if(circle<0){
				circle=ol.children.length-1;
			}
			circlechange();
		}
	}
	arrow2.onclick=function(){
		if(flag){
			flag=false;
			if(num==4){
				ul.style.left=0;
				num=0;
			}
			num++;
			animate(ul,-num*oDivwidth,function(){
				flag=true;
			});
			//实现圆点跟踪图片
			circle++;
			if(circle==ol.children.length){
				circle=0;
			}
			circlechange();
		}
	}
	//自动轮播功能
	var timer=setInterval(function(){
		arrow2.click();
	},2500)
})

效果

killer_queen4804

关注

8
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端作业-图片轮播

学完定时器就想来做一做，然而这个并不是我想象得这么简单，我以为在自动播放的基础上添加一个if条件即可，然而我基础不好，对于left和宽度的判断都不是很准确，写法也不规范，if判断老是失败，而且offseLeft的判断好像是实时的，这样我的想法更加实现不了了。于是找了个视频跟着做的，视频里还包括有点击圆点动画运动和图片自动轮播的功能，我就一并学习并写上了，下面含有代码注释（以防自己在忘掉。。。）html代码<!DOCTYPE html><html> &lt...
复制链接

扫一扫