这篇文章主要介绍了用 box 固定长宽实现图片自动轮播效果, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这个小 DEMO,主要用 box 固定长宽用于显示图片,将图片放入 imagebox 中,连接起来,每次换图片则将 imagebox 的 style 属性的 margin-left 改动,能形成轮播的效果。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <style>
- .box {
- width: 900px;
- height: 350px;
- margin: 20px;
- overflow: hidden;
- margin:0 auto;
- }
- .imagebox {
- width: 3600px;
- height: 350px;
- -webkit-transition: all 1s ease-in-out;
- -moz-transition: all 1s ease-in-out;
- -o-transition: all 1s ease-in-out;
- transition: all 1s ease-in-out;
- }
- .imagebox img {
- width: 900px;
- float: left;
- height: 350px;
- }
- </style>
- </head>
- <body>
- <div class="box">
- <div id="ImageBox" class="imagebox">
- <img class="trans_image" src="images/图片点击轮转/image-53.jpg" />
- <img class="trans_image" src="images/图片点击轮转/image-54.jpg"/>
- <img class="trans_image" src="images/图片点击轮转/image-55.jpg"/>
- <img class="trans_image" src="images/图片点击轮转/image-56.jpg"/>
- </div>
- </div>
- <div>
- <input type="button" value="left" onclick="turnleft()"/>
- <input type="button" value="right" onclick="turnright()"/>
- </div>
- <script language="javascript">
- var int=setInterval("change()",3*1000);
- var a=document.getElementById("ImageBox");
- var i=1;
- function change(){
- if(i==4){
- i=0;
- }
- i=i+1;
- a.style.marginLeft=(1-i)*900+"px";
- }
- function stopchange(){clearInterval(int);}
- function startchange(){int=setInterval("change()",2*1000);}
- a.onmouseover=function(){clearInterval(int);}
- a.onmouseout=function() {int=setInterval("change()",2*1000);}
- function turnleft(){
- stopchange();
- i=i+1;
- a.style.marginLeft=(1-i)*900+"px";
- if(i==4){
- i=0;
- }
- startchange();
- }
- function turnright(){
- stopchange();
- if(i>1){
- a.style.marginLeft=(2-i)*900+"px";
- i=i-1;
- }else{
- a.style.marginLeft=-3*900+"px";
- i=4;
- }
- startchange();
- }
- </script>
- </body>
- </html>
来源: