缩略图轮播 

<style>
#datu
{
    width:800px;
    height:500px;
    position:relative;
    margin:20px auto;
    border:2px solid red;
    overflow:hidden;}
#ta
{
    position:relative;
    left:0px;
    top:0px;
    transition:0.7s;}
#suo
{
    width:520px;
    height:70px;
    position:relative;
    margin:20px auto;
    border:2px solid blue;
    line-height:70px;}
.suo
{
    width:90px;
    height:50px;
    position:relative;
    border:1px solid yellow;
    float:left;
    margin-left:10px;
    margin-top:10px;}
</style>
</head>

<body>
<div id="datu" onmouseover="Zhi()" onmouseout="Li()" >
    <table id="ta" cellpadding="0" cellspacing="0">
        <tr height="500">
            <td><img src="images/1.jpg" width="800" /></td>
            <td><img src="images/2.jpg" width="800" /></td>
            <td><img src="images/3.jpg" width="800" /></td>
            <td><img src="images/4.jpg" width="800" /></td>
            <td><img src="images/5.jpg" width="800" /></td>
        </tr>
    </table>
</div>
<div id="suo"  onmouseover="Zhi()" onmouseout="Li()">
    <div class="suo" biao="1"><img src="images/1.jpg" width="90" height="50" /></div>
    <div class="suo" biao="2"><img src="images/2.jpg" width="90" height="50" /></div>
    <div class="suo" biao="3"><img src="images/3.jpg" width="90" height="50" /></div>
    <div class="suo" biao="4"><img src="images/4.jpg" width="90" height="50" /></div>
    <div class="suo" biao="5"><img src="images/5.jpg" width="90" height="50" /></div>
</div>
</body>
</html>
<script>
document.getElementById("ta").style.left="0px";
document.getElementsByClassName("suo").item(0).style.borderColor="red";
var biaosuo=1;

var suo=document.getElementsByClassName("suo");
for(var i=0;i<suo.length;i++)
{
    suo.item(i).onclick=function(){
            var biao = this.getAttribute("biao");
            for(var i = 0;i<5;i++)
            {
                if(i==biao-1)
                {
                    document.getElementsByClassName("suo").item(i).style.borderColor="red";    
                }
                else
                {
                    document.getElementsByClassName("suo").item(i).style.borderColor="yellow";    
                }
                if(biao==1)
                {
                    document.getElementById("ta").style.left="0px";    
                }
                else if(biao==2)
                {
                    document.getElementById("ta").style.left="-800px";    
                }
                else if(biao==3)
                {
                    document.getElementById("ta").style.left="-1600px";    
                }
                else if(biao==4)
                {
                    document.getElementById("ta").style.left="-2400px";    
                }
                else
                {
                    document.getElementById("ta").style.left="-3200px";    
                }    
            }
        }    
}

function Change()
{
    var ta = parseInt(document.getElementById("ta").style.left);
    if(ta>-3200)
    {
        document.getElementById("ta").style.left=(ta-800)+"px";
        ta=ta-800;
        if(ta==-800)
        {
            biaosuo=2;
        }
        else if(ta==-1600)
        {
            biaosuo=3;
        }
        else if(ta==-2400)
        {
            biaosuo=4;
        }
        else if(ta=-3200)
        {
            biaosuo=5;
        }
    }
    else
    {
        document.getElementById("ta").style.left="0px";
        biaosuo=1;
    }
    for(var i = 0;i<5;i++)
    {
        if(i==biaosuo-1)
        {
            document.getElementsByClassName("suo").item(i).style.borderColor="red";    
        }
        else
        {
            document.getElementsByClassName("suo").item(i).style.borderColor="yellow";    
        }    
    }
    shi=window.setTimeout("Change()",3000);    
}
var shi =window.setTimeout("Change()",3000);
function Zhi()
{
    window.clearTimeout(shi);    
}
function Li()
{
    shi=window.setTimeout("Change()",1000);    
}
</script>

 

posted @ 2016-11-28 10:47  Claricre  阅读(288)  评论(0)    收藏  举报