JQuery简单轮换广告-第一版

最新推荐文章于 2020-02-08 14:01:12 发布

xxb2008

最新推荐文章于 2020-02-08 14:01:12 发布

阅读量819

点赞数

分类专栏： JQuery插件

本文链接：https://blog.csdn.net/xxb2008/article/details/8835665

版权

JQuery插件专栏收录该内容

7 篇文章 0 订阅

订阅专栏

关键在于，需要对CSS的定位的了解，然后通过控制left来控制左右切换（top控制上下切换）

position:relative

position:absolute

CSS:

 *{margin: auto }
     body{margin:0; padding:0;}
    .box{width: 800px; height: 600px; border:1px solid red;text-align: center;}
    .box_relative{width: 480px; height: 270px;border: 1px solid red; position: relative; overflow: hidden;}
    .box_absolute{width: 100000px;height: 270px; position:absolute; left: 0; top:0}
    .box_ad{width: 480px; height:270px; float: left; }
    .box_ad_blue{background: #a3bad9;}
    .box_ad_green{background: #F0FFE5;}
    .button{width: 30px;height: 50px; position:absolute;  filter: alpha(opacity=50);  opacity: 0.5; background: #00B83F;top:100px; padding-top: 30px}
    .button_left{left: 0; }
    .button_right{right: 0;}

JavaScript:

<script type='text/javascript' src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

 jQuery(document).ready(function(){
        var $boxAbsolute = $(".box_absolute");
        var boxAdLength = $boxAbsolute.find(".box_ad").length;
        var boxAdLengthBak = boxAdLength;

        $(".button_left").click(function(){
            if(boxAdLength <= 1){ return;}
            if($boxAbsolute.is(":animated")) return;

            $boxAbsolute.animate({left:"-=480"});
            boxAdLength--;
        });

        $(".button_right").click(function(){
            if(boxAdLength >= boxAdLengthBak){ return;}
            if($boxAbsolute.is(":animated")) return;

            $boxAbsolute.animate({left:"+=480"});
            boxAdLength++;
        });
    });

HTML：

<body>

<div class="box">
    <div class="box_relative">
        <div class="box_absolute">
            <div class="box_ad box_ad_blue">1</div>
            <div class="box_ad box_ad_green">2</div>
            <div class="box_ad box_ad_blue">3</div>
            <div class="box_ad box_ad_green">4</div>
        </div>
        <div class="button button_left"> < </div>
        <div class="button button_right" > > </div>
    </div>
</div>

</body>

xxb2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery简单轮换广告-第一版

关键在于，需要对CSS的定位的了解，然后通过控制left来控制左右切换（top控制上下切换）position:relativeposition:absoluteCSS: *{margin: auto } body{margin:0; padding:0;} .box{width: 800px; height: 600px; border:1px s
复制链接

扫一扫

专栏目录