js换图片效果可进行定时操作


Posted in Javascript onJune 09, 2014
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<base href="<%=basePath%>"> 
<title>My JSP 'tu.jsp' starting page</title> 
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0"> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="This is my page"> 
<style type="text/css"> 
* { 
margin: 0px; 
padding: 0px; 
} 
li { 
list-style: none; 
} 
img { 
border: 0; 
} 
a { 
text-decoration: none; 
} 
#slide { 
width: 800px; 
height: 400px; 
box-shadow: 0px 0px 5px #c1c1c1; 
margin: 20px auto; 
position: relative; 
overflow: hidden; 
} 
#slide ul { 
position: absolute; 
left: 0px; 
top: 0px; 
height: 400px; 
width: 11930px; 
} 
#slide ul li { 
width: 800px; 
height: 400px; 
overflow: hidden; 
float: left; 
} 
#slide .ico { 
width: 800px; 
height: 20px; 
overflow: hidden; 
text-align: center; 
position: absolute; 
left: 0px; 
bottom: 10px; 
z-index: 1; 
} 
#slide .ico a { 
display: inline-block; 
width: 10px; 
height:10px; 
background: url(out.png) no-repeat 0px 0px; 
margin: 0px 5px; 
} 
#slide .ico .active { 
background: url(out1.png) no-repeat 0px 0px; 
} 
#btnLeft { 
width: 60px; 
height: 400px; 
left: 0px; 
top: 0px; 
background: url() no-repeat 0px 0px; 
position: absolute; 
z-index: 2; 
} 
#btnLeft :hover { 
background: url() no-repeat 0px 0px; 
} 
#btnRight { 
width: 60px; 
height: 400px; 
right: 0px; 
top: 0px; 
background: url() no-repeat 0px 0px; 
position: absolute; 
z-index: 2; 
} 
#btnRight :hover { 
background: url() no-repeat 0px 0px; 
} 
</style> 
<script type="text/javascript"> 
window.onload = function() { 
var oIco = document.getElementById("ico"); 
var aBtn = oIco.getElementsByTagName("a"); 
var oSlide = document.getElementById("slide"); 
var oUl = oSlide.getElementsByTagName("ul"); 
var aLi = oUl[0].getElementsByTagName("li"); 
var oBtnLeft = document.getElementById("btnLeft"); 
var oBtnRight = document.getElementById("btnRight"); 
var baseWidth = aLi[0].offsetWidth; 
//alert(baseWidth); 
oUl[0].style.width = baseWidth * aLi.length + "px"; 
var iNow = 0; 
for(var i=0;i<aBtn.length;i++) { 
aBtn[i].index = i; 
aBtn[i].onclick = function() { 
//alert(this.index); 
//alert(oUl[0].style.left); 
move(this.index); 
//aIco[this.index].className = "active"; 
} 
} 
oBtnLeft.onclick = function() { 
iNow ++; 
//document.title = iNow; 
move(iNow); 
} 
oBtnRight.onclick = function() { 
iNow --; 
document.title = iNow; 
move(iNow); 
} 
var curIndex = 0; 
var timeInterval = 1000; 
setInterval(change,timeInterval); 
function change() { 
if(curIndex == aBtn.length) { 
curIndex =0; 
} else { 
move(curIndex); 
curIndex += 1; 
} 
} 
function move(index) { 
//document.title = index; 
if(index>aLi.length-1) { 
index = 0; 
iNow = index; 
} 
if(index<0) { 
index = aLi.length - 1; 
iNow = index; 
} 
for(var n=0;n<aBtn.length;n++) { 
aBtn[n].className = ""; 
} 
aBtn[index].className = "active"; 
oUl[0].style.left = -index * baseWidth + "px"; 
//buffer(oUl[0],{ 
// left: -index * baseWidth 
// },8) 
} 
} 
</script> 
</head> 
<body> 
<div id="slide"> 
<a id="btnLeft" href="javascript:void(0);" ></a> 
<a id="btnRight" href="javascript:void(0);" ></a> 
<!--when change next image:style="left: -(n-1)*800px;"--> 
<ul> 
<li><img src="images/anniu.png" alt="" /></li> 
<li><img src="images/zhu2.png" alt="" /></li> 
<li><img src="images/xiangqing5.png" alt="" /></li> 
<li><img src="images/wanle.png" alt="" /></li> 
</ul> 
<div id="ico" class="ico"> 
<a class="active" href="javascript:void(0);"></a> 
<a href="javascript:void(0);"></a> 
<a href="javascript:void(0);"></a> 
<a href="javascript:void(0);"></a> 
<a href="javascript:void(0);"></a> 
<a href="javascript:void(0);"></a> 
</div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 Javascript
canvas 中如何实现物体的框选
Aug 05 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 #Javascript
javascript 处理null及null值示例
Jun 09 #Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 #Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 #Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 #Javascript
Node.js(安装,启动,测试)
Jun 09 #Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 #Javascript
You might like
php 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
信息管理专业学生自荐信格式
2013/09/22 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
软件测试专业推荐信
2014/09/18 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
让生命充满爱观后感
2015/06/08 职场文书
信用卡收入证明范本
2015/06/12 职场文书
运动会加油稿30字
2015/07/21 职场文书
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js