用JS手写一个爱奇艺轮播图

效果图

轮播的实现分析

1. 图片的变换是设置的DOM元素的display属性
2. 文字导航的则是为当前选中的标题添加额外的css样式达到的变换效果

全套代码

		ul,span{margin: 0;padding: 0;}
			body,ul{margin: 0;padding: 0;display: block;}
			ul li{list-style: none;}
			a{display: block;}
			img{width: 100%;height: 432px;}
			.focus-side-inner{width: 100%;height: 432px;background: #0082DD;position: relative;}
			.focus-side-inner .pic{width: 100%;height: 432px;}
			.focus-side-inner .pic .pic-list  li{display: none;}
			.focus-side-inner .pic .pic-list .pic-item{display: block;}
			.focus-side-inner .side-list{
				padding-top: 10px;width: 276px;height: 422px;background: #333333;opacity: 0.8;
				position: absolute;z-index: 55;right: 50px;top: 0;margin-right: 50px;
			}
			.focus-side-inner .side-list .side-item{width: 275px;height: 36px;	 }
			.focus-side-inner .side-list .side-item a{
				width: 250px;height: 36px;text-align: left;line-height: 36px;
				text-decoration: none;color: #fff;margin-left:15px ;
			}	
			.side-title{
				font-size: 25px;transition: font-size 0.3s;color: green;
				font-weight: bold;display: block;text-align: left;
			}	
			.side-colon{display: none;}
			.side-desc{color: green;text-align: left;display: block;}		

<div class="focus-side-inner">
				<div class="pic">
					<ul class="pic-list">
						<li class="pic-item"><img src="http://pic0.iqiyipic.com/common/lego/20190801/8c6422ebd5b94e43b241b533666720f8.jpg" ></li>
						<li><img src="http://pic2.iqiyipic.com/common/lego/20190806/25ebc9919c7e44e7bc41648a5b93ee76.jpg" ></li>
						<li><img src="http://pic2.iqiyipic.com/common/lego/20190731/71f5ad53aedc4156b82314a0d984c091.jpg" ></li>
						<li><img src="http://pic0.iqiyipic.com/common/lego/20190801/8c6422ebd5b94e43b241b533666720f8.jpg" ></li>
						<li><img src="http://pic2.iqiyipic.com/common/lego/20190806/25ebc9919c7e44e7bc41648a5b93ee76.jpg" ></li>
						<li><img src="http://pic2.iqiyipic.com/common/lego/20190731/71f5ad53aedc4156b82314a0d984c091.jpg" ></li>
						<li><img src="http://pic0.iqiyipic.com/common/lego/20190801/8c6422ebd5b94e43b241b533666720f8.jpg" ></li>
						<li><img src="http://pic2.iqiyipic.com/common/lego/20190731/71f5ad53aedc4156b82314a0d984c091.jpg" ></li>
						<li><img src="http://pic0.iqiyipic.com/common/lego/20190801/8c6422ebd5b94e43b241b533666720f8.jpg" ></li>
						<li><img src="http://pic0.iqiyipic.com/common/lego/20190801/8c6422ebd5b94e43b241b533666720f8.jpg" ></li>
					</ul>
				</div>
				<ul class="side-list" id="sideList">
				 	<li class="side-item">
						<a href="#">
							<span class="side-text">烈火军校4</span>
							<span class="side-text">:</span>
							<span class="side-text">白陆续热血青春</span>
						</a>
					</li>
					<li class="side-item">
						<a href="#">
							<span class="side-text">加油</span>
							<span class="side-text">:</span>
							<span class="side-text">邓论马思纯为爱成长</span>
						</a>
					</li>
					<li class="side-item">
						<a href="#">
							<span class="side-text">程熙媛</span>
							<span class="side-text">:</span>
							<span class="side-text">久春大胆追爱深吻临摹</span>
						</a>
					</li>
					<li class="side-item">
						<a href="#">
							<span class="side-text">小欢喜</span>
							<span class="side-text">:</span>
							<span class="side-text">黄磊还请遭遇职场危机</span>
						</a>
					</li>
					<li class="side-item">
						<a href="#">
							<span class="side-text">新市场</span>
							<span class="side-text">:</span>
							<span class="side-text">福克斯Rap做检讨</span>
						</a>
					</li>
					<li class="side-item">
						<a href="#">
							<span class="side-text">七月与安生</span>
							<span class="side-text">:</span>
							<span class="side-text">沈月城都领重复</span>
						</a>
					</li>
					<li class="side-item">
						<a href="#">
							<span class="side-text">做家务的男人</span>
							<span class="side-text">:</span>
							<span class="side-text">魏大勋被催婚</span>
						</a>
					</li>
					<li class="side-item">
						<a href="#">
							<span class="side-text">物质支撑</span>
							<span class="side-text">:</span>
							<span class="side-text">杜淳六一节鼓捣猫小</span>
						</a>
					</li>
					<li class="side-item">
						<a href="#">
							<span class="side-text">冠军的?</span>
							<span class="side-text">:</span>
							<span class="side-text">也行杨坤一名挥拳</span>
						</a>
					</li>
					<li class="side-item">
						<a href="#">
							<span class="side-text">爱奇艺特别策划</span>
							<span class="side-text">:</span>
							<span class="side-text">我们的70年</span>
						</a>
					</li>
				</ul>
			</div>	

let sideList=document.getElementsByClassName('side-item');		 		
		let picList=document.getElementsByClassName('pic-list')[0].children;
		let picLeng=picList.length-1;
		let index=0; 
		let lastIndex=picLeng;
		setInterval(function(){
		 	if (index>picLeng) {
				index = 0;
				lastIndex=picLeng;
			}
			picList[index].className="pic-item"; 
			sideList[index].style.height=74+'px';
			sideList[index].style.background='#000000';
			sideList[index].children[0].children[0].className="side-text side-title";
			sideList[index].children[0].children[1].className="side-text side-colon";
			sideList[index].children[0].children[2].className="side-text side-desc";
			index++;
			picList[lastIndex].className="";
			sideList[lastIndex].style.height=36+'px';
			sideList[lastIndex].style.background='';
			sideList[lastIndex].children[0].children[0].className="side-text";
			sideList[lastIndex].children[0].children[1].className="side-text";
			sideList[lastIndex].children[0].children[2].className="side-text";
			lastIndex++;
			if (lastIndex>=picLeng) {
				lastIndex=0;
			}		
		},1500)