求点击小图切换大图JS

Question

 需要图片滚动效果的JS，我实现了自动滚动和点左右按钮滚动的效果，但底下点击小圆点切换图片的效果不知道怎么实现，求助~~~~~~~~~~~~

Answer 1

点击小圆点切换图片的效果不知道怎么实现改变img的src，变成新图片的src不就行了？

Answer 2

onclick  document.getElementById().src=''...

Answer 3

<script>
function reSizeImg(img){
img.style.width = "600px";
img.style.height = "600px";
}
</script>
<img src="http://u.papake.com/attachment/201106/30/52_1309400392ZhrX.jpg" width="100px" height="100px" id="img" onclick="reSizeImg(this)">

Answer 4

var Focus = function()
{
    this.collection = [];
    this.focus = document.getElementById("focus");
    this.piclist = document.getElementById("pic-list")
    this.piclistimage = document.getElementById("pic-list-image");
    this.page = document.getElementById("page");
    this.fixed = this.piclist.clientWidth;
    this.currentIndex = 0;
    this.currentPage;
    this.listId = "";//所属相册的ID
}Focus.prototype.bind = function(fn,context)
{
     var args = Array.prototype.slice.call(arguments, 2);
     return args.length == 0 ? 
     function() {
         return fn.apply(context, arguments);
     } : 
     function() {
         return fn.apply(context, args.concat.apply(args, arguments));
     };
}Focus.prototype.addItem = function(picture)
{
    this.collection.push(picture);
}Focus.prototype.initialization = function()
{
    this.piclistimage.style.width = this.collection.length *  this.fixed + "px";
    for(var i =0;i< this.collection.length;i++)
    {
         var pic = new Image();//创建图像
         pic.src = this.collection[i].url;
         pic.setAttribute("imgId",this.collection[i].imgId);
         this.piclistimage.appendChild(pic);       
         var page = document.createElement("span");//创建分页
         page.innerHTML = i + 1;
         this.page.appendChild(page);
    }
    
    this.pageSelected(this.currentIndex);
    this.eventFun.call(this.focus,this);
    this.globalTimer = window.setInterval(this.bind(this.autoMove,this),5000);
}
Focus.prototype.autoMove = function()
{
    if(this.currentIndex == this.collection.length - 1)
    {
        this.currentIndex = 0
        this.doMove(0)
    }
    else
    {
        this.startMove(1)
    }   
}
Focus.prototype.eventFun = function(object)
{
    this.onclick = function(e){
        e = e || window.event; target = e.target || e.srcElement;
        if(target.tagName == "SPAN")
        {
            var page = parseInt(target.innerHTML);
            object.currentIndex = page - 1; 
            object.doMove((page-1) * object.fixed)
        }
        
        if(target.getAttribute("action") == "move")
        {
            switch(target.id)
            {
                case "next":
                    object.startMove(1)
                    break;
                case "prev":
                    object.startMove(-1)
                    break
            }
        }
        
        if(target.tagName == "IMG")
        {
            window.location.href= "/web/shop/shop_photo.aspx?shopId="+ object.listId +"&imgId="+target.getAttribute("imgId");
        }
    }
    
//    this.onmousemove = function(e)
//    {
//        e = e || window.event; target = e.target || e.srcElement;
//        if(target.className == "prev-box" || target.className == "next-box")
//        {
//            target.style.opacity = 0.4;
//            target.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=40)"
//        }    
//    }
//    
//    
//    this.onmouseout = function(e)
//    {
//        e = e || window.event; target = e.target || e.srcElement;
//        if(target.className == "prev-box" || target.className == "next-box")
//        {
//            relatedTarget = e.toElement || e.relatedTarget;
//            if(relatedTarget.getAttribute("action") != "move")
//            {
//                target.style.opacity = 0.0;
//                target.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=0)" 
//            } 
//        }         
//    }
}
Focus.prototype.startMove = function(step)
{        
    this.currentPage = this.currentIndex + step;
    if(this.currentPage < 0 || this.currentPage > this.collection.length - 1 ) return;
    var moveLength = (this.currentPage) * this.fixed;
    this.currentIndex += step;
    this.doMove(moveLength);
}Focus.prototype.doMove = function(length)
{
    window.clearInterval(this.globalTimer);
    var oldclickFun = this.focus.onclick;
    var moveX = length - this.piclist.scrollLeft;
    var moveY = 0;
    
    if(moveX == 0) return;
    function move()
    {
        this.focus.onclick = null;
        moveY += 25;
        this.piclist.scrollLeft = moveX>0 ? this.piclist.scrollLeft +=25 : this.piclist.scrollLeft -= 25;
        if(moveY >= Math.abs(moveX)) 
        {
            window.clearTimeout(timer);
            this.globalTimer = window.setInterval(this.bind(this.autoMove,this),5000);
            this.focus.onclick = oldclickFun;
        }
    }   
   var timer =  window.setInterval(this.bind(move,this),1); 
   this.pageSelected(this.currentIndex);  
}Focus.prototype.pageSelected = function(currentIndex)
{
   var pagelist = this.page.getElementsByTagName("span");
   for(var i = 0 ; i < pagelist.length ; i ++)
   {
       if(parseInt(pagelist[i].innerHTML) - 1 == currentIndex)
           pagelist[i].className = "current"
       else
           pagelist[i].className = "";
   } 
}
            <div class="focus" id="focus">                <div id="pic-list" class="pic-list">
                    <div class="pic-list-image" id="pic-list-image">
                    </div>
                </div>                <div class="page" id="page">
                </div>            </div>
    <script language="javascript" type="text/javascript">
       var focus = new Focus();
       focus.listId = 78
focus.addItem({url:'/pictures/shop_pictures/300_250/300_250-20110517160241859_78.jpg',imgId:66})       focus.initialization();
    </script>
可以看看这个示例，跟你要的差不多