轮播图代码

时间：2017-11-25 15:15:14 阅读：156 评论：0 收藏：0 [点我收藏+]
标签：int pre doctype list val osi vue radius rgb
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title></title>
        <style type="text/css">
            body,ul,li,p{
                margin:0;
                padding: 0;
            }
            ul{
                list-style:none;
            }
            #wrap{
                position: relative;
                width: 300px;
                height: 200px;
                margin:100px auto;
            }
            #img{
                overflow: hidden;
                width: 100%;
                height: 100%;
            }
            #img ul{
                width: 900%;
                height: 100%;
                margin-left: -300px;
            }
            #img ul li{
                /*display: none;*/
                /*position: absolute;
                top:0;
                left:0;*/
                float: left;
                width: 300px;
                height: 200px;
                background: pink;
                text-align: center;
                line-height: 200px;
                font-size: 30px;
            }
            #tab{
                position: absolute;
                left:50%;
                bottom: 20px;
                width: 200px;
                height: 20px;
                margin-left: -80px;
            }
            #tab ul li{
                float: left;
                width: 15px;
                height: 15px;
                background: #fff;
                margin-right: 10px;
                border-radius: 50%;
                cursor: pointer;
            }
            #tab ul li.active{
                background: #f60;
            }
            #btn span{
                position:absolute;
                top:50%;
                width: 20px;
                height: 40px;
                background: rgba(0,0,0,.5);
                margin-top: -20px;
                color:#fff;
                text-align: center;
                line-height: 40px;
                font-size: 20px;
                font-weight: bold;
                cursor: pointer;
                user-select:none;
            }
            #btn span:nth-child(1){
                left:0;
            }
            #btn span:nth-child(2){
                right:0;
            }
     </style>
    </head>
    <body>
        <div id="wrap">
            <div id="img">
                <ul>
                    <li>7</li>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>1</li>
                </ul>
            </div>
            <div id="tab">
                <ul>
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div id="btn">
                <span id=‘span1‘>&lt;</span>
                <span id=‘span2‘>&gt;</span>
            </div>
        </div>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
        <script>
            $(function(){
                var $tabaLi = $(‘#tab ul li‘),
                    $Ul = $(‘#img ul‘),
                    imgWidth = $(‘#img ul li‘).width(),
                    index = 0,
                    $oBtn = $(‘#btn span‘),
                    length = $tabaLi.length,
                    nowTime = new Date();
                $tabaLi.click(function(){
                    $(this).addClass(‘active‘).siblings().removeClass(‘active‘);
                    index = $(this).index();
                    $Ul.animate({
                        marginLeft:-imgWidth*(index+1) + ‘px‘
                    },300)
                })
                $oBtn.click(function(){
                    if(new Date() - nowTime >=300){
                        nowTime = new Date();
                        var i = $(this).index();
                        if(i){
                            index++;
                        }else{
                            index--;
                        }
                        fn()
                    }
                })
                setInterval(function(){
                    index++;
                    fn()
                },5000)
                function fn(){
                    var liIndex = index;
                    if(liIndex >= length){
                        liIndex=0;
                    }else if(liIndex < 0){
                        liIndex = length-1;
                    }
                    $tabaLi.eq(liIndex).addClass(‘active‘).siblings().removeClass(‘active‘);
                    $Ul.animate({
                        marginLeft:-imgWidth*(index+1) + ‘px‘
                    },300,function(){
                        if(index >= length){
                            $Ul.css(‘marginLeft‘,-imgWidth),
                            index = 0;
                        }else if(index<0){
                            index = length-1;
                            $Ul.css(‘marginLeft‘,-imgWidth*(index+1));
                        }
                    })
                }
            })
       </script>
    </body>
</html>
轮播图代码
标签：int pre doctype list val osi vue radius rgb
原文地址：http://www.cnblogs.com/blooog/p/7895162.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行