点击上一个 下一个 实现切换 这个效果怎么写啊 求大神 贴代码

 我来答
至尊锋刃life
2016-07-19 · TA获得超过171个赞
知道答主
回答量:17
采纳率:100%
帮助的人:14.3万
展开全部

以前写的,主要是把东西的名字放在一个数组里,改变name实现切换,加了淡出淡入的效果

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Roller</title>
<style type="text/css">
#img1{
position:absolute;
top:50px;
left:40px;
filter:alpha(opacity:30);
opacity:1;
}
#botton{
width:500px;
height:740px;
}
</style>
<script type="text/javascript">
//图像滚动
var timer=null;
function change1(Condite){
    var alpha=100;
clearInterval(timer);
var images=["1.jpg","2.jpg","3.jpg","4.jpg"];
var img1=document.getElementById("botton");
var imgName=img1.name.split("_");
var i=imgName[1];
timer=setInterval(function(){
alpha-=10;
img1.style.opacity=alpha/100;
if(alpha==0){
    if(Condite==1){
if(i==0){
            i=images.length-1
                }else{
            i--
                }
                img1.src="image/"+images[i];
                img1.name="image_"+i;
    }else if(Condite==2){
if(i==images.length-1){
            i=0
                }else{
                    i++
                }
                img1.src="image/"+images[i];
                img1.name="image_"+i;
    }
    clearInterval(timer);
    var Intervals=setInterval(function(){
alpha+=10;
        img1.style.opacity=alpha/100;
if(alpha==100){
    clearInterval(Intervals);
        }
           },5)
       }
     },5);
}
</script>
</head>
<body>
<div id="img1">
<img alt="" id="botton" src="image/1.jpg" name="image_0"> 
</div>
<input type="button" value="上一张" onClick="change1(1)">
<input type="button" value="下一张" onClick="change1(2)">
</body>
</head>
追问
谢谢咯
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式