轮播图的简单实现

html实现代码：用于内容的显示

<div class="web">
			<div id="left" class="iconfont icon-xiangzuo"></div>
			<div id="right" class="iconfont icon-tubiaozhizuomoban"></div>
			<ul>
				<li><img src="img/porsche-normal.jpg"/></li>
				<li><img src="img/porsche-normal (2).jpg"/></li>
				<li><img src="img/porsche-normal (1).jpg"/></li>
				<li><img src="img/porsche-normal (3).jpg"/></li>
				<li><img src="img/porsche-normal (4).jpg"/></li>
			</ul>
			<div class="circle">

			</div>
		</div>

css设置内容的起初样式

<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.web{
				transform: translateY(40%);
				width: 790px;
				height: 340px;
				border-radius: 40px;
				position: relative;
				overflow: hidden;
				margin: 0 auto;
			}

			ul{
				width: 999999px;
				height: 340px;
			}
			ul>li{
				width: 790px;
				list-style:none;
				height: 340px;
				float: left;

			}
			ul::after{
				content: "";
				display: block;
				clear: both;
			}
			img{
				width: 790px;
				height: 340px;
			}
			#left,#right{
				position: absolute;
				width: 50px;
				height: 340px;
				color: rgba(255,255,255,0.7);
				text-align: center;
				line-height: 340px;
				font-size: 40px;
				top: 0;
				background: rgba(0,0,0,0.7);
				z-index: 1;
				display: none;
			}
			.web:hover>#left{
				display: block;
			}
			.web:hover>#right{
				display: block;
			}
			#left{
				left: 0;
			}
			#right{
				right: 0;
			}
			.circle{
				position: absolute;
				top: 90%;
				left: 50%;
				z-index: 2;
				transform: translate(-50%,-50%);
			}
			.circle>div{
				float: left;
				margin-right: 5px;
				width: 15px;
				height: 15px;
				border-radius: 50%;
				background: rgba(255,255,255,0.5);
				list-style: none;
			}
			.circle::after{
				content: "";
				display: block;
				clear: both;
			}
		</style>

　js则是让效果实现

<script type="text/javascript">
			var web=document.getElementsByClassName(‘web‘)[0];
			var left=document.getElementById(‘left‘);
			var right=document.getElementById(‘right‘);
			var ul=document.querySelector(‘ul‘);
			var li=document.querySelectorAll(‘li‘);
			var lis=li.length;
			var width=li[0].offsetWidth;
			var cloneli=li[0].cloneNode(true);
			var clonelastli=li[lis-1].cloneNode(true);
			var btn=true;
			ul.appendChild(cloneli);
			ul.insertBefore(clonelastli,li[0]);
			ul.style.transform=‘translateX(-‘+width+‘px)‘;
			var i=1;
			var circle=document.getElementsByClassName(‘circle‘)[0];
			var div=circle.getElementsByTagName(‘div‘);

			//按右向左滑动
			for(var p=0;p<li.length;p++){
				var div1=document.createElement(‘div‘);
				div1.className=‘bgg‘;
				circle.appendChild(div1);
			}
			div[0].style.background=‘#FFFFFF‘;
			//自动轮播定时器
			var xm=window.setInterval(function(){
				to_right();
			},1000);

			function to_right(){
				btn=false;
				i++;
				for(var j=0;j<div.length;j++){
					div[j].style.background=‘rgba(255,255,255,0.5)‘;
				}
				ul.style.transform=‘translateX(-‘+(i*width)+‘px)‘;
				if(i-1<div.length){
					div[i-1].style.background=‘#FFFFFF‘
				}else{
					div[0].style.background=‘#FFFFFF‘;
				}
				ul.style.transition=‘all 0.5s linear‘;
				ul.addEventListener(‘transitionend‘,function(){
					btn=true;
					if(i==li.length+1){
						ul.style.transition=‘none‘;
						i=1;
						ul.style.transform=‘translateX(-‘+(i*width)+‘px)‘;
						getComputedStyle(ul).width;
						ul.style.transition=‘all 0.5s linear‘;
					}
				})
			};
			right.addEventListener(‘click‘,function(){

				if(btn){
					to_right();
				}
			});

			//导航
			function cir(){
				for(var k=0;k<div.length;k++){
					div[k].index=k+1;
					div[k].addEventListener(‘click‘,function(a){
						i=this.index;
						ul.style.transform=‘translateX(-‘+(i*width)+‘px)‘;
						ul.style.transition=‘all 0.5s linear‘;
						for(var l=0;l<div.length;l++){
							div[l].style.background=‘rgba(255,255,255,0.5)‘;
						};
						div[i-1].style.background=‘#FFFFFF‘;
					});

				}

			};
			cir();

				//鼠标放内容上边会把自动轮播效果取消
				web.addEventListener(‘mouseover‘,function(){
					clearInterval(xm);
				});
				//鼠标离开内容会重新触发定时器
				web.addEventListener(‘mouseout‘,function(){
					xm=setInterval(function(){
						to_right();
					},1000);
				})

			//按左向右滑动

			function to_left(){
				btn=false;
				i--;
				for(var w=0;w<div.length;w++){
					div[w].style.background=‘rgba(255,255,255,0.5)‘;
				}
				if(i>0){
						div[i-1].style.background=‘#FFFFFF‘;
					}
				if(i==0){
					div[div.length-1].style.background=‘#FFFFFF‘;
				}
				ul.style.transition=‘all 0.5s linear‘;
				ul.style.transform=‘translateX(-‘+(i*width)+‘px)‘;
				ul.addEventListener(‘transitionend‘,function(){
					btn=true;
					if(i==0){
						ul.style.transition=‘none‘;
						i=li.length;
						ul.style.transform=‘translateX(-‘+width*(li.length)+‘px)‘;
						getComputedStyle(ul).width;
						ul.style.transition=‘all 0.5s linear‘;
					}
				});

			};
			left.addEventListener(‘click‘,function(){

				if(btn){
					to_left();

				}

			});

		</script>

　　写的有点乱，新手，希望看过的大神们提出宝贵的意见！