zoukankan      html  css  js  c++  java
  • js无缝滚动

    //$('.news-list').width($('.nw-wraper').width());
    var timer = null,
        $newBox = $('.nw-box'),//元素盒子
        $items = $newBox.children(),//子元素
        $pre = $('.news-prev'),
        $next = $('.news-next'),
        oldCount = $items.size(),//子元素长度
        //imgWidth = $('.news-list').eq(0).width();
            imgWidth = $items.width();//单个子元素宽度
        $newBox.append($items.first().clone());//克隆,方便切换
        $newBox.prepend($items.last().clone());
    var    newCount = $newBox.children().size();//子元素新长度
        $newBox.css({
            'left':0-imgWidth,
            'width':imgWidth*newCount
        })
    timer=setInterval(init,3000);
    // 初始化
    function init(){
        $pre.trigger('click'); 
    } 
    // hover
    $(".nw-wraper").hover(function(){
        clearInterval(timer);
    },function(){
        timer=setInterval(init,3000);
    });
    $next.on('click',function(){
        playNext();
    })
    $pre.on('click',function(){
        playPre();
    })
    
    var move = 1,
        curidx = 0;
    function playNext(){
        $newBox.animate({
            'left':'-='+move*imgWidth
        },function(){
            curidx+=move;
            if(curidx==oldCount){
                $newBox.css({
                    'left':0-imgWidth
                })
                curidx=0;
            }
        })
    }
    
    function playPre(){
        $newBox.animate({
            'left':'+='+move*imgWidth
        },function(){
            curidx-=move;
            if(curidx==(-1)){
                $newBox.css({
                    'left':0-imgWidth*oldCount
                })
                curidx = oldCount-1;
            }
        })
    }

    <div class="nw-wraper">
        <div class="nw-box">
        <!-- donghua -->
            <div class="news-list">
                <a href="javascript:;">1</a>
            </div>
            <div class="news-list">
                <a href="javascript:;">2</a>
            </div>
            <div class="news-list">
                <a href="javascript:;">3</a>
            </div>
            <div class="news-list">
                <a href="javascript:;">4</a>
            </div>
        </div>
        <!-- 分页按钮 -->
        <div class="news-dir">
            <div class="news-mao news-prev"><span class="fa-angle-left"></span></div>
            <div class="news-mao news-next"><span class=" fa-angle-right"></span></div>
        </div>
    </div>
    .nw-wraper
    .news-list{
        width: 600px;
        height: 300px;
        overflow: hidden;
        position: relative;
    }
    .nw-box{
        width: 1000%;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
    }
    .news-list{
        float: left;
    }
  • 相关阅读:
    maven系列--eclipse的m2插件
    eclipse安装反编译插件
    maven系列--settings.xml
    maven系列--maven常用命令
    maven系列--maven目录
    centos 常用命令
    iis7.0 发生未知 FastCGI错误,错误代码 0x8007010b 的解决办法
    git 提交的步骤
    关于PHP函数传参的注意点
    关于SQL查询语句中的LIKE模糊查询的解释
  • 原文地址:https://www.cnblogs.com/huangmin1992/p/7515539.html
Copyright © 2011-2022 走看看