• 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;
    }
  • 相关阅读:
    抓取猫眼电影top100的正则、bs4、pyquery、xpath实现方法
    Win实用好用软件清单推荐
    Manjaro安装配置美化字体模糊发虚解决记录
    爬取杭电oj所有题目
    Python爬取微博热搜以及链接
    20191225_Python构造函数知识以及相关注意事项
    java_细节_windows7下记事本保存为utf-8格式的问题
    基础_划分子网
    爬虫_爬取有道每日一句
    算法_基础_伪代码定义以及遵循的规则
  • 原文地址:https://www.cnblogs.com/huangmin1992/p/7515539.html
Copyright © 2020-2023  润新知