• jQuery单张图无缝滚动(图片轮播)


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>图片轮播效果</title>
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <script>
    $(function(){
        var oul = $('.wrap ul');
        var ali = $('.wrap ul li');
        var numli = $('.wrap ol li');
        var aliWidth = $('.wrap ul li').eq(0).width();
        var _now = 0;   //这个是控制数字样式的计数器
        var _now2 = 0;    //这个是控制图片运动距离的计数器
        var timeId = null;
        numli.click(function(){
            var index = $(this).index();
            _now = index;
            _now2 = index;
            $(this).addClass('current').siblings().removeClass('current');
            oul.animate({'left':-aliWidth*index},500);
        });
    
    
        //图片运动的函数
        function slider(){
            if(_now==numli.size()-1){
                ali.eq(0).css({
                    'position' : 'relative',
                    'left' : oul.width()
                });
                _now = 0;
            }else{
                _now++;
            };
            _now2++;
    
            numli.eq(_now).addClass('current').siblings().removeClass('current');
            oul.animate({'left':-aliWidth*_now2},500,function(){
                if(_now == 0){
                    ali.eq(0).css('position','static');
                    oul.css('left',0);
                    _now2 = 0;
            }
            });
        };
    
        timeId = setInterval(slider,1500);
        $('.wrap').hover(function(){
            clearInterval(timeId);
        },function(){
            timeId = setInterval(slider,1500);
        });
    });
    </script>
    <style>
    *{margin:0;padding:0;}
    li{list-style: none;}
    body{margin: 50px;}
    .wrap{ 500px; height:350px; border:3px solid #f90; margin: 0 auto; position: relative; overflow: hidden;}
    .wrap ul{ 2000px; position: absolute; left: 0; top:0;}
    .wrap ul li{float: left; 500px;}
    .wrap ol{position: absolute;bottom: 10px;right: 10px;}
    .wrap ol li{float: left; 16px; height: 16px; text-align: center; line-height: 16px; border:1px solid yellow; background: #000; color: #fff; margin-right:3px; cursor:pointer;}
    .wrap ol li.current{background: #fff; color: #000;}
    </style>
    </head>
    <body>
    
    <div class="wrap">
        <ul>
            <li><img src="1.jpg" alt=""></li>
            <li><img src="2.jpg" alt=""></li>
            <li><img src="3.jpg" alt=""></li>
            <li><img src="4.jpg" alt=""></li>
        </ul>
        <ol>
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </div>
    
    </body>
    </html>

    要记着把ul的overflow:hidden去掉,一开始测试的时候加上的,后来测试怎么都不对,最后发现时这个问题,要记牢了

  • 相关阅读:
    Python+selenium常见报错
    jmeter压力测试指标解释
    jemte自动生成测试报告方法
    iview清空Date-picker组件后请求报错解决方法
    【求助】Django+vue项目时候遇到一个问题,table的data数据怎么更新
    django_数据库操作—增、删、改、查
    django-关于manage.py migrate无效的问题
    python家里的环境和公司环境怎么同步
    python class类的属性应用及init初始化实践 ---勇者斗恶龙
    IDLE与pycharm执行相同代码结果却不同,原因分析
  • 原文地址:https://www.cnblogs.com/littlefly/p/3676676.html
Copyright © 2020-2023  润新知