用box固定长宽实现图片自动轮播js代码


Posted in Javascript onJune 09, 2014

这个小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>
Javascript 相关文章推荐
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
基于vue-video-player自定义播放器的方法
Mar 21 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
jQuery实现的Div窗口震动特效
Jun 09 #Javascript
js动态创建标签示例代码
Jun 09 #Javascript
jquery中 $.expr使用实例介绍
Jun 09 #Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 #Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 #Javascript
js判断元素是否隐藏的方法
Jun 09 #Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
Jun 09 #Javascript
You might like
短波问题解答
2021/02/28 无线电
CodeIgniter安全相关设置汇总
2014/07/03 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
Python实现字典的key和values的交换
2015/08/04 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
留学生如何写好自荐信
2013/12/27 职场文书
工作人员思想汇报
2014/01/09 职场文书
中层干部竞争上岗演讲稿
2014/01/13 职场文书
欢迎领导标语
2014/06/27 职场文书
小学生读书笔记
2015/07/01 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫
教你nginx跳转配置的四种方式
2022/07/07 Servers