HTML图片轮播

一、简述：

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

二、源码下载：

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

三、文件创建：

index.html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮换</title>
<meta name="Keywords" content="图片轮换">
<meta name="Description" content="这是一个让人知道这个fgo英灵的网页。"> 
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="css/web.css">
</head>

<body>
<!-- 图片轮播 -->
<div class="box" >
	<ul  id="img">
		<li>
			<a href="#">
				<img src="images/1.jpg" alt="">
				<p>瓦尔基里.斯露德</p>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="images/2.jpg" alt="">
				<p>瓦尔基里.希露德</p>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="images/3.jpg" alt="">
				<p>瓦尔基里.奥特琳德</p>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="images/4.jpg" alt="">
				<p>大团结</p>
			</a>
		</li>
	</ul>
	<div class="box2" id="fangkuai">
		<a href="javascript:void(0)" index="0"  class="first"></a>
		<a href="javascript:void(0)" index="1"></a>
		<a href="javascript:void(0)" index="2"></a>
		<a href="javascript:void(0)" index="3"></a>
	</div>
</div>
<!-- 图片轮播 end -->
<script src="js/web.js"></script>
</body>
</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";	
}