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 相关文章推荐
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
JavaScript DOM 学习第七章 表单的扩展
Feb 19 Javascript
javaScript面向对象继承方法经典实现
Aug 20 Javascript
Jquery中给animation加更多的运作效果实例
Sep 05 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 Javascript
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
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代码中的注释方法
2016/11/03 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
解放web程序员的输入验证
2006/10/06 Javascript
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
python 编码规范整理
2018/05/05 Python
Python列表与元组的异同详解
2019/07/02 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
利用python实现平稳时间序列的建模方式
2020/06/03 Python
C语言基础笔试题
2013/04/27 面试题
医科大学生毕业的自我评价分享
2013/11/12 职场文书
铁路工务反思材料
2014/02/07 职场文书
水毁工程实施方案
2014/04/01 职场文书
文案策划求职信
2014/04/14 职场文书
《春笋》教学反思
2014/04/15 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
python中的sys模块和os模块
2022/03/20 Python
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技