javascript 图像动态切换的问题：如下

现在能实现的效果是，1秒切换一张图片，鼠标移动到缩略图，停止切换，并且大图区域显示对应的大图片，鼠标移开，继续1秒切换一张图片，但是是依据原来的顺序切换到下一张的现在我想... 现在能实现的效果是，1秒切换一张图片，鼠标移动到缩略图，停止切换，并且大图区域显示对应的大图片，鼠标移开，继续1秒切换一张图片，但是是依据原来的顺序切换到下一张的

现在我想实现的效果的是，鼠标移开后，自动切换到当前我显示的下一张图片怎么操作呢？代码如下：
<script language="javascript" type="text/javascript">
function $(e) {return document.getElementById(e);}
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
}
var MyMar;
var moveMar;
var speed = 1; //速度，越大越慢
var spec = 10; //每次滚动的间距, 越大滚动越快
var ipath = 'images/'; //图片路径
var num = 3; //这个变量是显示图片的索引
var thumbs = document.getElementsByClassName('thumb_img');
moveMar=setInterval(move,1000);
for (var i=0; i<thumbs.length; i++) {
// thumbs[i].onmouseover = function () {$('main_img').src=this.rel; $('main_img').link=this.link;};
thumbs[i].onmouseover = function () {$('main_img').src=this.getAttribute('rel');clearInterval(moveMar)};
//document.getElementById('main_img').src=document.getElementById('main_img').getAttribute('rel');
thumbs[i].onmouseout = function(){moveMar=setInterval(move,1000);
// num=i; //我原本想在这里对num赋值为i，但这么做后，鼠标移开后也不切换了，望高手指教
}
}
///////////////////////////////////////////////
//$('right').onmouseout = function() {moveMar=setInterval(move,1000);}
//////////////////////////////////////////////////
$('main_img').onclick = function () {location = this.getAttribute('src');}
$('gotop').onmouseover = function() {this.src = ipath + 'gotop2.gif'; MyMar=setInterval(gotop,speed);}
$('gotop').onmouseout = function() {this.src = ipath + 'gotop.gif'; clearInterval(MyMar);}
$('gobottom').onmouseover = function() {this.src = ipath + 'gobottom2.gif'; MyMar=setInterval(gobottom,speed);}
$('gobottom').onmouseout = function() {this.src = ipath + 'gobottom.gif'; clearInterval(MyMar);}
function gotop() {$('showArea').scrollTop-=spec;}
function gobottom() {$('showArea').scrollTop+=spec;}
function move(){
$('main_img').src=thumbs[num].getAttribute('rel');
num++;
if(num == thumbs.length)
num = 0;
}
</script>
我该怎么做才能实现我想要的效果呢？
我想到的办法是，上面也提到了，在鼠标经过这个事件中令num=i，这么做的效果是:开始可以正常切换，鼠标经过并移开后就不再切换图片了，但如果num等于个数字，比如:num=3，鼠标移开后可以正常从3的位置切换，想问问num=i和num=3有什么不同，为什么效果不一样，想要实现我想要的效果，应该怎么改展开

 我来答

3个回答

#热议# 在购买新能源车时，要注意哪些？

百度网友022523ba3
2013-12-15 · TA获得超过678个赞

知道小有建树答主

回答量：416

采纳率：100%

帮助的人：253万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html>
<html xmlns="

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <style>
        ul
        {
            list-style-type:none;
            margin:0;
            padding:0;
        }
        li
        {
           float:left;
           margin:0;
            padding:5px;
        }
        li img
        {
            width:100px;
            height:80px;
        }
        .li_border
        {
            border:5px solid #0094ff;
            padding:0;
        }
    </style>
    <script>

        $(function () {
            imgTranstion.transtion();
        });

        var imgTranstion = {
            timer: undefined,
            transtion: function () {
                var ul = $("#imgtran").children("ul");
                var div = $("#imgtran").children("div");

                var tmp = function () {
                    imgTranstion.timer = window.setInterval(function () {
                        var li = ul.children("li.li_border").removeClass("li_border").next();
                        if (li.length) {
                            li.addClass("li_border");
                        } else {
                            li = ul.children("li").eq(0).addClass("li_border");
                        }
                        div.children("img").fadeOut(200, function () {
                            $(this).attr("src", li.children("img").attr("src")).fadeIn(200);
                        });
                    }, 3000);
                }

                ul.find("img").hover(function () {
                    window.clearInterval(imgTranstion.timer);
                    ul.children("li").removeClass("li_border");
                    $(this).parent("li").addClass("li_border");
                    var me = this;
                    div.children("img").fadeOut(200, function () {
                        $(this).attr("src", $(me).attr("src")).fadeIn(200);
                    });
                }, function () {
                    tmp();
                });

                tmp();
            }
        };

    </script>
</head>
<body>
    <div style="border:1px solid red; width:550px;" id="imgtran">
        <div>
            <img src="imgs/1.JPG" style="width:550px; height:413px;"/>
        </div>
        <ul>
            <li class="li_border">
                <img src="imgs/1.JPG" /></li>
            <li>
                <img src="imgs/2.JPG" /></li>
            <li>
                <img src="imgs/3.JPG" /></li>
            <li>
                <img src="imgs/4.JPG" /></li>
            <li>
                <img src="imgs/5.JPG" /></li>
        </ul>
        <br style="clear:both" />
    </div>
</body>
</html>

帮你用jQuery实现了一个，用纯javascript代码太多了，自己加些图片运行看看吧

已赞过 已踩过<

评论收起

raydy
2013-12-12 · TA获得超过138个赞

知道小有建树答主

回答量：296

采纳率：25%

帮助的人：65.8万

我也去答题访问个人页

关注

展开全部

在鼠标移进去的时候把

var num = 3; //这个变量是显示图片的索引

这句代码的值改一下就好了

追问

我上面已经这么改过了，如果改成num=i，那么鼠标移进去，在出来，就不在切换了，如果num等于个数字，比如num=3；到时可以，但只能从第三张图片开始切换
 
我现在想实现的效果是，鼠标在那张图片上，就从那张图片开始切换，怎么做呢？

追答

鼠标移进去的时候可以用eq获取当前图片的从0开始的序号，然后跟你的序号对应起来赋值给num，就可以了

已赞过 已踩过<

评论收起

匿名用户
2013-12-20

展开全部

thumbs[i].onmouseout = function(){
num=i;
moveMar=setInterval(move,1000);
}

已赞过 已踩过<

评论收起

更多回答（1）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

javascript 图像动态切换的问题：如下

其他类似问题

为你推荐：