一直想学习轮播图，于是找了个视频学习了下。不过移动的效果没有实现，没有那个教程里的src文件。只能放弃。有点小遗憾。图片大家就自己找找吧。
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
}
/*设置outer的样式 宽度加20*/
#outer{
width: 311px;
height: 387px;
margin: 50px auto;
background-color:orange;
padding: 10px 0;
position: relative;
overflow: hidden;
}
/*设置ingList*/
#imgList{
list-style: none;
position: absolute;
left: 0px;
}
#imgList li{
float: left;
margin: 0 10px;
}
#navdiv{
/*开启绝对定位*/
position: absolute;
bottom: 15px;
}
#navdiv a{
float: left;
background-color: red;
width: 15px;
height: 15px;
margin: 0 5px;
opacity: 0.5;
/*兼容ie8*/
filter:alpha(opacity=50);
}
#word{
width: 100px;
height: 100px;
background-color: white;
margin: 0 630px;
position: absolute;
top: 460px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var imgList=document.getElementById("imgList");
var imgArr=document.getElementsByTagName("img");
imgList.style.width=311*imgArr.length+"px";
// 设置导航按钮居中
var navdiv=document.getElementById("navdiv");
var outer=document.getElementById("outer");
navdiv.style.left=(outer.offsetWidth-navdiv.offsetWidth)/2+"px";
//默认显示图片索引
var index=0;
var allA=document.getElementsByTagName("a");
allA[index].style.backgroundColor="black";
//连接链接切换图片
//为所有连接绑定函数
for(var i=0;i<allA.length;i++){
//为每一个超链接都添加num属性
allA[i].num=i;
allA[i].onclick=function(){
index = this.num;
//alert(index);
setA();
imgList.style.left=-311*index+"px";
};
//创建一个方法用来设置选中的a；
}
autoChange();
function setA(){
for(var i=0;i<allA.length;i++){
allA[i].style.backgroundColor="";
}
allA[index].style.backgroundColor="black";
}
function autoChange(){
setInterval(function(){
index++;
index%=imgArr.length;
setA();
imgList.style.left=-311*index+"px";
},1000);
}
};
</script>
</head>
<body>
<div id="outer">
<ul id="imgList">
<li><img src="./image/兮1.jpg" alt=""></li>
<li><img src="./image/兮2.jpg" alt=""></li>
<li><img src="./image/兮3.jpg" alt=""></li>
</ul>
<div id="navdiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
<div id="word">
<h1>本兮</h1>
</div>
</body>
</html> | 
发表于 2018-9-20 17:39
|
发表于 2018-9-20 18:26
