当然可以的,如果你自己写不来的话,你可以使用第三方控件 例如 http://www.owlgraphic.com/owlcarousel/ 就可以实现你要的效果!

你可以设置他循环操作,这样就可以了!

正好写了一个，你可以看看。简单js,css实现无限列表循环

完全可以，解决方案有很多。我用的方式是参考什么值得买的首页轮播图，把列表最后一项复制一份放到添加到列表头，把列表真正的第一项复制一份放在列表尾。最终列表如下：

[G, A, B, C, D, E, F, G, A]

整个列表放在一个容器里排成一行，通过transform容器的left滑动，到滑动到最后一个时候，出现的是队尾的A，此时立即把left切换到真正的A的位置，继续滑动就会出现B了，反向同理。

// slider 的构造函数。接受一个对象参数，属性包括：
// [containerID]
// [width]
// [height]
// [time]
// [showDot]
// [autoPlay]
// [duration]
function IuiSlider(sliderProps) {
    // 获得对象属性
    var containerID = sliderProps.containerID;
    var width = sliderProps.width;
    var height = sliderProps.height;
    var time = (sliderProps.time) ? sliderProps.time : 400;
    var showDot = (sliderProps.showDot) ? sliderProps.showDot : 0;
    var autoPlay = (sliderProps.autoPlay) ? sliderProps.autoPlay : 0;
    var duration = (sliderProps.duration) ? sliderProps.duration : 3000;
    var _this = this;
    var i = 0;

    // 获取最初节点
    var container = document.querySelector("#" + containerID);
    var slider = container.querySelector(".iuiSlider");
    var solidCount = slider.childElementCount;

    container.style.cssText = "width:" + width + "px;height:" + height + "px;";

    // this.getSliderParameters = function() {
    //     return sliderParameters = {
    //         "containerID" : sliderProps.containerID,
    //         "width" : sliderProps.width,
    //         "height" : sliderProps.height,
    //         "count" : solidCount,
    //         "sliderItem" : sliderItem,
    //         "sliderArrows" : sliderArrow,
    //     };
    // }

    if(solidCount > 1) {
        var allCount = solidCount + 2;
        var currSliderIndex = 0;
        var nextSliderIndex = 1;
        cloneTheFirstAndLastSliderItem();
        createSliderArrow();
        if(showDot) {
            createSliderDot();
            var sliderDot = container.querySelector(".iuiSliderDot");
            var sliderDotItem = sliderDot.querySelectorAll(".iuiSliderDotItem");
            var sliderDotItemA = sliderDot.querySelectorAll(".iuiSliderDotItemA");
        }
        var sliderItem = slider.querySelectorAll(".iuiSliderItem");
        var sliderArrow = container.querySelectorAll(".iuiSliderArrow");
        var sliderArrowPrev = container.querySelector(".iuiSliderArrowPrev");
        var sliderArrowNext = container.querySelector(".iuiSliderArrowNext");
        setSliderStyle();

        var playSetTimeoutID;
        var sliderPos = -1;
        var animating = 0;

        this.getCurrSliderIndex = function() {
            var text = slider.style.getPrefixedProperty("transform");
            var pattern = /[0-9]+/;
            var match = pattern.exec(text)[0];
            var intValue = parseInt(match) / width - 1;
            return intValue;
        }

        container.addEventListener("mouseenter", function() {
            sliderArrowPrev.style.visibility = "visible";
            sliderArrowNext.style.visibility = "visible";
        });

        container.addEventListener("mouseleave", function() {
            sliderArrowPrev.style.visibility = "hidden";
            sliderArrowNext.style.visibility = "hidden";
        });

        sliderArrowNext.addEventListener("click", function(ev){
            ev.preventDefault();
            if(animating == 0) {
                nextSliderIndex = currSliderIndex + 1;
                animate();
            }
        });

        sliderArrowPrev.addEventListener("click", function(ev){
            ev.preventDefault();
            if(animating == 0) {
                nextSliderIndex = currSliderIndex - 1;
                animate();
            }
        });

        if(showDot) {
            for(i = 0; i < solidCount; i++) {
                sliderDotItem[i].addEventListener("click", function(ev) {
                    ev.preventDefault();
                    if(animating == 0) {
                        nextSliderIndex = this.getAttribute("data-slider-dot-index");
                        animate();
                    }
                });
            }
        }

        if(autoPlay) {
            play();
        }

        function play() {
            playSetTimeoutID = setTimeout(function(){
                nextSliderIndex = currSliderIndex + 1;
                animate();
            }, duration);
        }

        function animate() {
            clearTimeout(playSetTimeoutID);
            animating = 1;
            slider.style.setProperty("transition", "transform " + time + "ms ease");
            slider.style.setPrefixedProperty("transform", "translateX(" + (-1 - nextSliderIndex) * width + "px)");
            if(showDot) {
                sliderDotItemA[currSliderIndex].className = "iuiSliderDotItemA";
            }
            setTimeout(function(){
                slider.style.removeProperty("transition");
                animating = 0;
                currSliderIndex = _this.getCurrSliderIndex();
                if(currSliderIndex >= solidCount) {
                    currSliderIndex = 0;
                    slider.style.setPrefixedProperty("transform", "translateX(" + (0 - width) + "px)");
                } else if(currSliderIndex < 0) {
                    currSliderIndex = solidCount - 1;
                    slider.style.setPrefixedProperty("transform", "translateX(" + (0 - solidCount) * width + "px)");
                }
                if(showDot) {
                    sliderDotItemA[currSliderIndex].className += " iuiSliderDotActive";
                }
                if(autoPlay) {
                    play();
                }
            }, time);
        }

    }

    function setSliderStyle() {
        slider.style.cssText = "width:" + allCount * width + "px;height:" + height + "px;transform:translateX(" + (0 - width) + "px);-ms-transform:translateX(" + (0 - width) + "px);";

        for(i = 0; i < allCount; i++) {
            sliderItem[i].style.cssText = "width:" + width + "px;height:" + height + "px;";
        }

        var arrowSize = height * 0.12;
        if(arrowSize < 24) {
            arrowSize = 24;
        } else if(arrowSize > 32) {
            arrowSize = 32;
        }
        sliderArrow[0].style.cssText = "width:" + arrowSize + "px;height:" + arrowSize + "px;line-height:" + arrowSize + "px;";
        sliderArrow[1].style.cssText = "width:" + arrowSize + "px;height:" + arrowSize + "px;line-height:" + arrowSize + "px;";

        if(showDot) {
            var dotSize = (height < 150) ? 6 : 8;
            var dotBottom = (height < 150) ? 0 : 10;
            sliderDot.style.cssText = "width:" + width + "px;bottom:" + dotBottom + "px;";
            for(i = 0; i < solidCount; i++) {
                sliderDot.querySelectorAll(".iuiSliderDotItemA")[i].style.cssText = "width:" + dotSize + "px;height:" + dotSize + "px;";
            }
        }
    }

    function cloneTheFirstAndLastSliderItem() {
        var firstClonedSliderItem = slider.lastElementChild.cloneNode(true);
        var lastClonedSliderItem = slider.firstElementChild.cloneNode(true);
        slider.insertBefore(firstClonedSliderItem, slider.firstElementChild);
        slider.appendChild(lastClonedSliderItem);
    }

    function createSliderArrow() {
        var arrowAPrev = document.createElement("a");
        var arrowANext = document.createElement("a");
        var arrowSpanNodePrev = document.createElement("span");
        var arrowSpanNodeNext = document.createElement("span");
        var arrowTextNodePrev = document.createTextNode("<");
        var arrowTextNodeNext = document.createTextNode(">");
        arrowSpanNodePrev.appendChild(arrowTextNodePrev);
        arrowSpanNodeNext.appendChild(arrowTextNodeNext);
        arrowAPrev.appendChild(arrowSpanNodePrev);
        arrowANext.appendChild(arrowSpanNodeNext);
        arrowAPrev.className += " iuiSliderArrow";
        arrowAPrev.className += " iuiSliderArrowPrev";
        arrowANext.className += " iuiSliderArrow";
        arrowANext.className += " iuiSliderArrowNext";
        container.appendChild(arrowAPrev);
        container.appendChild(arrowANext);
    }

    function createSliderDot() {
        dot = document.createElement("ul");
        var dotItem = new Array(solidCount);
        var dotItemANode = new Array(solidCount);
        for(i = 0; i < solidCount; i++) {
            dotItem[i] = document.createElement("li");
            dotItemANode[i] = document.createElement("a");
            dotItem[i].appendChild(dotItemANode[i]);
            dot.appendChild(dotItem[i]);
            dotItemANode[i].className = "iuiSliderDotItemA";
            dotItemANode[0].className += " iuiSliderDotActive";
            dotItem[i].className = "iuiSliderDotItem";
            dotItem[i].setAttribute("data-slider-dot-index", i);
        }
        container.appendChild(dot);
        dot.className += " iuiSliderDot";
    }
}