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的.live()和.die() 使用介绍
Sep 10 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
javascript检测两个数组是否相似
May 19 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
jquery中done和then的区别(详解)
Dec 19 jQuery
js正则取值的结果数组调试方法
Oct 10 Javascript
vue如何使用async、await实现同步请求
Dec 09 Javascript
JS使用for in有序获取对象数据
May 19 Javascript
JavaScript WeakMap使用详解
Feb 05 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
DIY实用性框形天线
2021/03/02 无线电
解析PHP高效率写法(详解原因)
2013/06/20 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
python中turtle库的简单使用教程
2020/11/11 Python
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
什么是Rollback Segment
2013/04/22 面试题
商务英语专业求职信
2014/06/26 职场文书
作文评语集锦
2014/12/25 职场文书
给老婆道歉的话
2015/01/20 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
商标侵权律师函
2015/05/27 职场文书
关于童年的读书笔记
2015/06/26 职场文书
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL