实践焦点轮播图效果-优快云博客

本文链接：https://blog.youkuaiyun.com/zhiyang_csdn/article/details/77450889

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>实践 - 焦点轮播图效果</title>
</head>
<body>
	<div class="main" id='main'>
		<ul id="picimg">
			<li><img src="https://pic.imeigoo.com/images/2017/07/02/1OL__1.jpg" alt=""></li>
			<li><img src="https://pic.imeigoo.com/images/2017/07/02/2__1.jpg" alt=""></li>
			<li><img src="https://pic.imeigoo.com/images/2017/07/02/3__1.jpg" alt=""></li>
			<li><img src="https://pic.imeigoo.com/images/2017/07/02/4__1.jpg" alt=""></li>
			<li><img src="https://pic.imeigoo.com/images/2017/07/02/13__1.jpg" alt=""></li>    
		</ul>
		<ol id="liston">
			<li class="button">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ol>
	</div>
</body>
</html>

<style>
		*{margin:0;padding:0;list-style:none;}
		.main{position:relative;overflow:hidden;margin:60px auto;margin:100px auto;width:800px;height:400px;}
		.main ul{position:absolute;}
		.main ul li{height:400px;}
		.main ol{position:absolute;right:5px;bottom:10px;}
		.main ol li{float:left;margin-left:5px;width:20px;height:20px;background:#ccc;color:#000;text-align:center;line-height:center;cursor:pointer;border-radius: 26px;font-size: 14px;}
		.main ol .button{background:#E97305;color:#fff;}
	</style>

<script type="text/javascript">
	/*
	运用到的知识点:
		setInterval() 动作的作用是在播放动画的时，每隔一定时间就调用函数，方法或对象。使用该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭
		clearInterval() 方法能够取消setInterval()方法设置的定时器 此方法的参数必须是要取消相应的setInerval()方法的返回值。
		onmouseover() 鼠标指针移动到元素上时触发
		onmouseout() 事件会在鼠标指针移出指定的对象时发生

	*/

	//1.页面加载后执行，获取整个容器所有存放数据索引的li(liston)及放图片列表的ul(picimg);定义存放定时器的变量timer，存放当前索引的变量index;
		window.onload = function(){
	    var main = document.getElementById('main');
	    var picimg = document.getElementById('picimg').getElementsByTagName("li");
	    var liston = document.getElementById('liston').getElementsByTagName('li');
	    var index = 0;     //存放当前索引的变量index
	    var timer = null;  //定义存放定时器的变量

	//2.定义图片切换播放函数
	    function changePicimg (indexID) {           //图片切换行为封装为一个函数,方便其他地方调用
	      for (var i = 0; i < picimg.length; ++i) { //循环遍历图片列表
	        picimg[i].style.display = "none";       //获取到某一个图片，设置样式为隐藏
	        liston[i].className = "";               //按钮列表对应的某一个，样式设置为空
	      }
	      picimg[indexID].style.display = "block";  //根据当前索引的值，设置显示样式
	      liston[indexID].className = "button";         //按钮列表根据当前的索引的值，设置样式;
	    }
	//3.给索引值设置个限制，当索引大于或者等于图片列表个数时，索引值为0,图片切换播放函数就会一直循环播放
	    function autoPlay () {
			if(++index >= picimg.length){ 
			index = 0;
			}
			changePicimg(index); //调用图片切换播放函数，index为参数
	    }

	//4.定义定时器并调用自动图片切换播放函数，每一秒钟执行一次
	    timer = setInterval(autoPlay, 1000);

	//5.鼠标划过整个容器时停止自动播放，停止了函数就不会运行了
	    main.onmouseover = function () {
	      	clearInterval(timer); // 取消setInterval()方法设置的定时器
	    }

	//6.鼠标离开整个容器时继续播放至下一张
	    main.onmouseout = function () {
	      	timer = setInterval(autoPlay, 1000);
	    }

	//7.遍历所有数字按钮导航实现划过切换至对应的图片
		for (var i = 0; i < liston.length; i++) {
			liston[i].onmouseover = function () { //当鼠标划过某一项
				clearInterval(timer); //取消setInterval()方法设置的定时器
				index = this.innerText - 1;  //当前文本减1
				changePicimg(index);
			}
		}

   	};
	</script>