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

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

<!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>
免责声明: 本站所有源码都来源于网络收集修改或者交换,只做学习和交流使用,版权归原作者所有,若为付费资源,请在下载后24小时之内自觉删除,若作商业用途,请到原网站购买,由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容如果侵犯了您的权益,请及时告知我们,我们即刻处理!本站联系邮箱:waxcu6@163.com
吉素材 » 代码实现轮播图的方法(一)

提供最优质的资源集合

立即查看 了解详情