之前说过JQ按钮淡入淡出的轮播图，今天我把左右移动的轮播图也发出来让大家看看。

如上图，这次分享的至是左右按钮和自动轮播图，如果需要有按钮的话可以参考https://www.acgxt.com/60.html进行修改

左右轮播和幻灯片轮播区别也不是很大，接下来我用代码展示。

HTML+CSS

<div class="container">
        <a href="javascript:move_btn(1);" id="move_left">←</a>
        <a href="javascript:move_btn(2);" id="move_right">→</a>
        <ul class="content">
            <li>
                <img src="images/1.jpg" alt=""/>
            </li>
            <li>
                <img src="images/2.jpg" alt=""/>
            </li>
            <li>
                <img src="images/3.png" alt=""/>
            </li>
            <li>
                <img src="images/4.jpg" alt=""/>
            </li>
        </ul>
    </div>

JQuery

```

<script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>
    var i = 0;//初始化当前移动下标
    var w = $(".content li").width();//获取单个图片li宽度
    var move = 0;//定义移动距离

    setInterval("start()",2000);//设置定时器,2s一次
    function start(){
        i++;//迭代并判断
        if(i>3)i=0;
        move = -w*i;//计算需要移动的距离
        $(".content").stop(true,false).animate({
            left:move//移动
        },500);
    }
    function move_btn(id){
        var b;//定义左右点击需要移动到的坐标
        //判断下一个移动位置并赋值给b
        if(id=="1"){
            switch(i) {
                case 0:b = 3;i = b;break;
                case 1:b = 0;i = b;break;
                case 2:b = 1;i = b;break;
                case 3:b = 2;i = b;break;
                default:alert("左按钮轮播失败！初始化中");b = 0;i = b;
            }
        }else if(id=="2"){
            switch(i) {
                case 0:b = 1;i = b;break;
                case 1:b = 2;i = b;break;
                case 2:b = 3;i = b;break;
                case 3:b = 0;i = b;break;
                default:alert("右按钮轮播失败！初始化中");b = 0;i = b;
            }
        }
        moveImg(b);//调用函数并传递下一个坐标
    }
    function moveImg(b){
        move = -w*b;//计算需要移动的距离
        $(".content").stop(true,false).animate({
            left:move//移动
        },500);
    }
</script>

```代码不多，希望大家能够深刻学会，如果以上代码搞不清楚什么情况的话，我留下了文件，大家可以下载参考

下载地址

【七空幻音】JQuery左右轮播图