几张图片前面翻动显示特效，能自定义翻转图片数量和翻转速度，这个图片特效适用于小窗口图片切换展示特效。
<!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=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>图片前后翻动切换显示特效_武鸣人</title>
<style type="text/css">
* { margin:0; padding:0; }
body {
margin:0;
color:#88c;
}
img { margin:0; padding:0; border:0; }
#www_wuming_ren {
position:relative;
top:10px; left:10px;
overflow:hidden;
width:270px; height:185px;
background:#33c;
}
#www_wuming_ren img{
position:absolute;
top:0; left:0;
width:270px; height:185px;
}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="www_wuming_ren"></div>
<script type="text/javascript">
<!--///*--><![CDATA[/*><!--*/
var www_wuming_ren = document.getElementById("www_wuming_ren");
var imgList = ["/img/20240418_www_wuming_ren_51.jpg", "/img/20240418_www_wuming_ren_52.jpg", "/img/20240418_www_wuming_ren_53.jpg", "/img/20240418_www_wuming_ren_54.jpg"];
var imgTemp = new Array();
for (i=0; i<imgList.length; i++){
imgTemp[i] = new Image();
imgTemp[i].src = imgList[i];
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var imgs = new Array();
var imgID = 0, nextImgID, proveImgID;
var tf = true; //图片移动方向标志
var speed1 = 10; speed2 = 3100; //速度
function init_wuming_ren(){
var content = '';
for (i=0; i<imgList.length; i++){
content += '<img src="' + imgList[i] + '" style="left:0;" />\n';
}
www_wuming_ren.innerHTML = content;
imgs = www_wuming_ren.getElementsByTagName('img');
imgs[0].style.zIndex = 20;
imgs[1].style.zIndex = 15;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function change_wuming__ren(){
if ((imgID+1)<imgList.length){
nextImgID = imgID + 1;
} else if (imgID<imgList.length) {
nextImgID = 0;
} else {
imgID = 0;
nextImgID = imgID + 1;
}
imgs[imgID].style.zIndex = 20;
imgs[nextImgID].style.zIndex = 15;
setTimeout('imgShow()',speed2);
}
function imgShow(){
if (tf){ //imgID向左边移动2/3，nextImgID向右边1/3
if (parseInt(imgs[imgID].style.left)>-180){
imgs[imgID].style.left = (parseInt(imgs[imgID].style.left)-10) + 'px';
imgs[nextImgID].style.left = (parseInt(imgs[nextImgID].style.left)+5) + 'px';
setTimeout('imgShow()',speed1);
} else {
tf = !tf;
imgs[imgID].style.zIndex = 15;
imgs[nextImgID].style.zIndex = 20;
setTimeout('imgShow()',speed1);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
} else {
if (parseInt(imgs[imgID].style.left)<0){
imgs[imgID].style.left = (parseInt(imgs[imgID].style.left)+10) + 'px';
imgs[nextImgID].style.left = (parseInt(imgs[nextImgID].style.left)-5) + 'px';
setTimeout('imgShow()',speed1);
} else {
imgs[imgID].style.zIndex = 10;
tf = !tf;
imgID++;
change_wuming__ren();
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
init_wuming_ren();
change_wuming__ren();
/*]]>*///-->
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处