html5图片轮播
主要是点击下方名称 进行播放
主要源代码：
<style >
.f{
width:400px;
margin:20px;
overflow:hidden;
}
.f_aaa{
width: 2000px;
height: 300px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.f_aa {
width: 400px;
float:left;
}
.f_cfq{
padding-top:10px;
text-align:center;
}
</style>
<body onload=a()>
<div class="f">
<div id="aaa" class="f_aaa">
<img class="f_aa" src="a.jpg" width="400" height="300">
<img class="f_aa" src="b.jpg" width="400" height="300">
<img class="f_aa" src="c.png" width="400" height="300">
<img class="f_aa" src="d.jpg" width="400" height="300">
</div>
<div id="cfq" class="f_cfq">
<a href="#1">111</a>
<a href="#2">222</a>
<a href="#3">333</a>
<a href="#4">444</a>
</div>
</div>
<script type="text/javascript">
function a() {
var $ = function(id){return document.getElementById(id);};
var tp = $("aaa");
var lj = $("cfq").getElementsByTagName("a");
var ljsl = lj.length;
if (tp && ljsl) {
for( var i = 0; i < ljsl; i += 1)
{
lj[i].onclick = function()
{
var index = Number(this.href.replace(/.*#/g, "")) || 1;
tp.style.marginLeft = (1 - index) * 400 + "px";
return false;
};
}
}
};
</script>
源自 爱思社区 bbs.aseoe.com