js练习 轮播图

图片转换最基本的跳转，有左右两侧按钮可以切换图片，下方有小圆点可以选择图片

<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style type="text/css">
    *{margin:0 auto; padding:0;}
    #lbt{ width:800px; height:500px; overflow:hidden; margin-top:50px;}
    .tu{ width:800px; height:500px; display:none;}
    #key{ width:750px; height:0px;}
    #kleft{ width:50px; height:50px; background-color:#FFF; border-radius:25px; float:left; position:relative; top:-275px; opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50); font-size:36px; color:#000; line-height:50px; text-align:center;}
    #kright{ width:50px; height:50px; background-color:#FFF; border-radius:25px; float:right; position:relative; top:-275px; opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50); font-size:36px; color:#000; line-height:50px; text-align:center;}
    #kleft,#kright:hover{ cursor:pointer;}
    #xuan{ width:80px; height:20px; position:relative; top:-50px;}
    .xd{ width:10px; height:10px; margin:5px; float:left; background-color:#fff; border-radius:5px; opacity:0.5;-moz-opacity:0.5;}
</style>
</head>

<body>
    <div id="lbt">
        <div class="tu" style="display:block"><img src="images/lunbo1.jpg"/></div>
        <div class="tu"><img src="images/lunbo2.jpg"/></div>
        <div class="tu"><img src="images/lunbo3.jpg"/></div>
        <div class="tu"><img src="images/lunbo4.jpg"/></div>
    </div>
    <div id="xuan">
        <div class="xd" xl="0" style="opacity:1;-moz-opacity:1;"></div>
        <div class="xd" xl="1"></div>
        <div class="xd" xl="2"></div>
        <div class="xd" xl="3"></div>
    </div>
    <div id="key">
        <div id="kleft"><</div>
        <div id="kright">></div>
    </div>

</body>
</html>
<script type="text/javascript">
    var tu = document.getElementsByClassName("tu");
    var xd = document.getElementsByClassName("xd");
    var sy = 0;
    window.setInterval("tiao()",5000);
    /*
        索引每次加1，超过3就返回到0从头开始，然后调用函数huan()
    */
    function tiao()
    {
        sy++;
        if(sy>3)
        {
            sy = 0;
        }
        huan();
    }
    /*
        换到现在的索引对应的图
    */
    function huan()
    {
        for(var i=0;i<tu.length;i++)
        {
            tu[i].style.display = "none";
            xd[i].style.opacity = "0.5";
            xd[i].style.MozOpacity = "0.5";
        }
        tu[sy].style.display = "block";
        xd[sy].style.opacity = "1";
        xd[sy].style.MozOpacity = "1";
    }
    /*
        点击左侧圆点换到上一张图
    */
    var kl = document.getElementById("kleft");
    kl.onclick = function()
    {
        sy--;
        if(sy<0)
        {
            sy=3;
        }
        huan();
    }
    /*
        点击右侧圆点换到下一张图
    */
    var kr = document.getElementById("kright");
    kr.onclick = function()
    {
        sy++;
        if(sy>3)
        {
            sy = 0;
        }
        huan();
    }
    /*
        点击下方圆点直接跳转到相应的图片
    */
    
    for(var i=0;i<xd.length;i++)
    {
        xd[i].onclick = function()
        {
            var syh = parseInt(this.getAttribute("xl"));
            sy = syh ;
            huan();
        }
    }
</script>

 

 

　效果　

 

posted @ 2017-12-07 19:30  黑山大胖子  阅读(245)  评论(0)  编辑  收藏  举报