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 相关文章推荐
验证码按回车不变解决方法
Mar 29 Javascript
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
javascript实现表单验证
Jan 29 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
vue项目中使用多选框的实例代码
Jul 22 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使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
JavaScript修改css样式style
2008/04/15 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
python操作列表的函数使用代码详解
2017/12/28 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
Python闭包函数定义与用法分析
2018/07/20 Python
python常用运维脚本实例小结
2020/02/14 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
主要的Ajax框架都有什么
2013/11/14 面试题
工程地质勘察专业大学生求职信
2013/10/13 职场文书
大学生最常用的自我评价
2013/12/07 职场文书
图书室管理制度
2014/01/19 职场文书
高考标语大全
2014/06/05 职场文书
地震捐款倡议书
2014/08/29 职场文书
个人作风建设心得体会
2014/10/22 职场文书
海洋天堂观后感
2015/06/05 职场文书