JS学习日记--animation<3>

最新推荐文章于 2024-10-04 15:41:42 发布

风华正茂呀

最新推荐文章于 2024-10-04 15:41:42 发布

阅读量159

点赞数

分类专栏： JS学习日记文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_42149770/article/details/104143047

版权

JS学习日记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

实现水平轮播效果

主要思想：四张图片的话，就把第一张的一个复制放到最末尾，第四章的一个复制放到最开头，
当切换到第四章的时候就无动画的跳转到开头的第四张的复制上，切换到第一张的时候同理，其他的就没什么了，处理好当前图片的索引值与实际图片数量的关系即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>水平轮播</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
				
			}
			.slider{
				width: 700px;
				height: 400px;
				position: relative;
				overflow: hidden;
			}
			.list{
				position: absolute;
				
			}
			.item{
				width: 700px;
				height: 400px;
				float: left;
			}
			img{
				
				width: 700px;
				height: 400px;
				display: block;
			}
			.prev{
				position: absolute;
				top: 150px;
				width: 70px;
				height: 90px;
				opacity: 0.7;
				
			}
			.next{
				position: absolute;
				right: 0px;
				top: 150px;
				width: 70px;
				height: 90px;
				opacity: 0.7;
				
			}
			.bullet{
				left: 250px;
				width: 30px;
				height: 30px;
				background-color: #FF0000;
				margin-left: 5px;
				top: 350px;
				position: relative;
				float: left;
				cursor: pointer;
			}
			.focus
			{
				background-color: #FFFF00;
			}
		</style>
	<script src="../js/animation.js" type="text/javascript" charset="utf-8"></script>
	
	<script type="text/javascript" >
		
		window.onload=function()
		{
			var currentIndex;
			var lis;
			var liWidth;
			var len;
			var list;
			var bullets;
			var id;
			init();
			function init()
			{
				
				currentIndex=1;
				var li_1=document.getElementsByClassName('item')[0];
				var copy_1=li_1.cloneNode(true);
				var li_last=document.getElementsByClassName('item')[3];
				var copy_last=li_last.cloneNode(true);
				 list=document.getElementsByClassName('list')[0];
				list.appendChild(copy_1);
				list.insertBefore(copy_last,li_1);
				lis=document.getElementsByClassName('item');
				
				liWidth=lis[0].offsetWidth;
				list.style.left=-liWidth+'px';
				 len=lis.length;
				list.style.width=liWidth*len+'px';
				document.getElementsByClassName('prev')[0].onclick=function(){
					sliderPrve();
				}
				document.getElementsByClassName('next')[0].onclick=function(){
					sliderNext();
				}
				 bullets=document.getElementsByClassName('bullet');
				for(var i=0;i<bullets.length;i++)
				{
					bullets[i].index=i;
					bullets[i].onclick=function()
					{
						currentIndex=this.index+1;
						sliderTo(currentIndex);
					}
				}
				
				var slider=document.getElementsByClassName('slider')[0];
				slider.onmouseover=function()//移入停止轮播
				{
					stop();
				}
				slider.onmouseout=function()//移出继续
				{
					auto();
				}
				auto();
				
			}
			
			function sliderNext()
			{
				currentIndex++;
				sliderTo(currentIndex);
			}
			function sliderPrve()
			{
				currentIndex--;
				sliderTo(currentIndex);
			}
			function sliderTo(index)
			{
				 
				if(index===len){
					currentIndex=index=2;
					list.style.left=-liWidth+'px';
				}
				if(index===-1)
				{
					currentIndex=index=len-3;
					list.style.left=-(len-2)*liWidth+"px";
				}
				
				console.log(index);
				if(index===0)
				{
					focusIndex=bullets.length-1;
				}else if(index===len-1){
					focusIndex=0;
				}else{
					focusIndex=index-1;
				}
			
				document.querySelector('.focus').className='bullet';
				bullets[focusIndex].className='bullet focus'
				
				var left=-index*liWidth;
				
				animate(list,{left:left})
				
		
				
			}
			function auto()//自动轮播
			{
				clearInterval(id);
				id=setInterval(function()
				{
					sliderNext();
				},4000)
			}
			
			function stop()//停止自动轮播
			{
				clearInterval(id);
			}
			
			
			
			
		}
		
	</script>
	
	
	
	
	
	
	
	
	</head>
	<body>
		<div class="slider">
			<ul class="list">
				<li class="item "id="1"><img src="../img/img (1).jpg" alt=""></li>
				<li class="item"id="2"><img src="../img/img (2).jpg" alt=""></li>
				<li class="item"id="3"><img src="../img/img (3).jpg" alt=""></li>
				<li class="item"id="4"><img src="../img/img (4).jpg" alt=""></li>
			</ul>
			<button type="button" class="prev"><</button>
			<button type="button" class="next">></button>
			<ul class="pagination">
				<li class="bullet focus">1</li>
				<li class="bullet">2</li>
				<li class="bullet">3</li>
				<li class="bullet">4</li>
			</ul>
		</div>
	</body>
</html>