用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 相关文章推荐
5个javascript的数字格式化函数分享
Dec 07 Javascript
js捕获鼠标滚轮事件代码
Dec 16 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
初识laravel5
2015/03/02 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
python 数据的清理行为实例详解
2017/07/12 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
Django静态文件加载失败解决方案
2020/08/26 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
自考生自我鉴定范文
2013/10/01 职场文书
爱岗敬业演讲稿范文
2014/01/14 职场文书
党员创先争优公开承诺书
2014/03/28 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
专职安全员岗位职责
2015/04/11 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang