js练手小项目——javaScript实现图片轮播

	
		
		
		 
		 
	
	
		
		
		  
		  
		    1 / 3
		    
		    文本 1
		  
		 
		  
		    2 / 3
		    
		    文本 2
		  
		 
		  
		    3 / 3
		    
		    文本 3
		  
		 
		  ❮
		  ❯
		
		

		

		 
		
		   
		   
		   
		
		
	

.body{
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.mySlides{
	display: none;
	
}
.fade{
	animation-name: fade;
	animation-duration: 0.6s;
}
@keyframes fade{
	from{opacity: 0.4;}
	to{opacity: 1.0;}
}
.numbertext{
	position: absolute;
	top: 15px;
	left: 10px;
	color: white;
}
.text{
	color: #f2f2f2;
	ont-size: 15px;
	padding: 8px 12px;
	position: absolute;
	bottom: 20px;
	width: 100%;
	text-align: center;
	
}
.prev,.next{
	cursor: pointer;
	color: #f2f2f2;
	font-size: 15px;
	width: auto;
    padding: 8px 12px;
	position: absolute;
	top: 50%;
	font-weight: bold;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
}
.next{
	right: 0;
	border-radius: 3px 0 0 3px;
}
.prev:hover,.next:hover{
	background-color:rgba(0,0,0,0.8);
}
.slideshow-container {
  max-width: 100%;
  position: relative;
}

.dot{
	
	cursor: pointer;
	height: 13px;
	width: 13px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}
.dot:hover,.active{
	background-color: black;
}

var slide=2;
showSlide(slide);

//自动加页
function plusSlides(s){
	showSlide(slide+=s);
}
//切换到指定页
function currentSlide(s){
	showSlide(slide=s);
}
//展示页面
function showSlide(s){
	var i;
	var dot=document.getElementsByClassName("dot");
	var slides=document.getElementsByClassName("mySlides");
	if(s>slides.length){
		slide=1;
	}
	if(s<=0){
		slide=slides.length
	}
	for (i = 0; i < slides.length; i++) {
	      slides[i].style.display = "none"; 
    }
    for(i=0;i 
结果：
 
 

                
        
        

  
    
      
        
      
      
        
          暑期编程PK赛
          
        
        得CSDN机械键盘等精美礼品！