一、简述:
如果自己创建闲麻烦可以下载源码,代码的素材也发出,在文章的下面可自行下载。
二、源码下载:
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";
}