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对Select的操作大集合(收藏)
Dec 28 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
Vuex 进阶之模块化组织详解
Jan 12 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
原生js实现购物车功能
Sep 23 Javascript
浅谈JS的二进制家族
May 09 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的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
php微信公众平台开发类实例
2015/04/01 PHP
两个数组去重的JS代码
2013/12/04 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
bootstrap下拉分页样式 带跳转页码
2018/12/29 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
高效使用Python字典的清单
2018/04/04 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
应届生新闻编辑求职信
2013/11/19 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
财务会计大学生自我评价
2014/04/09 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
六年级学生期末评语
2014/12/26 职场文书
人民的好儿女观后感
2015/06/18 职场文书
岗位聘任协议书
2015/09/21 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python