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中setFullYear()方法的使用详解
Jun 11 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
layui 给数据表格加序号的方法
Aug 20 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
JavaScript switch语句使用方法简介
Dec 30 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一些公用函数的集合
2008/03/27 PHP
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
php4与php5的区别小结(配置异同)
2011/12/20 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
JavaScript访问样式表代码
2010/10/15 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
windows下python和pip安装教程
2018/05/25 Python
django中forms组件的使用与注意
2019/07/08 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
护士自我鉴定
2013/10/23 职场文书
手机业务员岗位职责
2013/12/13 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
运动会跳远广播稿
2015/08/19 职场文书