当前位置： 移动技术网 > IT编程>网页制作>CSS > 轮播的代码实现教程

轮播的代码实现教程

2018年01月22日  | 移动技术网IT编程  | 我要评论
轮播的代码实现教程 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        img{
            width:533px;
            height:300px;
        }
        .container{
            width:533px;
            height:300px;
            position: relative;
            margin:10px auto;
        }
        .con p{
            display: none;
            position: absolute;
        }
        .container .current{
            display: block;
        }
        .dian{
            position: absolute;
            bottom:10px;
            left:200px;
            width:200px;
            height:30px;
        }
        .dian li{
            height:10px;
            width:10px;
            border-radius:50%;
            margin:auto 10px;
            background: #fff;
            float: left;
            list-style: none;
        }
        .dian .current{
            background: #f38;
        }
        .container:hover .prev{
            display: block;
        }
        .container:hover .next{
            display: block;
        }
        .next{
            height:70px;
            width:30px;
            line-height:70px;
            font-size: 30px;
            font-weight:700;
            color:#fff;
            position: absolute;
            top:115px;
            background: rgba(0,0,0,.4);
            right:0;
            display: none;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
            cursor: pointer;
        }
        .prev{
            height:70px;
            width:30px;
            line-height:70px;
            font-size: 30px;
            font-weight:700;
            color:#fff;
            position: absolute;
            top:115px;
            background: rgba(0,0,0,.4);
            left:0;
            display: none;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
            cursor: pointer;
        }

    </style>
</head>
<body style="text-align: center;">
<p class="container">
    <p class="con">
        <p class="current"><img src="images/u=463629470,3575711901&fm=27&gp=0.jpg" alt=""></p>
        <p><img src="images/u=1756874692,3026443319&fm=27&gp=0.jpg" alt=""></p>
        <p><img src="images/u=2851990104,2745395319&fm=27&gp=0.jpg" alt=""></p>
        <p><img src="images/u=3987449404,3914005315&fm=27&gp=0.jpg" alt=""></p>
    </p>
    <ul class="dian">
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <a class="next">></a>
    <a class="prev"><</a>
</p>
</body>
<script src="jquery/jquery.js"></script>
<script>
    $(function () {
        clearInterval(timer);
        $('.next').on('click',function(){
            next($('.con p'),$('.dian li'));
        });
        $('.prev').on('click',function(){
            prev($('.con p'),$('.dian li'));
        });

        var timer=setInterval(function () {
            next($('.con p'),$('.dian li'));
        },3000);

        $('.container').hover(function () {
                clearInterval(timer);
            },function () {
                clearInterval(timer);
                timer=setInterval(function () {
                    next($('.con p'),$('.dian li'));
                },3000);
            }
        );
        $('.dian li').on('click',function () {
            var index=$(this).index();
            $('.con p').eq(index).stop().fadeIn().siblings().stop().fadeOut();
            $(this).addClass('current').siblings().removeClass('current');
            n=index;
        })
    });
    var n=0;
    var leg=$('.container p').length;
    //obj=$('.con p');
    //obj1=$('.dian li');
    function next(obj,obj1) {//封装一个点击向左的函数
        n++;
        if(n>leg-2){
            n=0
        }
        obj.eq(n).stop().fadeIn().siblings().stop().fadeOut();
        obj1.eq(n).addClass('current').siblings().removeClass('current');
    }
    function prev(obj,obj1) {//封装一个点击向左的函数
        n--;
        if(n<0){
            n=leg-2;
        }
        obj.eq(n).stop().fadeIn().siblings().stop().fadeOut();
        obj1.eq(n).addClass('current').siblings().removeClass('current');
    }
</script>
</html>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网