js换图片效果可进行定时操作
时间:2023-08-23 07:45:34
<%@ 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>
标签:换图片,定时
0
投稿
猜你喜欢
python实时分析日志的一个小脚本分享
2021-03-26 14:12:29
python中enumerate的用法实例解析
2023-03-10 19:11:18
基于Python 装饰器装饰类中的方法实例
2023-10-11 04:10:22
python脚本爬取字体文件的实现方法
2022-09-07 18:20:55
python 实现检验33品种数据是否是正态分布
2022-09-25 19:57:55
vue获取data数据改变前后的值方法
2024-04-30 10:35:10
Python可视化神器pyecharts绘制柱状图
2021-07-26 23:05:57
python打印n位数“水仙花数”(实例代码)
2021-06-11 20:35:36
深入探寻javascript定时器
2024-04-29 13:36:55
dl.dt.dd.ul.li.ol区别及应用
2008-05-24 09:42:00
Python计算两个矩形重合面积代码实例
2021-12-18 23:34:22
.NET中开源文档操作组件DocX的介绍与使用
2024-06-05 09:28:18
vue+electron实现创建多窗口及窗口间的通信(实施方案)
2024-04-30 10:44:05
Vuex和前端缓存的整合策略详解
2024-05-09 15:17:14
ASP从数据库中获取下载文件
2007-10-06 21:17:00
PHP中DirectIO操作文件扩展的用法大全
2023-06-13 13:58:45
树莓派+摄像头实现对移动物体的检测
2022-05-28 19:57:26
javascript下兼容firefox选取textarea文本的代码
2013-08-30 02:05:16
Vite版本更新检查实现页面自动刷新的解决思路
2024-04-27 16:17:07
Docker 下MySQL数据库的备份和恢复的操作方法
2024-01-18 03:02:44