欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

代码实现轮播图的方法(一)

程序员文章站 2022-05-28 21:29:17
代码实现轮播图的方法(一)

代码实现轮播图的方法(一)

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>o</title>
    <link rel="stylesheet" type="text/css" href="my.css">
    <style>
        * {
            margin:0;
            padding:0
        }
        #container {
            width:450px;
            height:300px;
            margin-left:535px;
            overflow: hidden;
        }
        .banner-img-ul {
            list-style-type: none;
            width:1800px;

        }
        .banner-img-li {
            float:left;
        }
        img {
            width:450px;
            height:300px;
        }
        #yuan {
            width:160px;
            height:20px;
            background-color:rgb(99,3,18);
            border-radius: 10px;
            text-align: center;
            position:relative;
            left:680px;
            top:-20px;
            opacity:0.4;
        }
        .circle {
            width:16px;
            height:16px;
            background-color:grey;
            border-radius: 8px;
            display:inline-block;
            position: relative;
            top:1px;
        }
        .color {
            background-color: white;
        }
        .btn {
            border:0px;
            width:30px;
            height:30px;
            border-radius:15px;
            color:white;
            font-size:20px;
        }
        .btn1 {
            position:relative;
            left:550px;
            top:-190px;
            opacity:0.6;
        }
        .btn2 {
            position:relative;
            left:900px;
            top:-190px;
            opacity:0.6;
        }
    </style>
    </head>
    <body>
        <p id="container">
            <ul class="banner-img-ul">
                <li class="banner-img-li"><img src="1.jpg"></li>
                <li class="banner-img-li"><img src="2.jpg"></li>
                <li class="banner-img-li"><img src="3.jpg"></li>
                <li class="banner-img-li"><img src="4.jpg"></li>
            </ul>
        </p>
        <p id="yuan">
            <p class="circle color"></p>
            <p class="circle"></p>
            <p class="circle"></p>
            <p class="circle"></p>
        </p>
        <input type="button" value=">" class="btn btn1">
        <input type="button" value="<" class="btn btn2">
    <script src="tools/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script>
            var timer=null;
            //鼠标移入。
            $(".banner-img-ul").on("mouseover",function(){
                window.clearinterval(timer);
            })
            //鼠标移出。
            $(".banner-img-ul").on("mouseout",function(){
                timer=setinterval(function(){
                var l = $(".banner-img-ul").offset().left;
                if(l <= -815 ){
                    $(".banner-img-ul").offset({left:535});
                    circlerun();
                }else{
                    $(".banner-img-ul").offset({left:l-450});
                    circlerun();
                }
        },1000)
            })
            //轮播。
            $(".banner-img-ul").mouseout();
        //右滑动。
            $(".btn2").on("click",function(){
            window.clearinterval(timer);
            var l = $(".banner-img-ul").offset().left;
            if(l < 535 ){
                    $(".banner-img-ul").offset({left:l+450});
                    circlerun();
                }else{
                    $(".banner-img-ul").offset({left:-815});
                    circlerun();
                }
            $(".banner-img-ul").mouseout();
        })
        //左滑动。
        $(".btn1").on("click",function(){
            window.clearinterval(timer);
            var l = $(".banner-img-ul").offset().left;
            if(l <= -815 ){
                    $(".banner-img-ul").offset({left:535});
                    circlerun();
                }else{
                    $(".banner-img-ul").offset({left:l-450});
                    circlerun();
                }
            $(".banner-img-ul").mouseout();
        })
        //小圆点运动起来。
        function circlerun(){
        var l = $(".banner-img-ul").offset().left
        if(l==535){
            $(".circle").eq(0).addclass("color");
            $(".circle").eq(1).removeclass("color");
            $(".circle").eq(2).removeclass("color");
            $(".circle").eq(3).removeclass("color");
        }
        if(l==85){
            $(".circle").eq(1).addclass("color");
            $(".circle").eq(0).removeclass("color");
            $(".circle").eq(2).removeclass("color");
            $(".circle").eq(3).removeclass("color");
        }
        if(l== -365){
            $(".circle").eq(2).addclass("color");
            $(".circle").eq(0).removeclass("color");
            $(".circle").eq(1).removeclass("color");
            $(".circle").eq(3).removeclass("color");
        }
        if(l== -815){
            $(".circle").eq(3).addclass("color");
            $(".circle").eq(0).removeclass("color");
            $(".circle").eq(1).removeclass("color");
            $(".circle").eq(2).removeclass("color");
        }
    }
        
        
        // 点击小圆点,对应相对的图。
        $(".circle").on("click",function(){
            window.clearinterval(timer);
            qs();
            $(this).addclass("color");
            for(var j = 0;j < $(".circle").length;j++){
                if($(".circle").eq(j).hasclass("color")){
                    $(".banner-img-ul").offset({left:535-450*j});        
                }
            }
            $(".banner-img-ul").mouseout();
            })
        //小圆点全变会灰。
        function qs(){
                $(".circle").eq(0).removeclass("color")
                $(".circle").eq(1).removeclass("color")
                $(".circle").eq(2).removeclass("color")
                $(".circle").eq(3).removeclass("color")
        }

        

    </script>
    </body>
</html>