简单的轮播公示

最新推荐文章于 2024-04-15 10:28:24 发布

转载最新推荐文章于 2024-04-15 10:28:24 发布 · 220 阅读

jquery 专栏收录该内容

21 篇文章

订阅专栏

普通

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{padding:0px;margin:0px}
    .item-box{
        position: relative;
        overflow: hidden;
        height:30px;
    }
    .item{
        position: absolute;
        height: 30px;
        left:0px;
        line-height: 30px;
    }
</style>
</head>
<body>
    <ul class="item-box">
        <li class="item">aaaa</li>
        <li class="item">bbbb</li>
        <li class="item">cccc</li>
        <li class="item">dddd</li>
        <li class="item">eeee</li>
        <li class="item">ffff</li>
    </ul>
</body>
</html>
<script type="text/javascript" src="../../jq/js/jquery-1.11.3.js"></script>
<script type="text/javascript">
    $('.item').each(function(k,v){
        $(v).css({
            top: k * 30 + 'px'
        })
    });

    setInterval(inter,2000);
    function inter(){
        $disappear = $('.item:first');
        $clone = $('.item:first').clone();
        $clone.css({top: $('.item').length * 30});
        $('.item-box').append($clone);
        $('.item').animate({top: '-=30px'},1000,function(){
            $disappear.remove();
        })
    }
</script>

jQuery插件

html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{padding:0px;margin:0px}
</style>

</head>
<body>
<ul class="item-box">
        <li class="item">aaaa</li>
        <li class="item">bbbb</li>
        <li class="item">cccc</li>
        <li class="item">dddd</li>
        <li class="item">eeee</li>
        <li class="item">ffff</li>
    </ul>
</body>
</html>
<script type="text/javascript" src="plugin/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="plugin/slider.js"></script>

<script type="text/javascript">
    $('.item-box').slider({
        height: 30,
        showRow: 2,
        sliderTime: 500,
        speed: 2000
    });
</script>

;(function($,window,document,undefined){
   $.fn.slider = function(options){
    var defaults = {
        height: 30,
        showRow: 2,
        sliderTime: 1000,
        speed: 3000
    }
    var _this = this;
    var opt = $.extend({}, defaults,options);
       _this.css({
            height:opt.height* opt.showRow,
            position: 'relative',
             overflow: 'hidden'
        }); // .item-box样式
        _this.children('li').css({
            height: opt.height ,    //li的高度
           lineHeight: opt.height +'px',
            position: 'absolute',
            left:'0px' 
        });
        _this.children('li').each(function(k,v){  //通过绝对定位
            $(this).css({
                top: k*opt.height + 'px'
            });
        });
        // setTimeout(inter,opt.speed);
        setInterval(inter,opt.speed);

        function inter(){
          var $disappear =  _this.children('li').eq(0);
          var  $clone =  _this.children('li').eq(0).clone();
           $clone.css({
            top: _this.children('li').length * opt.height
           });
           _this.append($clone);
           _this.children('li').animate({top: '-=' + opt.height + 'px'},opt.sliderTime,function(){
            $disappear.remove();
           });
        }

   };   
})(jQuery,window,document);