如果让图片从左向右滚动

在一个界面上，排一列图片，然后如何让图片自动从左向右滚动？求大神指点！

解决方案 »

  1.   

    您好，是从左向右，所以是向右哦css3  jq 都可以实现   控制 外边距 或者 right 负数 都可以啊 加个过渡缓冲就行了
      

  2.   

    轮播图吗，这里有个从右到左的<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
    *{
    margin:0;
    padding:0;
    }
    #div1{
    width: 500px;
    height: 100px;
    margin:50px auto;
    border:1px solid grey;
    position: relative;
    overflow: hidden;
    }
    #div1 #ul1{
    height: 100px;
    position: relative;
    }
    #div1 #ul1 li{
    width:80px;
    height: 80px;
    border:3px double black;
    float: left;
    margin:7px;
    list-style: none;
    }
    #div1 #ul1 li img{
    width:100%;
    height: 100%;
    }
    </style>
    <!-- <script src='../../tools.js'></script> -->
    <script>
    function $(id){
    return document.getElementById(id);
    }
    function startMove(node,jsonObj, complete){//完美运动框架
    clearInterval(node.timer);
    node.timer = setInterval(function(){
    var isEnd = true;
    for(var attr in jsonObj){
    var iTarget = jsonObj[attr];
    var iCur = null;
    if(attr == "opacity"){
    iCur = parseInt(parseFloat(getStyle(node, attr)) * 100);
    }else{
    iCur = parseInt(getStyle(node, attr));
    }
    var speed = (iTarget - iCur) / 8;
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    if(attr == "opacity"){
    iCur += speed;
    node.style.opacity = iCur / 100;
    node.style[attr] = `alpha(opacity=$(iCur))`;
    }else{
    node.style[attr] = iCur + speed + 'px';
    }
    if(iCur != iTarget){
    isEnd = false;
    }
    }
    if(isEnd){
    clearInterval(node.timer);
    if(complete){
    complete.call(node);
    }
    }
    },30)
    }
    function getStyle(node, cssStyle){//兼容获取class中的样式
    if(node.currentStyle){
    return node.currentStyle[cssStyle];
    }else{
    return getComputedStyle(node)[cssStyle];
    }
    }
    window.onload = function(){
    var lis = $("ul1").getElementsByTagName('li');
    for(var i = 0; i < lis.length; i++){
    var oImg = document.createElement('img');
    oImg.src = `../images/${i + 1}.jpg`;
    lis[i].appendChild(oImg);
    }
    $("ul1").innerHTML += $("ul1").innerHTML;
    $("ul1").style.width = $("ul1").offsetWidth * 2 + 'px'; /*setInterval(function(){
    if($("ul1").offsetLeft <= - $("ul1").offsetWidth / 2){
    $("ul1").style.left = 0;
    }
    var speed = 5;
    $("ul1").style.left = $("ul1").offsetLeft - speed + 'px';
    },30)*/
    /*setInterval(function(){
    if($("ul1").offsetLeft <= - $("ul1").offsetWidth / 2){
    $("ul1").style.left = 0;
    }
    var speed = $("ul1").getElementsByTagName('li')[0].offsetWidth + 14;
    $("ul1").style.left = $("ul1").offsetLeft - speed + 'px';
    },2000)*/
    setInterval(function(){
    startMove($("ul1"), {
    left: $("ul1").offsetLeft - $("ul1").getElementsByTagName('li')[0].offsetWidth - 14
    },function(){
    if($("ul1").offsetLeft <= - $("ul1").offsetWidth / 2){
    $("ul1").style.left = 0;
    }
    })
    },2000) }
    </script>
    </head>
    <body>
    <div id="div1">
    <ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    </div>
    </body>
    </html>