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 相关文章推荐
js下用层来实现select的title提示属性
Feb 23 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 Javascript
JS中的多态实例详解
Oct 15 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
JS精确判断数据类型代码实例
Dec 18 Javascript
JS实现简易计算器
Feb 14 Javascript
ES6 Generator基本使用方法示例
Jun 06 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异常处理技术,顶级异常处理器
2012/06/13 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
js 编写规范
2010/03/03 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
Python遍历pandas数据方法总结
2018/02/09 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
游戏商店:Eneba
2020/04/25 全球购物
什么是组件架构
2016/05/15 面试题
入党自我鉴定
2014/03/25 职场文书
幼儿园评语大全
2014/04/17 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
大学生应聘求职信
2014/05/26 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python
Win11开始菜单添加休眠选项
2022/04/19 数码科技