html5图片轮播

html5图片轮播
              主要是点击下方名称 进行播放

11.png     33.png

 

 主要源代码：

<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

posted @ 2013-03-24 03:48  Aseoe  Views(3004)  Comments(1)    收藏  举报