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 showModalDialog模态对话框使用说明
Dec 31 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 Javascript
vue-ajax小封装实例
Sep 18 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 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和AJAX创建RSS聚合器的代码
2007/03/13 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
PHP遍历数组的几种方法
2012/03/22 PHP
php实现删除空目录的方法
2015/03/16 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
jQuery 入门讲解1
2009/04/15 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
python tkinter窗口最大化的实现
2019/07/15 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
python实现取余操作的简单实例
2020/08/16 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
日语专业毕业生自荐信
2013/11/11 职场文书
体育馆的标语
2014/06/24 职场文书
总经理检讨书
2014/09/15 职场文书
婚前保证书范文
2015/02/28 职场文书
幼儿园个人总结
2015/02/28 职场文书
大学生村官入党自传
2015/06/26 职场文书
排球赛新闻稿
2015/07/17 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python