js上一個下一個左右滾動實現

阿新 • • 發佈：2019-01-11

.outerdiv {
        width: 100%;

    }
    .innerdiv{
        white-space: nowrap;
        width:70px;
        height: 70px;
        border:1px solid green;
        overflow: hidden;
        float:left;

    }
    .outerdiv ul {
        width: 1000px;
    }
    .outerdiv ul li {
        white-space: nowrap 
;
        font-size: 14px;
        float:left;


    }

    .outerdiv ul li {
        width: 50px;
        height: 50px;
        margin: 10px 10px ;

    }
    .outerdiv ul li:nth-child(2n) {
        background-color: red;

    }
    .outerdiv ul li:nth-child(2n+1){
        background-color: cornflowerblue 
;

    }
    .outerdiv ul li:last-child{
        background-color: transparent;
    }
    .leftdiv{
        height:70px;
        float: left;
       margin-right: 50px;
    }
    .rightdiv{
        height: 70px;
        float: left;
       margin-left:50px;
    }
    .centerdiv{
        height: 70px;
        width 
: 600px;
        margin: 30px auto;
    }
</style>
</head>
<body>
<div class="outerdiv">
    <div class="centerdiv">
        <div class="leftdiv">
            <input type="button" name="pre" value="pre">
        </div>
        <div class="innerdiv">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li></li>
            </ul>
        </div>
        <div class="rightdiv">
            <input type="button" name="next" value="next">
        </div>

    </div>

</div>

<script src="../js/libs/jquery-1.11.3.js">
</script>
<script src="../js/libs/jquery.almvalidate.js"></script>

<script>
    var scrollWidth = $("div.innerdiv").get(0).scrollWidth;
    $("[name=pre]").bind("click",function(){
        //多增加li 錯位處理
var  left = $("div.innerdiv").get(0).scrollLeft;
        var width = $("div.innerdiv").width();
        var scrollWidth = $("div.innerdiv").get(0).scrollWidth-width;

        if(left + width >= scrollWidth){
            $("div.innerdiv").animate({"scrollLeft":0},500);
        }else{
            $("div.innerdiv").animate({"scrollLeft":left+width},500);
        }
    });

    $("[name=next]").bind("click",function(){
        var  left = $("div.innerdiv").get(0).scrollLeft;
        var width = $("div.innerdiv").width();
        var maxLeft = $("div.innerdiv").get(0).scrollWidth - width*2;
        var justLeft = maxLeft+10; //10 是margin值
if(left == 0){
            $("div.innerdiv").animate({"scrollLeft":justLeft},500);
        }else{
            $("div.innerdiv").animate({"scrollLeft":left-width},500);
        }


    });
</script>

js上一個下一個左右滾動實現

.outerdiv { width: 100%; } .innerdiv{ white-space: nowrap; width:70

JS/JQuery獲取當前元素的上一個/下一個兄弟級元素等元素的方法

input logs type ron put 綁定 style wid cti $(function(){ //遍歷獲取的input元素對象數組，綁定click事件 var len = $("input[type=‘file‘]").length;

js jquery獲取當前元素的兄弟級上一個下一個元素 jquery如何獲取第一個或最後一個子元素

pre tool 處理語法 exp iou 元素 dex syn var chils= s.childNodes; //得到s的全部子節點 var par=s.parentNode; //得到s的父節點 var ns=s.nextSbiling; //獲得s的下

java實現List集合中獲取上一個下一個元素

public static void main(String[] args) { List<Integer> list = new ArrayList<Integer>(); list.add(1); list.add(2); lis

Javascript JQuery獲取當前元素的兄弟元素/上一個/下一個元素（轉）

var chils= s.childNodes; //得到s的全部子節點 var par=s.parentNode; //得到s的父節點 var ns=s.nextSbiling; //獲得s的下一個兄弟節點 var ps=s.previousSbiling; //得到s的上一個兄弟節點 var fc=s

解決iscroll.js上拉下拉重新整理手指劃出螢幕頁面無法回彈問題

使用過iscroll.js的上拉下拉重新整理效果的朋友應該都碰到過這個問題：在iOS的瀏覽器中，上拉或下拉重新整理時，當手指劃出屏幕後，頁面無法彈回。很多人因為解決不了這個問題，乾脆就那樣不解決了，還有的直接就不用HTML了，使用原生代替HTML頁面。相信很多朋友也有

JS中在當前日期上追加一天或者獲取上一個月和下一個月

ren days 月的天數 rem () split color 測試 -1 /** * 獲取上一個月 * * @date 格式為yyyy-mm-dd的日期，如：2014-01-25 */

js計算當前日期上一個月和下一個月

pre 日期下一個測試 -s digg rem bind popu /** * 獲取上一個月 * * @date 格式為yyyy-mm-dd的日期，如：2014-01-25 */ functi

JS 如何獲取當前上一個月、下一個月和月份所含天數

RM javascrip AD 設置 inpu arr ear div chan 在數據報表查詢中，經常需要設置查詢的日期區間，如查詢2018-02-01至2018-02-28的整月數據，這時需要提供快捷整月查詢按鈕：如：一般日期年月日之間由“-”或者“/”等符合分

JavaScript 一個文字跑馬燈程式碼實現可以設定文字內容、左右滾動方向、文字大小和顏色、滾動速度

JavaScript 一個文字跑馬燈程式碼實現，可以設定文字內容、左右滾動方向、文字大小及顏色、滾動速度，暫停和繼續播放。這是一個比較簡單，甚至完全可以用css實現，其實就是滿足小朋友興趣愛好寫的這麼一個demo。看似簡單，其實這裡還是有些實現細節需要注意，所以就跟大家分享下。 1、頁面

題目：在一個二維陣列中，每一行都按照從左到右遞增的順序排序，每一列都按照從上到下遞增的順序排序。請完成一個函式，輸入這樣的一個二維陣列和一個整數，判斷陣列中是否含有該整數。(Python實現)

''' 題目：在一個二維陣列中，每一行都按照從左到右遞增的順序排序，每一列都按照從上到下遞增的順序排序。請完成一個函式，輸入這樣的一個二維陣列和一個整數，判斷陣列中是否含有該整數。 ''' '''

java實現一個二維陣列,每一行從左到右遞增,每一列從上到下遞增,輸入一個二維陣列和一個整數,判斷陣列中是否有該整數

/** * 給定二維陣列,尋找key值 */public class FindKey { public static boolean findKey(int[][] arr,int key) { if (arr == null) {

JS實現回車鍵切換到下一個輸入框

進入正題之前，首先說明一下這裡的情況。因為我的input輸入框全部都是使用JS程式碼動態生成的，也就是說我在頁面裡面點選一次按鈕就會生成幾個輸入框。所以我使用了JQuery的$("#id").on("keydown","input",function()特性來實現捕捉總輸

JQuery intro.js 網頁引導外掛關於在百度瀏覽器上無法使用鍵盤切換下一個步驟的問題解決

網頁中基本都有很多的網頁引導動畫,找了一些jquery的外掛,最終選擇了intro.js,官網在這裡:intro.js官網發現這個外掛整合簡單,配置也很方便,但發現v9.0的版本中,百度瀏覽器

jquery點擊li標簽之後在該li標簽上添加一個class，點擊下一個li時刪除上一個li的class

style 下一個 div mov 元素使用 font rem pre 思路：點擊當前li元素後是用removeClass()刪除所有兄弟元素（使用siblings()獲取）的class樣式，然後使用addClass()為當前li添加class 具體演示如下： 1、HTM

自寫：js輪播圖鼠標劃過下方按鈕，繼續下一個

就會定時器 pac color lis hover 路線 css 輪播圖自寫：js輪播圖鼠標劃過下方按鈕，繼續下一個定時器關閉後再開啟一般都會按照原來的路線繼續走，不會因為你點了3而下個就會是4 $(".focus-rad>ul>li").hover(

每天一個JS 小demo之自定義滾動條。主要知識點：事件應用

prevent 數據滾動 sca listener 視頻希望特效 poi <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>D

手機影音第七天視頻的播放下一個視頻功能實現，視頻進度、電量變化的實現

播放器頁面電量變化視頻進度變化播放上一個、下一個與序列化實體類等功能實現先看下效果圖：在這裏，視頻進度條會根據視頻播放變化，下方的按鈕中，播放下一個，上一個都已實現。代碼已經托管到碼雲上，想下載看的小夥伴可以從下方地址中獲取 https://git.oschina.net/j

php實現點擊文字提交表單並傳遞數據至下一個頁面

asc div echo data -- 提交表單 blog 類型使用 <?php $id="4";//等會要把這個數據傳到第二個頁面 ?> <?php echo "<li>";

如何獲取sqlserver 序列下一個值（本文在網絡上找的）

art 直接 for esc seq io操作 rom upload 最小值使用SQL創建序列對象： IF EXISTS(SELECT * FROM sys.sequences WHERE name = N‘TestSeq‘) DRO

js上一個下一個左右滾動實現

相關推薦