比如说我的导航中有『A,B,C,D,E,F,G』等多项，我在向左滑动时，滑到G，可不可以不停，接着向左滑，滑出A，类似这种无限的轮转换，这种导航效果，用js和css，可能实现吗，我在网上找案例或者思路找了两天了，没有找到可用的或者类似这方面的资料及案例，小白一玫，希望过路大神指点一二。
在此谢过，以上。
黄舟2017-04-10 16:40:18
当然可以的,如果你自己写不来的话,你可以使用第三方控件 例如 http://www.owlgraphic.com/owlcarousel/ 就可以实现你要的效果!
你可以设置他循环操作,这样就可以了!
巴扎黑2017-04-10 16:40:18
完全可以，解决方案有很多。我用的方式是参考什么值得买的首页轮播图，把列表最后一项复制一份放到添加到列表头，把列表真正的第一项复制一份放在列表尾。最终列表如下：
[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";
}
}