js图片幻灯切换效果实现示例
2014-04-01 20:31:35   来源:   评论:0 点击:

js图片幻灯切换效果实现示例:下面是非常不错的一个利用JS实现幻灯切换效果的示例,你只要把下面所有的页面代码复制到html文件中,保存预览即可看到想要的效果,试试看,一定不会失望

 

 

 

<script type="text/javascript" src="http://www.php114.net/images/js/other/page_tanchuang_b.js"></script>

<script type="text/javascript">

//直接切换效果

//$pic("picChange").picChange();

//淡出效果

$pic("picChange").picChange({changeStyle:"fade",time:250,interTime:5000});

//向上移出效果

//$pic("picChange").picChange({changeStyle:"move",time:250,direction:"up"});

//向上联动效果

//$pic("picChange").picChange({changeStyle:"wheel",time:250,direction:"up"});

//以下为页面测试函数,并非picChange的使用方法,使用方法如上

function func(){

//恢复html代码原状

var my_time = document.getElementById("time").value;

var my_changeStyle = document.getElementById("changeStyle").value;

var my_direction = document.getElementById("direction").value;

var my_isClick = document.getElementById("isclick").checked;

var my_intertime = document.getElementById("intertime").value;

//alert(my_time+" "+my_changeStyle+" "+my_direction+" "+my_isClick);

$pic("picChange").picChange({

changeStyle:my_changeStyle,

time:my_time,

direction:my_direction,

isClick:my_isClick,

interTime:my_intertime

});

var tmpImg = document.getElementById("picChange").getElementsByTagName("img");

var tmpLength = tmpImg.length;

for(var n=0;n

{

tmpImg[n].style.top = "";

tmpImg[n].style.left = "";

setAlpha(tmpImg[n],100);

if(n==0)

tmpImg[n].style.display = "block";

else

tmpImg[n].style.display = "";

}

var showText = "改变成功!当前模式:";

if(my_changeStyle == "move" || my_changeStyle == "wheel")

{

showText += "向"+document.getElementById("direction").options[document.getElementById("direction").selectedIndex].text+document.getElementById("changeStyle").options[document.getElementById("changeStyle").selectedIndex].text;

showText += ","+my_time+"毫秒,每隔"+my_intertime/1000+"秒切换。";

}

else if(my_changeStyle == "fade")

{

showText += document.getElementById("changeStyle").options[document.getElementById("changeStyle").selectedIndex].text;

showText += ","+my_time+"毫秒,每隔"+my_intertime/1000+"秒切换。";

}

else

{

showText += document.getElementById("changeStyle").options[document.getElementById("changeStyle").selectedIndex].text;

}

document.getElementById("show").innerHTML = showText;

}

</script>


相关热词搜索:

上一篇:解决css中input输入框点击时去掉外边框方法【outline:medium;】
下一篇:css如何设置图片或背景图半透明?