纯js的图片切换，带效果
本帖最后由 justyonghui 于 2013-05-27 17:17:59 编辑 我自己做了一个图片的切换，但是没有效果，就想简单点做个渐变的效果！！该怎样做呢呢！？我的可以切换，就没有效果。
<!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">
#u{
list-style-type:none;
}
li{
width:30px;
height:20px;
border:1px solid #000;
float:left;
margin-left:5px;
display:block;
cursor:pointer;
}
</style>
</head>
<body>
<img id="pic" src ="1.gif" width="614" height="271" border ="0" />
<script language ="javascript" >
var curIndex=0;
//时间间隔 单位毫秒 1000毫秒=1秒
var timeInterval=3000;
var arr=new Array();
arr[0]="http://a0.att.hudong.com/10/33/01300000168389121138332470077.jpg";
arr[1]="http://pic18.nipic.com/20120204/6366355_182407743151_2.jpg";
arr[2]="http://pic17.nipic.com/20111024/7050178_141318920000_2.jpg";
arr[3]="http://img3.pcgames.com.cn/pcgames/1006/09/1924784_3ddb8a453b2cff04cffca3ac.jpg";
var a=1.0;
var setFilter;
/*恢复透明度为1*/
function resetFilter(){
a=1;
document.getElementById('pic').style.opacity=a;
}
/*设置渐变效果*/
function filterFun(){
if(a>0){
a-=0.2;
document.getElementById('pic').style.opacity=a;
}
else if(a<=0){
window.clearInterval(setFilter);
resetFilter();
}
}
/*设置渐变触发事件*/
function setFiltertime(){
var setFilter=window.setInterval('filterFun()',50);
}
function clearFiltertime(){
window.clearInterval(setFilter);
}
/*点解更换图片*/
function selectImg(v){
clearInterval(time);
if(v>arr.length-1){
v=0;
}else if(v<0){
v=arr.length-1;
}
valueLi=v;
var obj=document.getElementById("pic");
obj.src=arr[valueLi];
curIndex=valueLi;
selectIndex();
time=setInterval(changeImg,timeInterval);
}
var time=setInterval(changeImg,timeInterval);
/*自动更换图片*/
function changeImg()
{
/*a=1;
document.getElementById('pic').style.opacity=a;
window.setTimeout("var setFilter=window.setInterval('filterFun()',50)",2500);*/
var obj=document.getElementById("pic");
if (curIndex>=arr.length-1)
{
curIndex=0;
}
else
{
curIndex+=1;
}
selectIndex();
obj.src=arr[curIndex];
document.getElementById('li'+curIndex).style.background="red";
window.setTimeout('setFiltertime()',2750);
clearFiltertime();
}
/*设置指针背景*/
function selectIndex(){
var list=document.getElementById("u").childNodes;
var listLength=((list.length-1)/2)-3;
var listIndex=0;
for(listIndex=0;listIndex<=listLength;listIndex++){
if(listIndex==curIndex){
document.getElementById('li'+curIndex).style.background="red";
}
else{
document.getElementById('li'+listIndex).style.background="none";
}
}
}
</script>
<ul id="u">
<li onclick="selectImg(curIndex-1) ">pre</li>
<li id="li0" style="background:red;" onclick="selectImg(0)">1</li>
<li id="li1" onclick="selectImg(1)">2</li>
<li id="li2" onclick="selectImg(2)">3</li>
<li id="li3" onclick="selectImg(3)">4</li>
<li onclick="selectImg(curIndex+1)">next</li>
</ul>
</body>
</html>
<!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>
