javascript五图轮播切换实用版


Posted in Javascript onAugust 17, 2012
<!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=gbk"> 
<title>测试</title> 
<meta name="author" content="ximan"> 
<meta name="keywords" content=""> 
<meta name="description" content=""> 
<link type="text/css" rel="stylesheet" href="index.css"> 
</head> 
<body> 
<div class="content"> 
<ul id="num"> 
<li style="background: #f00;"> 
</li> 
<li> 
</li> 
<li> 
</li> 
<li> 
</li> 
<li> 
</li> 
</ul> 
<ul id="img_box"> 
<li> 
<a href="#"> 
<img src="pailabi_shop1.jpg" alt="哈哈哈" /> 
</a> 
</li> 
<li> 
<a href="#"> 
<img src="pailabi_shop2.jpg" alt="哈哈哈" /> 
</a> 
</li> 
<li> 
<a href="#"> 
<img src="paila_shop3.jpg" alt="哈哈哈" /> 
</a> 
</li> 
<li> 
<a href="#"> 
<img src="paila_shop4.jpg" alt="哈哈哈" /> 
</a> 
</li> 
<li> 
<a href="#"> 
<img src="paila_shop5.jpg" alt="哈哈哈" /> 
</a> 
</li> 
</ul> 
</div> 
<script type="text/javascript"> 
</script> 
<script type="text/javascript"> 
window.onload=function (){ 
var num = document.getElementById("num"); 
var num_li = document.getElementById("num").getElementsByTagName("li"); 
var img_box = document.getElementById("img_box"); 
var img_box_li = document.getElementById("img_box").getElementsByTagName("li"); 
var bliw = img_box_li[0].offsetWidth; 
var n = 0; 
img_box.style.left = 0 
var autoscroll = setInterval(auto,3000); 
for (var i = 0;i < num_li.length;i++){ 
num_li[i].onmouseover = function(){ 
clearInterval(autoscroll); 
for (var i = 0;i < num_li.length;i++){ 
num_li[i].style.background = ""; 
if(num_li[i]==this){ 
this.style.background = "#f00"; 
slide(i); 
} 
} 
} 
num_li[i].onmouseout = function(){ 
for (var i = 0;i < num_li.length;i++){ 
if(num_li[i]==this){ 
n = i; 
autoscroll = setInterval(auto,3000) 
} 
} 
} 
} 
function slide(i){ 
img_box.style.left = -bliw*i + "px"; 
} 
function auto(){ 
n++; 
if(n == img_box_li.length){ 
n =0; 
} 
for (var i =0;i < num_li.length;i++){ 
num_li[i].style.background = ""; 
} 
num_li[n].style.background = "#f00"; 
slide(n); 
} 
} 
</script> 
</body> 
</html>
Javascript 相关文章推荐
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
May 12 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
vue自定义指令和动态路由实现权限控制
Aug 28 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
Aug 17 #Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 #Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 #Javascript
jquery插件制作 提示框插件实现代码
Aug 17 #Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 #jQuery
jquery插件制作 表单验证实现代码
Aug 17 #Javascript
jquery插件制作 图片走廊 gallery
Aug 17 #Javascript
You might like
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
jQuery 操作XML入门
2008/12/25 Javascript
Javascript 错误处理的几种方法
2009/06/13 Javascript
jquery 双色表格实现代码
2009/12/08 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python多进程机制实例详解
2015/07/02 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
django实现用户登陆功能详解
2017/12/11 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
2014年销售内勤工作总结
2014/12/01 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
党员身份证明材料
2015/06/19 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书