dom轮播图的实现

dom轮播图的实现

效果图：

html:

<div class="carousel">
			<!-- 轮播图片 -->
			<div class="carousel-content clearfix">
				<ul id="carousel-img">
					<li><img src="carousel_item/carousel-5.jpg" alt=""></li>
					<li><img src="carousel_item/carousel-6.jpg" alt=""></li>
					<li><img src="carousel_item/carousel-7.jpg" alt=""></li>
					<li><img src="carousel_item/carousel-8.jpg" alt=""></li>
					<li><img src="carousel_item/carousel-5.jpg" alt=""></li>
				</ul>
			</div>
			<!--轮播指示器 -->
			<a href="javascript:;" class="carousel-prev"></a>
			<a href="javascript:;" class="carousel-next"></a>
			<!-- 轮播焦点 -->
			<ul class="carousel-item clearfix">
				<li class="active" data-i="0"></li>
				<li  data-i="1"></li>
				<li  data-i="2"></li>
				<li  data-i="3"></li>
			</ul>
		</div>

javascript:

			<script type="text/javascript">
					var ulImg=document.getElementById('carousel-img');
					var liItem=document.querySelector('.carousel-item');
					var lis=liItem.children;//每个焦点li
					var count=4;// 图片总数量
					var i=0;//图片初始页码
					var mLeft=1000;//每个li的宽度
					// 定义一个移动函数
					function moveTo(n){
						//点击轮播焦点跳转对应图片
						if(n==undefined){
							// 如果没有输入跳转位置则默认下一张
							 n=i+1;
						}
						if(i==0){
							if(n>i){
								ulImg.className="transition";//如果图片从第一张开始 就是添加过渡的class
							}else{
								ulImg.className="";
								ulImg.style.marginLeft=-count*mLeft+'px';//移动到最后一张
								setTimeout(function(){
									moveTo(count-1)  //跳转到conut-1的位置
								},100);
								return;
							}
						}
						i=n;//把目标位置的值赋给i;
						ulImg.style.marginLeft=-i*mLeft+'px';
						//清除所有焦点li的class
						for(var lii of lis){
							lii.className='';
						}
						if(i==count){
							//此时图片已经滑动到最后一张
							i=0;
							setTimeout(function(){
								ulImg.className="";
								ulImg.style.marginLeft=0+'px';
							},500);
						}
						// 给选择的li添加class
						lis[i].className='active';
					}
					//获取作用指示a
					var btnLeft=document.querySelector('.carousel-prev');
					var btnRight=document.querySelector('.carousel-next');
					btnLeft.onclick=function(){
						 move(-1);//向右移动
					}
					var canClick=true;//定义一个开关变量 只有图片切换下一张完成 才可以触发点击事件
					function move(n){
						if(canClick){
							moveTo(i+n);
							canClick=false;
							setTimeout(function(){
								canClick=true;
							},500)
						}
					}
					btnRight.onclick=function(){
						move(1); //向左移动
					}
					// 给每个li绑定事件 以事件委托的方式只需要给父元素liItem绑定一次事件就可以
					liItem.onclick=function(e){
						if(canClick){
							if(e.target.nodeName=="LI"){
								if(e.target.className!=="active"){
									//找到触发事件的li 
									for(var i=0;i<lis.length-1;i++){
										if(lis[i]==e.target){
											break;
										}
									}
									//console.log(i)
									moveTo(i);
									canClick=false;
									setTimeout(function(){
										canClick=true;
									},500);
								}
							}
						}
					}
					//开启定时器 自动轮播
					var timer=setInterval(function(){
						moveTo();
					},1500)
					var carousel=document.querySelector('.carousel');
					// 鼠标移入清除定时器
					carousel.onmouseover=function(){
						clearInterval(timer);
					}
					//鼠标移出 开启定时定时器
					carousel.onmouseout=function(){
							timer=setInterval(function(){
							moveTo();
						},1500)
					}
			</script>

css:

<title>轮播图的实现</title>
		<style>
			*{margin: 0;padding: 0;}
			ul{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			.carousel{
				position: relative;
				width: 1000px;
				margin: 50px auto;
				cursor: pointer;
			}
			.carousel-content{
				width: 1000px;
				overflow: hidden;
			}
			#carousel-img{
				width: 5000px;
				margin-left:0;
			}
			#carousel-img li {
				float: left;
				width: 1000px;
				height:300px;
			}
			#clearfix::after{
				display: block;
				content: '';
				clear: both;
			}
			#carousel-img li>img{
				width: 100%;
			}
			#carousel-img .transition{
				transition: all .5s linear; 
			}
			.carousel-prev,.carousel-next{
				position: absolute;
				width: 60px;height: 60px;
				top:120px;
				transition: transfrom .5;
			}
			.carousel-prev:hover,.carousel-next:hover{
				transform:scale(1.1);
			}
			.carousel-prev{
				left: 20px;
				background: url(carousel_item/left_ar.png) no-repeat center;
			}
			.carousel-next{
				right: 20px;
				background: url(carousel_item/right_ar.png) no-repeat center;
			}
			.carousel-item{
				position: absolute;
				bottom: 20px;
				left:50%;
				transform:translateX(-50%) ;
			}
			.carousel-item li {
				float: left;
				width: 20px;height: 20px;
				background-color: #fff;
				border-radius: 10px;
				cursor: pointer;
			}
			.carousel-item li+li{
				margin-left: 10px;
			}
			.carousel-item .active{
				background-color:purple;
				color: #fff;
			}
		</style>
```**  轮播图是前端人员，必须要会的一项技能，对于自己的逻辑也有一定的锻炼 
网上还有很多不错的轮播效果 ，这个轮播图js部分基本上都基于dom来实现的，眼过千遍，
不如手过一遍，自己也整理了下分享给大家，觉得对自己有用的伙伴，可以给我点个赞哦！
 **