纯js的图片切换，带成效
日期：2014-05-16 浏览次数：20468 次
纯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>
<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;
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
