之前有写过淡入淡出的幻灯片《详解jq幻灯片原理及制作方法》，现在写一个左右滚动式幻灯片，虽然web幻灯片功能的代码在网上一抓一大把，但网上很多的都是通过插件封装而来，动不动就几千行代码，一两百kb大小，占用资源不说，对于修改来说也异常困难和麻烦。所以这东西还得自己掌握比较好，自己爱怎么写就怎么写，我让它怎么滚动就怎么滚动，我让它向东它绝不会向西。

如果自己一字一句写出来的话，你会发现幻灯片代码并不用太多，无非就是有这么几个功能：

1.有个定时器让它不断的改变margin或left值；

2.有个轮播焦点，图片移动到第n张，第n个焦点就点亮，点击第n个焦点，滚动到第n张图片；

3.有个左右箭头，点击左它就向左滚动一张，点击右它就向右滚动一张；

4.鼠标移入移出效果，鼠标移上去，幻灯片暂停，鼠标移出，幻灯片继续轮播；

有了这几个思路，我们就开始动手写了，首先是html布局：

<div class="container">
    <!--图片容器-->
    <ul id="slide">
        <li><img src='20151010ivfthh.jpg' alt=''/></li>
        <li><img src='20151010dlezyn.jpg' alt=''/></li>
        <li><img src='20151010riudvj.jpg' alt=''/></li>
    </ul>
    <!--焦点-->
    <ul id="qiuye_index"></ul>
</div>
<!--左右按钮-->
<div id="prenext"><span class="nex">下一个</span><span class="pre">上一个</span></div>

css样式见参考：

*{ margin: 0; padding: 0; list-style:none;}
    .container {
    width: 100%;
    overflow: hidden;
    position: relative;
}
#slide {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}
#slide li {
    float: left;
    overflow: hidden;
    max-width: 100%;
}
#slide li{
    min-height:200px;
}
#slide li img {
    width: 100%;
    display: block
}
#qiuye_index {
    position: absolute;
    bottom: 8px;
    left: 50%;
    margin-left: -45px;
}
#qiuye_index li {
    width: 20px;
    height: 20px;
    float: left;
    background: #ccc;
    margin: 5px;
}
#qiuye_index li.on {
    background:#6824B3;
}
#prenext {
    margin: 0 auto;
    position: relative;
}
#prenext .pre,#prenext .nex {
    display: block;
    background: black;
    position:absolute;
    height: 50px;
    line-height: 50px;
    color: #fff;
    width:80px;
    text-align: center;
}
#prenext .pre {left: 50px; }
#prenext .nex {right: 50px;}
#qiuye_index li, #prenext .pre, #prenext .nex {
    cursor: pointer;
}

幻灯片jq核心代码：

$(function(){
    var $container = $('.container');
    var $slide = $('#slide');
    var slideTime = 4000;
    $('li img', $slide)
    .eq(0)
    .on('load', function () {
        var html=$('#slide').html(), liw;
        $slide.append(html);
        var length = $('>li', $slide).length;
        for(var i=0;i<length/2;i++){
            $('<li></li>').appendTo($('#qiuye_index'));
        }
        //响应式设计（设置样式）
        function qiuye_resize() {
            liw = document.body.clientWidth || document.documentElement.clientWidth;
            $('>li', $slide).width(liw);
            $slide.width(liw * length);
            var h=$('>li', $slide).height();
            $container.height(h);
            $('#prenext').css('margin-top',(-h/2-$('#prenext .nex').height()/2)+'px')
        }
        //初始化var i = 0;
        qiuye_resize();
        window.onresize = function() {
            qiuye_resize();qiuye_bo();
        }
        //轮播主函数
        function qiuye_bo() {
            if (i >= length) {
                $slide.css('left',(-liw*length/2+liw)+'px');
                i = length/2;
            }
            else if(i < 0){
                $slide.css('left',(-liw*length/2)+'px');
                i=length/2-1;
            }
            $slide.stop().animate({'left': -liw * i});
            $('#qiuye_index li').eq(i<length/2?i:i-length/2).addClass('on').siblings().removeClass('on');
            i++;
        }
        qiuye_bo();
        var qiuye_indexnterval = setInterval(qiuye_bo, slideTime);//设置定时器开始轮播//焦点点击事件
        $('#qiuye_index li').click(function() {
            clearInterval(qiuye_indexnterval);
            i = $(this).index();
            qiuye_bo();
            qiuye_indexnterval = setInterval(qiuye_bo, slideTime);
        });
        //下一张按钮事件
        $('#prenext .nex').click(function() {
            clearInterval(qiuye_indexnterval);
            qiuye_bo();
            qiuye_indexnterval = setInterval(qiuye_bo, slideTime);
        });
        //上一张按钮事件
        $('#prenext .pre').click(function() {
            clearInterval(qiuye_indexnterval);
            i -= 2;
            qiuye_bo();qiuye_indexnterval = setInterval(qiuye_bo, slideTime);
        });
        //鼠标移入移出事件
        $slide.mouseover(function() {
            clearInterval(qiuye_indexnterval);
        });
        $slide.mouseout(function() {
            qiuye_indexnterval = setInterval(qiuye_bo, slideTime);
        });
    });
});

特别特点：

1.RT 2.响应式 3.宽屏 4.无缝 5.滚动式 其他功能 1.焦点点击 2.hover 3.前进后退点击按钮

效果如下：