解决方案 »
- 在一个“JS/Query”函数中重新加载所在的“aspx页面”
- extjs4.0 MVC 取store的问题
- 用过Jquery easyUi的请进!
- 用JS从一个未知行列的table中娶到某列所以单元格中的值
- 请问复选框返回的值是数组马
- 小问题多送分,先来先得
- 把web上的一个表格或者图片删除,除了用table.removeNode(false)还有其他方法吗??不能用hidden
- 一个非常简单的问题:怎么使程序终止执行???象VB里的END 等等的。。
- 有谁知道哪个网站可以直接输入ICQ号跟其它网友聊天?
- Javascript怎么访问给定的API(可能是所谓的跨域问题)?
- js动态加载DropDownList,清空如何实现
- 关于文本框设置值的问题,求帮忙。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片切换</title>
<style type="text/css">
#pic_div{
width:600px;
height: 400px;
position: relative;
border: 1px solid red;
overflow: hidden;
}
.pic{
position: absolute;
top:0;
z-index: 1;
}
.pic img{
border: 0;width:600px;
height: 400px;
}
#pic_ul{
margin: 0;padding:0;
list-style: none;
position: absolute;
z-index: 4;
top:370px;
left:230px;
}
#pic_ul li{
margin: 0;padding:0;
list-style: none;
font: 10px/20px arial;
background-color: #eeff53;
color: #333;
width:20px;height:20px;
float: left;margin-left: 5px;
text-align: center;
cursor: pointer;
border-radius: 10px;
}
#pic_ul .on{
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<div id="pic_div">
<div class="pic"><img src ="http://www.scscms.com/FUploadFile/Image/2010-9/1.jpg" /></div>
<div class="pic"><img src ="http://www.scscms.com/FUploadFile/Image/2010-9/2.jpg" /></div>
<div class="pic"><img src ="http://www.scscms.com/FUploadFile/Image/2010-9/3.jpg" /></div>
<div class="pic"><img src ="http://www.scscms.com/FUploadFile/Image/2010-9/5.jpg" /></div>
<ul id="pic_ul">
<li><<</li>
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>>></li>
</ul>
</div>
<script type="text/javascript">
var n=0;//播放第几张
var o=1;//之前播放的编号
var s= 0,t=3000;//时间间隔
var setT,setP=null;//定时器
var pic=document.getElementById("pic_div").getElementsByTagName("div");//图片所在div
var li=document.getElementById("pic_ul").getElementsByTagName("li");//图片对应li
function change_pic(a){
clearInterval(setT);
if(a<0)a=pic.length-1;
if(a>=pic.length)a=0;
for(var l=0;l<li.length;l++){
li[l].className="";
}
for(var i=0;i<pic.length;i++){
if(a==i){
pic[i].style.opacity=0;
pic[i].style.filter="alpha(opacity=0)";
pic[i].style.zIndex=3;
}else{
pic[i].style.opacity=1;
pic[i].style.filter="alpha(opacity=100)";
if(i==o){
pic[i].style.zIndex=2;
}else{
pic[i].style.zIndex=1;
}
}
}
li[a+1].className="on";
s=0;//从0开始
o=n=a;
setT=setInterval(function(){
s++;
if(s>100){
o=a;//完成动画后身份转变
clearInterval(setT);
}else{
pic[a].style.opacity=s/100;
pic[a].style.filter="alpha(opacity="+s+")";
}
},20)
}
for(var i=0;i<li.length;i++){
li[i].onclick=(function(a){
return function(){
if(a==0){
change_pic(n-1);//上一张
}else if(a==li.length-1){
change_pic(n+1);//下一张
}else{
change_pic(a-1);//当前张
}
}
})(i)
}
//定时播放控制
setP=setInterval(function(){ n++;change_pic(n)},t);
document.getElementById("pic_div").onmouseover=function(){clearInterval(setP)}
document.getElementById("pic_div").onmouseout=function(){
setP=setInterval(function(){ n++;change_pic(n)},t);
}
</script>
</body>
</html>
写得比较急,需要调试一下。