前端-----轮播图（焦点图）

最新推荐文章于 2022-08-12 16:57:09 发布

Lsx～

最新推荐文章于 2022-08-12 16:57:09 发布

阅读量641

点赞数 1

分类专栏： JavaScript Web前端分享一下我的心得文章标签： javascript js 前端

本文链接：https://blog.csdn.net/weixin_47339511/article/details/111699809

版权

分享一下我的心得同时被 3 个专栏收录

53 篇文章 0 订阅

订阅专栏

Web前端

36 篇文章 1 订阅

订阅专栏

JavaScript

24 篇文章 1 订阅

订阅专栏

原生js

！！！只需要改变img的src即可，其他功能都是动态生成的！！！

功能展示：

HTML：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/focus.css"/>
		<!-- 这个动画必须写到focus.js上面，必须先要有这个动画 -->
		<script src="js/animate.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/focus.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="focus">
			<ul class="focus_ul">
				<li><a href="javascript:;"><img src="images/focus1.jpg" ></a></li>
				<li><a href="javascript:;"><img src="images/focus2.jpg" ></a></li>
				<li><a href="javascript:;"><img src="images/focus3.jpg" ></a></li>
				<li><a href="javascript:;"><img src="images/focus4.jpg" ></a></li>
			</ul>
			<ul class="smallcircle">
				
			</ul>
			<a class="arrow_l" href="javascript:;">&lt;</a>
			<a class="arrow_r" href="javascript:;">&gt;</a>
		</div>
	</body>
</html>

CSS3：

*{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
}
li{
	list-style: none;
}
.focus{
	overflow: hidden;
	position: relative;
	width: 721px;
	height: 455px;
	margin: 100px auto;
}
.focus_ul li{
	float: left;
}
.focus_ul{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 600%;
	height: 454px;
	background-color: red;
}
.smallcircle{
	position: absolute;
	top: 420px;
	left: 50%;
	margin: 0 0 0 -50px;
}
.smallcircle li{
	float: left;
	width: 20px;
	height: 20px;
	/* background-color: transparent; */
	border: 2px solid #fff;
	border-radius: 50%;
	margin: 0 10px 0 0;
	cursor: pointer;
	text-align: center;
}
.current{
	background-color: green;
}
.arrow_l{
	display: none;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 30px;
	height: 50px;
	background: rgba(0,0,0,.3);
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	text-align: center;
	line-height: 50px;
	font-size: 25px;
	color: #fff;
	z-index: 999;
}
.arrow_r{
	display: none;
	position: absolute;
	top: 50%;
	right: 0px;
	width: 30px;
	height: 50px;
	background: rgba(0,0,0,.3);
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	text-align: center;
	line-height: 50px;
	font-size: 25px;
	color: #fff;
	z-index: 999;
}

JavaScript：
animate.js：

function animate(obj, target, callback){
			//callback = function(){};
			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';
			},30)
		}

focus.js:

window.onload=function(){
	var arrow_l = document.querySelector('.arrow_l');
	var arrow_r = document.querySelector('.arrow_r');
	 var focus = document.querySelector('.focus');
	 var smallcircle = focus.querySelector('.smallcircle');
	 focus.addEventListener('mouseenter',function(){
		 arrow_l.style.display='block';
		 arrow_r.style.display='block';
		 clearInterval(timer);
		 timer=null;//清除定时器变量
	 })
	 focus.addEventListener('mouseleave',function(){
	 		 arrow_l.style.display='none';
	 		 arrow_r.style.display='none';
	 		 timer = setInterval(function(){
			 		 arrow_r.click();
			 },3000)
	 })
	 //动态生成小圆圈
	 var focus_ul = focus.querySelector('.focus_ul');
	 var focusWidth=focus.offsetWidth;
	 //console.log(focusWidth);
	 
	 //console.log(focus_ul.children.length);
	 for(var i=0;i<focus_ul.children.length;i++){
		 var li = document.createElement('li');
		 li.innerHTML=i;
		 li.setAttribute('data-index',i);
		 smallcircle.appendChild(li);
		 li.addEventListener('click',function(){
			 for(var i=0;i<smallcircle.children.length;i++){
				 smallcircle.children[i].className='';
				 this.className='current';
			 }
			 var index = this.getAttribute('data-index');
			 num=index;//解决bug
			 circle=index;//解决bug
			animate(focus_ul, -index*focusWidth);
		 })
		 
	 }
	 smallcircle.children[0].className='current';
	 var first_li = focus_ul.children[0].cloneNode(true);
	 focus_ul.appendChild(first_li);
	 console.log(first_li);
	 var num=0;
	 var circle=0;
	 //节流阀
	 var flag=true;
	 arrow_r.addEventListener('click',function(){
		if(flag){
			flag=false;
			if(num == focus_ul.children.length-1){
						 focus_ul.style.left=0;
						 num=0;
			}
			num++;
			animate(focus_ul, -num*focusWidth, function(){
				flag = true;
			});
			
			
			circle++;
			if(circle==smallcircle.children.length){
						 circle=0;
			}
			for(i=0;i<smallcircle.children.length;i++){
						 smallcircle.children[i].className='';		  
			}
			smallcircle.children[circle].className='current';
		}
	 })
	 
	 arrow_l.addEventListener('click',function(){
	 		if(flag){
				flag=false;
				if(num == 0){
								 num=focus_ul.children.length-1;
					 			 focus_ul.style.left=-num*focusWidth+'px';		 
				}
				num--;
				animate(focus_ul, -num*focusWidth, function(){
					flag = true;
				});
				
				circle--;
				if(circle<0){
					 			 circle=smallcircle.children.length-1;
				}
				for(i=0;i<smallcircle.children.length;i++){
					 			 smallcircle.children[i].className='';		  
				}
				smallcircle.children[circle].className='current'; 
			}
	 })
	 
	 //自动播放轮播图
	 var timer = setInterval(function(){
		 arrow_r.click();
	 },3000)
}

Lsx～

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端-----轮播图（焦点图）

原生js！！！只需要改变img的src即可，其他功能都是动态生成的！！！功能展示： HTML：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/focus.css"/> <!-- 这个动画必须写到focus
复制链接

扫一扫

专栏目录