轮播的简单实现

web开发相比经常需要用到轮播，作为一个后台开发人员平时最多也就是找个现成的，具体是怎么实现的也不咋晓得，今天就简单实现一个轮播效果

效果如下：

我就直接贴代码了，都有注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .banner{
            position: relative;
            width: 300px;
            height: 200px;
            overflow: hidden;
        }
        .banner ul{
            position: absolute;
            bottom: 5px;
            right: 5px;
            z-index:1000;
        }
        li{
            padding: 0 5px;
            float: left;
            display:block;
            color:#FFF;
            border:#e5eaff 1px solid;
            background:#6f4f67;
            cursor:pointer;
        }
        li.on{
            background-color: coral;
        }
        img{
            position: absolute;
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
    <div class="banner">
        <ul>
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        
        <div class="list">
            <img src="imgs/1.jpg">
            <img src="imgs/2.jpg">
            <img src="imgs/3.jpg">
            <img src="imgs/4.jpg">
        </div>
    </div>
</body>
</html>
<script src="js/jquery.js"></script>
<script>
    var n= 0,t;
    $("li").on("click",function(){
        var i = $(this).text()-1;
        //按钮的切换
        $(this).toggleClass("on");
        $(this).siblings().removeAttr("class");
        //图片的切换（position:absolute使得图片重叠在一起，改变层级关系实现切换）
        $("img").eq(i).delay(1000).css("z-index","100");
        $("img").eq(i).siblings().delay(50).css("z-index","");
    });
    //初始化显示第一张图片
    $("img").eq(0).css("z-index","100");
    $("img").eq(0).siblings().css("z-index","");
    //开启自动化显示
    t=setInterval("show()", 4000);

    function show(){
        n = n>3?0:++n;
        $("li").eq(n).trigger('click');
    }
</script>

应该很容易看懂，别的类型的轮播可以照此修改就好啦，就不赘述了

posted @ 2016-09-01 09:36  暗夜心慌方  阅读(184)  评论(0)    收藏  举报