纯js的图片切换,带效果 本帖最后由 justyonghui 于 2013-05-27 17:17:59 编辑 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <!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> <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>写得比较急,需要调试一下。 大文本中的String.replace()操作奇慢无比!有好的优化方法吗?高手帮帮忙吧 网页里制作升级进度条 有谁知道这是什么javascript相册?寻准确名称 如何让IE不缓存JS文件 闭包的问题 JavaScript自动关机的代码 javascript与jsp的交互(在线等) 怎么将用confirm弹出的窗口默认为取消 一个关于转义的问题,在线马上给分 怎样对网页 中某一部分进行更新? 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>
写得比较急,需要调试一下。