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

代码如下:

<%@ 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)

相关推荐

  • 纯js无flash仿搜狐女人频道FLASH图片切换效果代码

    纯js无flash仿搜狐女人频道FLASH图片切换效果代码

    前2个星期看到一位朋友说如何用JS实现http://women.sohu.com/这个页中FLASH图片切换效果,这两天有空,做了一个,大家评评: [加载图片慢点请等会] www.jb51.net 我们 JS图片切换 :: * { margin:0; padding:0; } body { margin:0; color:#88c; background:#333; } img { margin:0; padding:0; border:0; } #js_F { position:relativ

  • JavaScript 图片切换展示效果alibaba拓展版第1/3页

    首先需要一个容器,设置它的overflow为hidden,position为relative: 容器里面还要一个滑动对象,设置它的position为absolute: 在initialize()函数里初始化一些属性. 在切换之前先执行Start()函数,进行相关设置, 主要是设置Index属性(索引)和_target属性(目标值): 复制代码 代码如下: if(this.Index < 0){ this.Index = this._count - 1; } else if (this.Index

  • javascript定时变换图片实例代码

    复制代码 代码如下: <html><head><meta http-equiv=Content-Type content="text/html;charset=utf-8"><script>y=1;function imgs(){    var myImg=document.getElementsByTagName("img")[0];    myImg.src=y+".jpg";    if(y=

  • 非常漂亮的JS+CSS图片幻灯切换特效

    非常漂亮的JS+CSS图片幻灯切换特效,用在你的首页比较不错,宽屏图片格式,每张图片平滑飞入切换,鼠标放上自动切换,和FLASH的平滑效果差不多,视觉冲击效果很爽,而且代码也不多,调试调用都方便,建议关注一下哦! 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

  • js实现网页随机切换背景图片的方法

    本文实例讲述了js实现网页随机切换背景图片的方法.分享给大家供大家参考.具体实现方法如下: 首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量 在script中将这些图像编为一个数组,便于调用.数组的长度当然就是图像的数量. 复制代码 代码如下: var bodyBgs = [];    //创建一个数组变量来存储背景图片的路径 bodyBgs[0] = "images/01.jpg"; bodyB

  • js实现支持手机滑动切换的轮播图片效果实例

    js实现支持手机滑动切换的轮播图片效果实例

    本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu

  • JavaScript实现定时隐藏与显示图片的方法

    JavaScript实现定时隐藏与显示图片的方法

    本文实例讲述了JavaScript实现定时隐藏与显示图片的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript实现定时隐藏与显示图片,设定图片在几秒后会自动显示,也会自动隐藏,秒数这个自己去定义吧,在JavaScript代码片段内. 运行效果如下图所示: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/lo

  • jQuery图片切换插件jquery.cycle.js使用示例

    jQuery图片切换插件jquery.cycle.js使用示例

    Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. 复制代码 代码如下: <head> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascri

  • JS实现的文字与图片定时切换效果代码

    JS实现的文字与图片定时切换效果代码

    本文实例讲述了JS实现的文字与图片定时切换效果代码.分享给大家供大家参考.具体如下: 这是近来门户们都喜欢用的特效,左侧是一个大图片,右侧是对应文字,鼠标移动时,对应行的文字会变化,图片也相应的切换,如果没有鼠标动作时,它会自己播放,播放时间可调整,个人感觉挺不错的导航效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-txt-pic-time-cha-tab-codes/ 具体代码如下: <head> <meta http-e

  • 用html+css+js实现的一个简单的图片切换特效

    用html+css+js实现的一个简单的图片切换特效

    如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下 复制代码 代码如下: <div class="wrapper"> <div id="focus"> <ul> <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" a

  • 最简单的js图片切换效果实现代码

    无意中在网上发现的,代码非常的简单,一看就明白! 复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=5000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]

  • js动态切换图片的方法

    本文实例讲述了js动态切换图片的方法.分享给大家供大家参考.具体实现方法如下: index.css文件如下: 复制代码 代码如下: * {      margin: 0px;padding: 0px;  }    body {      width: 632px;      /*background-color: blue;*/      margin: 0 auto;  }    #imgsCom {      background-color: yellow;      /*相对定位,为了下

  • JS图片定时翻滚效果实现方法

    本文实例讲述了JS图片定时翻滚效果实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

随机推荐