HTML图片轮播

一、简述：

如果自己创建闲麻烦可以下载源码，代码的素材也发出，在文章的下面可自行下载。

二、源码下载：

https://download.csdn.net/download/m0_45329584/11357209

三、文件创建：

index.html:

 







	

		

			
				
				
瓦尔基里.斯露德
			
		
		

			
				
				
瓦尔基里.希露德
			
		
		

			
				
				
瓦尔基里.奥特琳德
			
		
		

			
				
				
大团结
			
		
	
	

		
		
		
		
	

public.css:

/* CSS Document */
*{
	margin: 0;
	padding: 0;
	}
ul,li,ol{
	list-style:none;
	}
a{
	text-decoration: none;
	}
.clears{
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0;
	overflow: hidden;
	}
a img{
	border:0;
	}

body{
	font-family:Arial,Verdana,Microsoft yahei,Simsun;
	}

web.css:

/* CSS Document */
.box{
	width: 354px;
	height: 500px;
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
	position: relative;/*约束绝对定位*/
	overflow: hidden;
}
.box>img {
	width: 354px;
	height: 500px;
}
.box ul{
	width: 9999px;
	transition: all 0.5s;
}
.box li{
	width: 354px;
	height: 500px;
	position: relative;/*约束绝对定位*/
	float: left;
}
.box ul li p{
	height: 75px;
	width: 330px;
	background: #535954;
	position: absolute; /*绝对定位，盖住其他标签*/
	left: 0px;
	bottom: 0px;
	line-height: 75px;
	padding-left: 25px;
	font-size: 18px;
	color: #FDFDFD;
	opacity:0.8 ;  /*透明度，0-1*/
	filter:alpha(opacity=80); /*IE8- , 0-100*/
}

.box2{
	position: absolute; /*绝对定位，盖住其他标签*/
	height: 75px;
	right: 25px;
	bottom: 0px;
	line-height: 75px;
}
.box2 a{
	width: 15px;
	height: 15px;
	display: inline-block;
	margin-right: 10px;
	background: #FDFDFD;
}
.box2 .first{
	background: #FD0004;
}

web.js:

// JavaScript Document
var img=document.getElementById("img");
var fangkuai=document.getElementById("fangkuai");
var a=fangkuai.getElementsByTagName("a");
var p=0;//控制循环
var timer=null;//时钟变量
var x=1;//左右移动
timer=setInterval(Slider,2000);
for(var i = 0 ; i <= a.length-1 ; i++){
	a[i].onmouseover = function(){
		allElements();
		this.className = "first";  //  突出当前标签
		index = this.getAttribute("index");
		img.style.marginLeft = -354*index + "px";
		clearInterval(timer);
	}
		a[i].onmouseout = function(){
		timer=setInterval(Slider,2000);
		p=parseInt(index);
	}	
}
function  allElements(){
	for(var k=0 ; k <= a.length-1 ; k++){
		a[k].className = "";  // 去掉类，复原
	}
}
function Slider(){//自动播放
	p+=x;
	((p==0)||(p==3))&&(x=-x);
	allElements();
	a[p].className = "first";
	img.style.marginLeft = -354*p+ "px";	
}

四、素材图片:

五、效果图：