焦点定时式轮播图

未晏

于 2019-11-26 10:48:51 发布

阅读量146

点赞数

分类专栏： js 前端文章标签： js焦点定时式轮播图轮播图 js

本文链接：https://blog.csdn.net/StruggleK/article/details/103252041

版权

js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>焦点定时式轮播图</title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}
		.outer {
			width: 790px;
			height: 340px;
			padding: 5px;
			border: 1px solid gray;
			margin: 100px auto 0;
			position: relative;
		}

		.inner {
			width: 790px;
			height: 340px;
			position: relative;
			overflow: hidden;
		}

		.inner ul {
			width: 600%;
			list-style: none;
			position: absolute;
			left: 0;
			top: 0;
		}
		.inner ul li {
			float: left;
			margin-right: 5px;
		}

		.btn {
			width: 120px;
			padding: 8px;
			background-color: hsla(0,0%,100%,0.3);
			position: absolute;
			left: 50%;
			bottom: 20px;
			border-radius: 15px;
			margin-left: -60px;
		}
		.btn span {
			float: left;
			height: 12px;
			width: 12px;
			border-radius: 50%;
			/*background-color: white;*/
			margin: 0 6px;
		}
		.acrile {
			background-color: white;
		}
		.acrile.active {
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="outer">
		<div class="inner">
			<ul>
				<li><img src="images/banner-1.jpg" alt=""></li>
				<li><img src="images/banner-2.jpg" alt=""></li>
				<li><img src="images/banner-3.jpg" alt=""></li>
				<li><img src="images/banner-4.jpg" alt=""></li>
				<li><img src="images/banner-5.jpg" alt=""></li>
			</ul>
		</div>
		<div class="btn">
			<span class="acrile active"></span>
			<span class="acrile"></span>
			<span class="acrile"></span>
			<span class="acrile"></span>
			<span class="acrile"></span>
		</div>                 
	</div>
	<!-- 外接js -->

	<script type="text/javascript">
		//获取ul
		var ul=document.getElementsByTagName('ul')[0];
		//获取所有span
		var spans=document.getElementsByClassName('acrile');
		// 设置循环遍历数组
		var count=1;

		ul.onmouseover=function(){
			clearInterval(autoplayId);
		}

		ul.onmouseout=function(){
			autoplay();
		}


		  function autoplay(){
			 autoplayId=setInterval(function(){
				count=(count>4)?0:count;
				for (var i = 0; i < spans.length; i++) {
					//设置点击事件
						spans[i].className='acrile';
						}
						spans[count].className='acrile active';
						//将移动坐标赋值给一个声名变量
						var zuobiao=count*-795;
						//运行移动函数
						aaa(ul,zuobiao);
				count++;
			},3000);			
		}

		autoplay();

		for(var i = 0;i< spans.length;i++){
			//给按钮绑定索引
			spans[i].inde = i;
			spans[i].onmouseover = function(){
				//先切换按钮的样式，使用排他思想，先将所有的样式置为白色的
				clearInterval(autoplayId);
				for(var j = 0;j< spans.length;j++){
					spans[j].className = 'acrile';	
				}
				//将自己的样式改为红色
				this.className = "acrile active";

				//移动图片
				aaa(ul,this.inde * -795);
				count=this.inde+1;
			}
			spans[i].onmouseout = function(){
				autoplay();
			}
		}
		function aaa (a,b){//设置移动函数
			//清除定时器
			clearInterval(a.ccc);
			//设置自己的移动定时器
			a.ccc=setInterval(function(){//设置移动函数
				//设置停止条件
				if(a.offsetLeft==b){
					//条件达成，清除定时器
					clearInterval(a.ccc);
				}
				//条件不达成，运行else
				else {
					// 声明一个变量
					var ddd=0;
					//设置移动条件
					if((b-a.offsetLeft)>0){
						//条件达成，增加多少像素点
						ddd= Math.ceil((b-a.offsetLeft)/10);
					}
					else {
						//条件不达成，减少多少像素点
						ddd=Math.ceil((b-a.offsetLeft)/10-1);
					}
					//最后增加左定位的像素点
					a.style.left = a.offsetLeft+ddd+'px';
				}
			},30);//设置间隔多少时间运行一次
		}
	</script>
</body>
</html>