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写的日历类(基于pj)
Dec 28 Javascript
JS的get和set使用示例
Feb 20 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
小程序实现多列选择器
Feb 15 Javascript
vue-router 控制路由权限的实现
Sep 24 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 和 MySQL 基础教程(一)
2006/10/09 PHP
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
几种响应式文字详解
2017/05/19 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
[00:55]深扒TI7聊天轮盘语音出处3
2017/05/11 DOTA
使用python装饰器验证配置文件示例
2014/02/24 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
python导入模块交叉引用的方法
2019/01/19 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
django实现日志按日期分割
2020/05/21 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
应用电子技术专业个人求职信
2013/09/21 职场文书
个人找工作自荐信格式
2013/09/21 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
匿名检举信范文
2015/03/02 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js