前端学习----实现轮播图

实现轮播图

刚开始我看到这个问题 直接想到了里切换元素的display属性来实现

1. js--改变元素的display属性

就是这样一个 改变display来实现(ps:也说明了 display会让img大小为0)

//html
<div id="container">
	<ul id="img_div">
		<li><img src="image/imouto.png"></li>
		<li><img src="image/sanjiu.jpg"></li>
	</ul>
</div>
//css
		*{padding: 0;margin:0;}
		li{list-style: none;}
		#container{
			 300px;
			height: 300px;
			display: inline-block;
			overflow: hidden;
		}
		#img_div{
			 600px;
			margin-left: 0;
		}
		#img_div li{
			float: left;
		}
		#img_div li img{
			 300px;
			height: 300px;
		}
		.display{
			display:inline-block;
		}
		.not{
			display: none;
		}
//js
		function change_img(){
			var img_div=document.getElementById('img_div');
			for(var i=0;i<img_div.children.length;i++){
				if(img_div.children[i].children[0].getAttribute('class')=='display'){
					img_div.children[i].children[0].setAttribute('class','not');
					if(i==img_div.children.length-1){
						img_div.children[0].children[0].setAttribute('class','display');
					}else{
						img_div.children[i+1].children[0].setAttribute('class','display');
					}
					break;
				}
			}
		}
		setInterval(change_img, 1000);

增加上按钮 左右移动后的效果

//html
<div id="container">
		<div id="img_container">
			<a href="#"><img id="img" src="./imouto.png"></a>
		</div>
		<div id="btn">
			<div id="left">
				<a href="#">左</a>
			</div>
			<div id="right">
				<a href="#">右</a>
			</div>
		</div>
		<div id="dot">
			<ul id="ul-dot">
				<li class="active"><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
			</ul>
		</div>
	</div>
//css
*{padding:0;margin:0;}
		#container{
			 100%;
			height: 400px;
		}
		#img_container{
			height: 300px;
			 300px;
			margin:0 auto;
			border:1px solid yellow;
		}
		#img_container img{
			height: 300px;
			 300px;
		}
		#btn{
			text-align: center;
			line-height: 100px;
		}
		#left{
			 100px;
			height: 100px;
			margin-top: -200px;
			float: left;
		}
		#right{
			 100px;
			height: 100px;
			margin-top: -200px;
			float: right;
		}

		#dot{
			position: relative;
		}
		#ul-dot{
			 140px;
			padding:0 90px 0 80px;
			margin:0 auto;
			position: relative;
			top: -20px;
		}
		#ul-dot:after{
			content:' ';
			display: block;
			clear: both;
		}
		#ul-dot li{
			list-style:none;
			 20px;
			height: 20px;
			border-radius: 20px;
			background: lightblue;
			float: left;
			margin-left: 15px;		
		}
		.active{
        background-color: orangered !important;
    	}
//javascript
	//设置图片位置
	var imgUrl=['./imouto.png','./sanjiu.jpg','./imouto.png','./sanjiu.jpg'];
	//获取元素
	var container=document.getElementById('container');
	var img_container=document.getElementById('img_container');
	var img=document.getElementById('img');
	var left=document.getElementById('left');
	var right=document.getElementById('right');
	var dot=document.getElementById('dot');
	var li=document.getElementsByTagName('li');
	var num=0;
	var timer=null;
	//改变图片
	function changeImg(){
		img.src=imgUrl[num];
		for(var i=0;i<li.length;i++)
			li[i].className='';
		li[num].className='active';
	}

	container.onmouseover=function(event){
		clearInterval(timer);
	}
	//重点注意
	container.onmouseout=autoPlay;

	//点击按钮
	for(var i=0;i<li.length;i++){
		//注意 直接利用i改变num是不行的 
		//就像这样 num=i是不行的 因为循环结束后 i已经变成了4
		li[i].index=i;
		li[i].onclick=function(){
			num=this.index;
			changeImg();
		}
	}

	//自动播放
	function autoPlay(){
		timer=setInterval(function(){
			if(num==imgUrl.length-1)
				num=0;
			else
				num++;
			changeImg();
		},1500);
	}

	//左右点击
	left.onclick=function(event){
		if(num==0)
			num=imgUrl.length-1;
		else
			num--;
		changeImg();
	}

	right.onclick=function(event){
		if(num==imgUrl.length-1)
			num=0;
		else
			num++;
		changeImg();
	}

	setTimeout(autoPlay());

但是效果并不如意 因为切换时候一闪而过并不怎么美观
解决这个可以利用另外一种方式来写 利用transition 和 opacity 来实现

2.css实现轮播

利用动画来实现 本质上是改变ul标签的margin-left进行移动

//html
	<div id="slide">
		<div id="show">
			<ul id="auto">
				<li>one</li>
				<li>two</li>
				<li>three</li>
			</ul>
		</div>
	</div>
//css
		*{padding: 0px;margin:0px;}
		li{list-style: none;}
		#slide{
			 100%;
			height: 300px;
		}
		#show{
			 400px;
			height: 300px;
			margin:0 auto;
			overflow: hidden;
		}
		#auto{
			 1200px;
			height: 300px;
			margin:0 auto;
			animation: leftmove 10s infinite;
		}
		#auto li{
			 400px;
			height: 300px;
			float: left;
			text-align: center;
			line-height: 300px;
			font-size: 20px;
		}
		#auto li:nth-child(1){
			background: lightblue;
		}
		#auto li:nth-child(2){
			background: lightgreen;
		}
		#auto li:nth-child(3){
			background: yellow;
		}

		@keyframes leftmove{
			0%{
				margin-left: 0px;
			}
			33.3%{
				margin-left: -400px;
			}
			66.6%{
				margin-left: -800px;
			}
			99.9%{
				margin-left:0px;
			}
		}

还有是也可以利用点击进行切换
可以看这个博客https://www.jianshu.com/p/550c11f3b731