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

如上图，这次分享的至是左右按钮和自动轮播图，如果需要有按钮的话可以参考https://www.balrogsxt.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

<!--调用百度jq-->
    <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左右轮播图