JSFiddle - React, Tailwind, and code Playground

by camnpr

HTML

<div style="width:544px;height:132px;overflow:hidden;">
    <div id="scrollimg">
        <img src="http://www.baidu.com/img/bdlogo.gif" style="border:solid 1px green;" />
        <img src="http://www.baidu.com/img/bdlogo.gif" style="border:solid 1px yellow;" />
        <img src="http://www.baidu.com/img/bdlogo.gif" style="border:solid 1px blue;" />
        <img src="http://www.baidu.com/img/bdlogo.gif" style="border:solid 1px gray;" />
        <img src="http://www.baidu.com/img/bdlogo.gif" style="border:solid 1px black;" />
        <img src="http://www.baidu.com/img/bdlogo.gif" style="border:solid 1px pink;" />
        <img src="http://www.baidu.com/img/bdlogo.gif" style="border:solid 1px #984723;" />
        <img src="http://www.baidu.com/img/bdlogo.gif" style="border:solid 1px #452239;" />
        <img src="http://www.baidu.com/img/bdlogo.gif" style="border:solid 1px #234598" />
        <img src="http://www.baidu.com/img/bdlogo.gif" style="border:solid 1px #480398;" />
    </div>
</div>
<a href="javascript:void();" onclick="toLeft()">向左滚动&lt;--</a> &nbsp; <a href="javascript:toRight();">向右滚动--&gt;</a>

CSS

img{float:left;}

JavaScript

var number = 10, perWidth = 272, screenNumber=2;
var imgContainer = document.getElementById('scrollimg');

function toLeft(){
    var initMargin = imgContainer.getAttribute('style').replace('margin-left:', '').replace('px', '') || 0;
    initMargin -= perWidth*screenNumber;
    imgContainer.setAttribute('style', 'margin-left:'+initMargin+'px');
}

function toRight(){
    
}