zoukankan      html  css  js  c++  java
  • 【HTML+CSS+JavaScript(jQuery)】图片通过按钮左右滚动

    需求:图片通过按钮左右滚动

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>滚动</title>
        <style>
            #box {
                800px;
                height:200px;
                border:2px solid orange;
                overflow: hidden;
            }
            .wrapper {
                2200px;
            }
            #box p {
                margin:0;
                198px;
                height:198px;
                float:left;
                border:1px solid #ccc;
                background: #369;
                color:#fff;
            }
    
        </style>
    </head>
    <body>
        <div id="box">
            <div class="wrapper">
                <p>lorem1</p>
                <p>lorem2</p>
                <p>lorem3</p>
                <p>lorem4</p>
                <p>lorem5</p>
                <p>lorem6</p>
                <p>lorem7</p>
                <p>lorem8</p>
                <p>lorem9</p>
                <p>lorem10</p>
                <p>lorem11</p>
            </div>
        </div>
        
    
    
        <br>
    
        <button id="left_btn"> < </button>
        <button id="right_btn"> > </button>
    
    
        <script src="../jquery-3.3.1.js"></script>
        <script>
            $(function(){
    
                $('#left_btn').on('click', function(){
                    //console.log($('#box').scrollLeft())
                    // $('#box').scrollLeft(800);//是把 scrollLeft 设置为800
                
                    $('#box').scrollLeft($('#box').scrollLeft() + 800);
                });
    
                $('#right_btn').on('click', function(){
                    $('#box').scrollLeft($('#box').scrollLeft() - 800 )
                })
            })
        </script>
    </body>
    </html>
  • 相关阅读:
    poj 3096 Surprising Strings (set)
    hdu 4038 stone
    STL set 使用总结
    poj 3185 The Water Bowls (bfs 加未压缩)
    QPixmap显示图片
    addStretch的作用 .
    Qt SizeHint()
    StyleSheet
    linux编程守护进程编写
    Qt样式表的使用
  • 原文地址:https://www.cnblogs.com/neymargoal/p/9487562.html
Copyright © 2011-2022 走看看