制作web幻灯，对很多初学者来说， 是一件挺难的事情，尤其是刚开始学， 无处下手， 这里制作一个简易的幻灯效果，无论是CSS,HTML, JS都尽量做到简单， 希望能够给大家起到抛砖引玉的效果

1, css代码

*{
	margin:0;
	padding:0;
}
li{
	list-style: none;
}
a{
	text-decoration: none;
}
body{
	font-family: '微软雅黑';
	font-size: 14px;
}

.slide{
	width: 230px;
	height: 90px;
	margin:50px auto;
	position:relative;
}
.slide > ul > li{
	display: none;
	position: relative;
	height: 90px;
}
.slide > ul > li:first-child{
	display:block;
}
.slide > ul > li img{
	width:230px;
	height:90px;
	border-radius: 3px;
}
.slide > ul > li p{
	position:absolute;
	left:0;
	bottom:0;
	height:30px;
	line-height: 30px;
	text-align: center;
	width:210px;
	padding:0 10px;
	color:#fff;
	background-color: 
	rgb(0,0,0,0.1);
	overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

.slide .toLeft, .slide .toRight{
	position:absolute;
	width:20px;
	height:40px;
	text-align:center;
	line-height:40px;
	top:25px;
	color:#fff;
	background-color: 
	rgb(0,0,0,0.5);
	cursor: pointer;
}
.slide .toLeft{
	left:0;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}
.slide .toRight{
	right:0;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}
.slide > .dots{
	width:100%;
	position:absolute;
	height:30px;
	top:0;
	left:0;
	text-align:center;
	z-index: 2;
}
.slide > .dots > li{
	display:inline-block;
	height:10px;
	width:10px;
	border-radius:50%;
	background-color:#ccc;
	margin-right: 6px;
}
.slide > .dots > li.focus{
	background-color:red;
}

2, HTML代码

<div class="slide">
			  <div class="dots"></div>
			  <ul>
					<li><a href="">
							<img src="./1.jpg">
							<p>沉睡花园：龚俊乔欣上演情感专家上演情感专家上演情感专家</p>
						</a>
					</li>
					<li><a href="">
							<img src="./2.jpg">
							<p>幸福二重奏：殷桃孙艺洲床头闹床尾合</p>
						</a>
					</li>
					<li><a href="">
							<img src="./3.jpg">
							<p>我们的滚烫人生： 陈小春被男孩唱懵</p>
						</a>
					</li>
			  </ul>
			  <div class="toLeft" > < </div>
			  <div class="toRight"> > </div>
		</div>

3. JS代码：

var now = 0; //表示显示的第几个
		var time = 0;
		var t = null;
		var allLi = document.querySelectorAll(".slide > ul > li");
			//得到所有的li
		var str = "";
			for(var i = 0; i < allLi.length; i++){
				if(i == 0){
					str += "<li class='focus' data-index="+i+"></li>";
				}
				else{
					str += "<li  data-index="+i+"></li>";
				}
				//任何标签， 除了自带的属性外，还可以自定义属性
				
			}
			document.querySelector(".slide > .dots").innerHTML = str;
		var dotsLi = document.querySelectorAll(".slide > .dots > li");	
			//console.log(allLi);
		function getFocus(){
			for(var i = 0; i < dotsLi.length; i++){
				if(i == now){
					dotsLi[i].classList.add("focus");
				}
				else{
					dotsLi[i].classList.remove("focus");
				}
			}
		}
		function toLeft(){
		//向左移函数   如果now > 0, now 减一， 否则设置为 最大
		  clearInterval(t);
		   if(now < allLi.length - 1) now++;
		   else now = 0;
		   for(var i = 0; i <= allLi.length - 1; i++){
		   		if(i == now){
		   			allLi[i].style.display = "block";
		   		}
		   		else{
		   			allLi[i].style.display = "none";
		   		}
		   }
		   getFocus();

		   t = setInterval(toLeft,3000);
		}

		function toRight(){
		   clearInterval(t);
		   if(now > 0) now--;
		   else now = allLi.length - 1;
		   for(var i = 0; i <= allLi.length - 1; i++){
		   		if(i == now){
		   			allLi[i].style.display = "block";
		   		}
		   		else{
		   			allLi[i].style.display = "none";
		   		}
		   }
		   getFocus();

		   t = setInterval(toLeft,3000);
		}
		//document.querySelector(".toLeft").onclick = toLeft;
		document.querySelector(".toLeft").addEventListener("click",toLeft);
		//增加事件监听
		document.querySelector(".toRight").addEventListener("click",toRight);

		dotsLi.forEach((item,index)=>{
			item.addEventListener("click",function(){
					//单击的是第几个，就让第几个图片显示，并对应获得焦点
					var cc = this.getAttribute("data-index");
					var cc1 = this.dataset.index; //仅支持 data-的属性
					//得到属性
					now = cc;
					clearInterval(t);
					 for(var i = 0; i <= allLi.length - 1; i++){
					   	   if(i == now){
					   			allLi[i].style.display = "block";
					   		}
					   		else{
					   			allLi[i].style.display = "none";
					   		}
					   }
					  getFocus();
					t = setInterval(toLeft,3000);
			});
		})

		t = setInterval(toLeft,3000);

效果如下：

源代码下载：

JS幻灯片.zip