标签：.class order head png img utf-8 win document end
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<title>原生js轮播效果</title>
</head>
<body>
<style>
#app{
width: 100%;
padding: 20px;
position: relative;
overflow: hidden;
}
ul{
display: inline-block;
}
#app1{
display: inline-block;
overflow: hidden;
position: relative;
}
li{
float: left;
padding: 0 10px;
box-sizing: border-box;
border: 1px solid red;
display: none;
}
img{
width: 140px;
height: 140px;
}
#app2{
position: absolute;
bottom:10px;
width: 100%;
}
#app2 div{
display: inline-block;
width: 25%;
text-align: center;
}
#app2 div span{
display: inherit;
border-radius: 10px;
padding: 3px;
background: black;
color: #fff;
}
#app2 div .active{
background: red;
}
</style>
<div id="app">
<div id="app1">
<ul>
<li style="display: block">
<img src="img/1.png">
</li>
<li>
<img src="img/2.png">
</li>
<li>
<img src="img/3.png">
</li>
<li>
<img src="img/4.png">
</li>
</ul>
<div id="app2">
</div>
</div>
<div id="abc">
</div>
</div>
<script>
window.onload=function () {
var arrlist=null;
var timers=null;
function lunbo() {
var app1=document.getElementById(‘app1‘);
var li=app1.getElementsByTagName(‘li‘);
var app2=document.getElementById(‘app2‘);
var text=document.getElementById(‘text‘);
var appabc=document.getElementById(‘abc‘);
arrlist=[‘第一张‘,‘第二张‘,‘第三张‘,‘第四张‘];
for(var i=0;i<li.length;i++){
//创建标记
var span=document.createElement(‘div‘);
span1=document.createElement(‘span‘);
span1.innerHTML=i;
span.appendChild(span1);
app2.appendChild(span);
}
var spanactive=document.getElementsByTagName(‘span‘);
//点击操作
for(var i=0;i<spanactive.length;i++){
if(i==0){
spanactive[i].className=‘active‘
}
spanactive[i].index=i;
spanactive[i].onclick=function () {
for(var j=0;j<spanactive.length;j++){
spanactive[j].className=‘‘;
li[j].style.display=‘none‘;
}
this.className=‘active‘;
li[this.index].style.display=‘block‘;
appabc.innerHTML=arrlist[this.index]
}
appabc.innerHTML=arrlist[0]
}
}
lunbo()
}
</script>
</body>
</html>
标签：.class order head png img utf-8 win document end
原文地址：http://www.cnblogs.com/mhxy13867806343/p/6963707.html
