自制轮播以及拖动效果实现

不支持ie，不支持上传视频，偶也木办法展现效果

$(function() {
	drag();
	setInterval(carousel,10000);
});

/**拖动效果实现start**/
function drag(){
	var div=document.getElementsByName("divRemove");
	let container=null;
	for(let i=0;i<div.length;i++){
		div[i].ondragstart=function(){
			container=this;
		}
		div[i].ondragover=function(){
			event.preventDefault();
		}
		div[i].ondrop=function(){
			if(container!=null&&container!=this){
				var thisParentNode=this.parentNode;
				var nextParentNode=container.parentNode;
				if(thisParentNode.getAttribute("class")=="list1"){
					this.getElementsByTagName('img')[1].style.width='60%';
					container.getElementsByTagName('img')[1].style.width='80%';
				}	
				if(nextParentNode.getAttribute("class")=="list1"){
					this.getElementsByTagName('img')[1].style.width='80%';
					container.getElementsByTagName('img')[1].style.width='60%';
				}
				let temp=document.createElement("div");
				var tempStyle=this.style;
				this.style=container.style;
				container.style=tempStyle;
				thisParentNode.replaceChild(temp,this);
				nextParentNode.replaceChild(this,container);
				thisParentNode.replaceChild(container,temp);
			}
		}
	}
}
/**拖动效果实现end**/


/**轮播效果实现start**/
function carousel(){
	var div=document.getElementsByName("divRemove");
	let container=null;
	if(div.length>1){
		//获取第一个对象
		//放入临时的对象中
		container=div[0];
		var thisParentNode;
		var nextParentNode;
		for(let i=0;i<div.length;i++){
			if(i!=div.length-1){
				//获取当前的对象的父级
				thisParentNode=div[i].parentNode;
				nextParentNode=div[i+1].parentNode;
				let temp=document.createElement("div");
				if(i==0){
					div[i].getElementsByTagName('img')[1].style.width='60%';
					div[i+1].getElementsByTagName('img')[1].style.width='80%';	
				}		
				var tempStyle=div[i].style;
				var nowNode=div[i];
				var nextNode=div[i+1]
				//将下一个对象属性付给上一个
				div[i].style=div[i+1].style;
				div[i+1].style=tempStyle;
				thisParentNode.replaceChild(temp,nowNode);
				nextParentNode.replaceChild(nowNode,nextNode);
				thisParentNode.replaceChild(nextNode,temp);
			}
		}
	}
}
/**轮播效果实现end**/

			<div class="listBox">
				<div class="left">
					<div class="list1"> 
					 <div class="divRemove" name="divRemove" draggable="true">
						<div class="titleBox" style="padding-left: 5px;" >
							<p class="titleContent">11111&emsp;<img src="img/img/peopleInformation/bt.png" style="width:4vw;height: 2vh;display: inline-block;vertical-align: middle;"/><img src="img/img/peopleInformation/bth.png" style="width:80%;height: 2vh;display: inline-block;vertical-align: middle;"></p>
						</div>
						<div class="leftBox" onclick="javascript:clickTag(this,1)"></div>
						<div class="contentBox" name="contentBox" id="containerdd"  style="width: 100%;height: 90%;">
							<div id=""  style="height: 100%;" draggable="true">111</div>
						</div>
						</div>
					</div>
				</div>
				<div class="right">
					<div class="list5"  >
						<div class="divRemove" name="divRemove" draggable="true" >
							<div class="titleBox" style="padding-left: 5px;">
								<p class="titleContent">22222&emsp;<img src="img/img/peopleInformation/bt.png" style="width:4vw;height: 2vh;"/><img src="img/img/peopleInformation/bth.png" style="width:60%;height: 2vh"/></p>
							</div>
							<div class="leftBox" >
								
							</div>
							<div class="contentBox" name="contentBox" id="curve" style="width: 100%;height: 90%;">
								  <div id=""  style="height:100%;" draggable="true">222</div>
							</div>
						</div>
						
					</div>
					<div style="height: 1vh;"></div>
					<div class="list6" >
						<div class="divRemove" name="divRemove" draggable="true">
							<div class="titleBox" style="padding-left: 5px;">
								<p class="titleContent">33333&emsp;<img src="img/img/peopleInformation/bt.png" style="width:4vw;height: 2vh;"/><img src="img/img/peopleInformation/bth.png" style="width:60%;height: 2vh;"</p>
							</div>
							<div class="leftBox" >
								
							</div>
							<div class="contentBox" name="contentBox" style="width: 100%;height: 90%;">
								<div id=""  style="height: 100%;" >333</div>
							</div>
						</div>
					</div>
				</div>
			</div>

	html,body {width: 100%;height: 100%;background-color: rgb(000,024,061,1);}
	.overflow {overflow: hidden;}
	.float {float: left;width: 50%;}
	.listBox { padding-left: 15px;padding-right: 15px;}
	.listBox .left {float: left;width: 71%;  background-color: rgb(0,0,0,0);}
	.listBox .list1 {padding:15px;height: 85vh;background-color: rgb(000,032,094,0.6);cursor: pointer;margin-right: 1vw;width: 99%;}
	.listBox .right {float: left;width: 28.5%; max-height: 300px;}
	.listBox .list5 {padding:15px;height: 42vh;background-color: rgb(000,032,094,0.6);cursor: pointer;width: 99%;}
	.listBox .list6 {padding:15px;height: 42vh;background-color: rgb(000,032,094,0.6);cursor: pointer;width: 99%;}
	.listBox .center{float: left;width: 46%;}
	.title_log {height: 10vh;margin-left:1% ;margin-right: 1%;padding-top:0% ;cursor: pointer;background: url(../img/images/title_2.png) center top no-repeat;background-size: 100% 60%;}
	.title_log #times {float: right;margin-top: 6vh;margin-right: 1vw;font-size: 1vw;color: #38C4F5;}
	.title {color:#98adff;font-size: 3vh;position: fixed;top: 0.5%;left: 50%;transform: translateX(-50%);}
	.titleBox {width:100%;height: 5vh;}
	.titleContent {width: 100%;height: 26px;line-height: 26px;font-size: 1.125rem;color: #d2dbff;font-family: "微软雅黑";}
	.divRemove{height: 100%;}