首页 > 其他 > 详细

轮播制作

时间:2016-05-15 21:41:08      阅读:281      评论:0      收藏:0      [点我收藏+]

轮播是在各大网页首页经常能看到的效果,以下我给大家分享我是如何利用JS制作轮播的。

首先设置一个和图片一样宽高的DIV作为轮播显示窗口,然后加入要轮播的图片,代码如下:

<div class="div1" style="position: relative">
<div id="Div" style="position: absolute">
<img  class="img1" src="1.webp" alt=""/>
<img class="img2" src="2.jpg" alt=""/>
<img  class="img3" src="3.webp" alt=""/>
</div>

然后,利用setTimeout()属性,通过改变图片距离DIV的left值来实现,轮播效果的,注意,一定要给DIV设置Overflow:hidden,并使图片浮动以让它们成水平排列,代码如下:

<script type="text/javascript">

window.onload=function(){
timers();
};
var a=1180;
var timer;
function timers(){
a=a-1180;
document.getElementById("Div").style.left=a+"px";
if(a==-2360){
a=1180;
}
timer=setTimeout("timers()",2000)
}

轮播制作

原文:http://www.cnblogs.com/qiutaotao/p/5496120.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!