大图轮播（标记）

整体思路；

  设一个div，设置宽与高。嵌入一个表格，确定好位置后，插入图片，超出部分隐藏。

  在js中定义一个变量接受left的值，并赋值为0px，即初始值

  设置一个函数

function  a（）{在值中减掉一张图片的宽度}

  设置一个延时时间

<style>
#tu{ width:400px; height:300px; position:relative; margin:50px auto; overflow:hidden; border:1px solid #000;}
#sk{ position:relative; left:0px; top:0px; transition:0.5s;}
</style>
</head>

<body>
<div id="tu" onclick="Change()">
<table id="sk" cellpadding="0" cellspacing="0">
<tr height="300">
<td><img src="" height="300" /></td>
<td><img src="图片" /></td>
<td><img src="图片" /></td>
<td><img src="图片" height="300" /></td>
</tr>
</table>

</div>

</body>
</html>
<script>
document.getElementById("sk").style.top="0px";
function Change()
{
    var sk = parseInt(document.getElementById("sk").style.top);
    
    if(sk>-1200)
    {
    document.getElementById("sk").style.top=(sk-400)+"px";
    }
    else{
          document.getElementById("sk").style.top="0px"
        }
        window.setTimeout("Change()",1700)
}
window.setTimeout("Change()",1700)
</script>

 带有标记的大图轮播：

<html>
        <head>
            <title>123</title>
        </head>
        
        <style>
 #st{
        width: 1170px; height: 425px; overflow: hidden;
        margin: auto;border: 1px solid #FCC;
        top:10px;
        left:auto;
        position:relative
    }
    #sy{
        position: relative; top: 0px; left: 0px;
        transition: 0.7s;
    } 
</style>
<body>
 <div id="st" onMouseOver="shao()" onMouseOut="Li()" >
                <table id="sy" cellpadding="0" cellspacing="0">
                    <tr height="425">
                        <td><img src="image/2016-04-22_ht_ug_Ellie_5029.jpg" width="1170px"/></td>
                        <td><img src="image/2016-12-20_oilsands_home.jpg" style=" width:1170px; height:425px" /></td>
                        <td><img src="image/2016-12-23_holiday_hp.jpg" style=" width:1170px; height:425px" /></td>
                        <div id="jt" onClick="zuo()"><</div>
                        <div id="jt2" onClick="you()">></div>
                        
    
                    </tr>
                </table>    
            </div>
        </body>
    </html>
<script>
document.getElementById("sy").style.left="0px"
function abc()
{
    var sy= parseInt(document.getElementById("sy").style.left);
    if(sy>-2340){
        document.getElementById("sy").style.left=(sy-1170)+"px"
        }
    else{
        document.getElementById("sy").style.left="0px"
        }
        shi=window.setTimeout("abc()",3000);
} 
var shi=window.setTimeout("abc()",3000);
function zuo(){
    var sy = parseInt(document.getElementById("sy").style.left);
    if(sy<0)
    {
        document.getElementById("sy").style.left=(sy+1170)+"px"
        sy=sy+1170;
    }
    else
    {
        document.getElementById("sy").style.left="-2340px"
    }
    }
    function you()
    {
        var sy = parseInt(document.getElementById("sy").style.left);
        if(sy>-2340)
        {
            document.getElementById("sy").style.left=(sy-1170)+"px"
        sy=sy-1170;
        }
        else
        {
            document.getElementById("sy").style.left="0px"
        }
    }
     function shao()
     {
        window.clearTimeout(shi) 
    }
    function Li()
    {
        shi=window.setTimeout("abc()",3000)
    }
</script>

给图标设置点击事件，并且给轮播设置指向停止即可

posted @ 2016-12-14 11:47  长腿野生璇  阅读(470)  评论(0)  编辑  收藏  举报