码迷,mamicode.com
首页 > Web开发 > 详细

用js写的简单轮播特效

时间:2016-09-17 23:32:08      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:

效果如下

技术分享

功能分析

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="./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>

  

用js写的简单轮播特效

标签:

原文地址:http://www.cnblogs.com/loveyous/p/5879862.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!