首页 > 代码库 > 用js写的简单轮播特效

用js写的简单轮播特效

2024-08-13 17:55:47   219人阅读


效果如下

技术分享

功能分析

1.每隔1秒换一张图片

2.鼠标移入停止切换、鼠标离开继续切换

3.鼠标移入到数字上面的时候,显示和数字对应的图片,并且停止切换,被选中的数字,背景显示橙色

4.鼠标离开数字,从该数字后面继续显示

代码如下

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style type="text/css">
		div,
		img,
		ul,
		li {
			padding: 0px;
			margin: 0px;
		}
		
		.content {
			width: 480px;
			height: 300px;
			border: 1px solid red;
			margin: 100px auto;
		}
		
		img {
			width: 100%;
			height: 100%;
			padding-bottom: 10px;
		}
		
		ul li {
			list-style: none;
			float: left;
			border: 1px solid orange;
			height: 30px;
			width: 58px;
			text-align: center;
			line-height: 30px;
		}
	</style>
</head>

<body>
	<div class="content">
		<img src="http://www.mamicode.com/img/1.jpg" >
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
		</ul>

	</div>
	<script type="text/javascript">
		

		var oImg = document.getElementsByTagName(‘img‘)[0];
		var count = 1;
		function changePic(){
			count ++;
			if (count > 8) {
				count = 1;
			}
			oImg.src = ‘img/‘+count+ ‘.jpg‘;

		}
		var interID = setInterval(changePic, 1000);
		//鼠标移入停止播放
		oImg.onmouseover = function(){
			clearInterval(interID);
			
		}
		//鼠标移出继续播放
		oImg.onmouseout = function(){
				//console.log(interID);
				clearInterval(interID);
				interID = setInterval(changePic, 1000);	
				
		}
		//鼠标移入到数字上的时候,显示对应的图片
		var oLi = document.getElementsByTagName(‘li‘);
		//console.log(oLi.length);
		for (var num = 0; num < oLi.length; num++) {
			//给每个li标签增加属性，保存当前的索引位置
			oLi[num].index = num;
			//移到到数字上,停止播放
			oLi[num].onmouseover = function(){
				//停止播放
				clearInterval(interID);
				this.style.background = ‘orange‘;
				count = this.index;
				//调用循环播放图片方法
				changePic();
			}
			//移出时,继续从停止的地方播放
			oLi[num].onmouseout = function(){
				clearInterval(interID);
				interID = setInterval(changePic, 1000);
				this.style.background = ‘white‘;
				count = this.index;
				changePic();
			}
		}
	</script>
</body>

</html>


本文出自 “流体石头博客” 博客，请务必保留此出处http://flowstone.blog.51cto.com/8188216/1853451

用js写的简单轮播特效


联系
我们