『壹』 js无缝轮播图的代码问题
将内容拼接起来
『贰』 求告知JS怎么做轮播图啊，我只做出了无缝动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
*{
padding:0;margin:0;
}
div{
width: 1172px;
height: 447px;
border: 1px solid black;
position: relative;
top:20px;
left: 96px;
overflow: hidden;
}
.ul1{
position: absolute;
width: 1172px;
height: 447px;
}
.ul2{
position: relative;
left: 500px;
top: 410px;
}
.ul2 li{
list-style: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: white;
float: left;
margin-left: 5px;
cursor: pointer;
}
#active{
background: #f0f;
}
.ul1 li{
list-style: none;
float: left;
width: 500px;
height: 450px;
}
.li1{
background: url(img/1.jpg);
}
.li2{
background: url(img/2.jpg);
}
.li3{
background: url(img/3.jpg);
}
.li4{
background: url(img/4.jpg);
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementsByTagName('div')[0];
var oUl1=oDiv.getElementsByClassName('ul1')[0];
var aLi1=oUl1.getElementsByTagName('li');
var oUl2=oDiv.getElementsByClassName('ul2')[0];
var aLi2=oUl2.getElementsByTagName('li');
var timer=null;
var run=-aLi1[0].offsetWidth;
var iNow=-1;
//增加ul宽度
oUl1.style.width=aLi1[0].offsetWidth*aLi1.length+'px';
//双层循环选项卡
for (var a = 0; a< aLi1.length; a++) {
aLi2[a].index=a;
aLi2[a].onmouseover=function(){
for (var j = 0; j<aLi2.length; j++) {
aLi2[j].index=j;
aLi2[j].id='';
iNow=this.index;
};
this.id='active';
clearInterval(timer);
oUl1.style.left=this.index*run+'px';
}
aLi2[a].onmouseout=function(){
timer=setInterval(fun,1000);
}
};
//开启计时器 启动让图片跟下边的li轮播
timer=setInterval(fun,1000);
fun();
function fun(){
if(iNow==aLi1.length-1){
iNow=0;
}else{
iNow++;
}
oUl1.style.left=iNow*run+'px';
for (var i = 0; i < aLi2.length; i++) {
aLi2[i].index=i;
aLi2[i].id='';
};
aLi2[iNow].id='active';
}
}
</script>
</head>
<body>
<div>
<ul class="ul1">
<li class="li1"></li>
<li class="li2"></li>
<li class="li3"></li>
<li class="li4"></li>
</ul>
<ul class="ul2">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
样式根据自己的需要调一下，你需增加焦点绑定和清除定时器，你自学？
『叁』 JS轮播中 无缝滚动和淡入淡出有什么区别
对于淡入淡出式
1.首先是个外围部分（其实也就是最外边的整体wrapper)
2.接着就是你专设置图片轮播属的地方（也就是一个banner吧）
3.然后是一个图片组（可以用新的div 也可以直接使用 ul-->li形式）
4.然后是一个透明背景层，放在图片底部
5.然后是一个图片描述info层，放在透明背景层的左下角（div 或 ul-->li)
6.然后是一个按钮层，用来定位图片组的index吧,放在透明背景层的右下角(div 或 ul-->li)
7.当然了，有些时候还在图片两
『肆』 swiper.js怎样无缝轮播
swiper.js
不是本身就是无缝轮播的吗。
我的回写法：答
varmySwiper=newSwiper('.swiper-container',{
loop:true,
autoplay:5000,
pagination:'.swiper-pagination',
paginationClickable:true,
preventClicks:false,
noSwiping:true,
effect:'flip',
});
『伍』 js中无缝滚动轮播图有多少种做法
还有就是用原生js模仿jQuery写一个动画函数，最简单版的就是：
var timer = null;
function ani(ele,target) {
clearInterval(ele.timer);
ele.timer = setInterval(function() {
var step = (target - ele.offsetLeft)/10;
step = step>0?Math.ceil(step):Math.floor(step);
ele.style.left = ele.offsetLeft + step + "px";
console.log(1);
if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},30);
}
利用动画实现图片位置的移动，也是放一个图片到前面。
第二个就是还是放一张图到前面，然后把带图片的li定位；用一个arr[{left:0},{left:"200px"},{left:"400px"},{left:"600px"}];这样的数组把值分别赋给li；要滚动的时候把arr的最后一项放到最前面，再依次赋值给li，加上过渡就是轮播了，当然直接跳的那一下把过渡关了才是无缝轮播。
『陆』 原型js的无缝轮播图包装怎么让他真的停下来
轮播图的原理是通过setInterval定时执行函数来控制图片轮播，停下来可以使用clearInterval清除定时器。
『柒』 js图片无缝滚动的原理是什么
不断减少图片距离外面容器的间距，然后在间距为0的刹那将图片重新回到初始位置。为了版不至于看出权破绽，滚动图片要弄双份儿，比如你需要滚动的是AB，那么在容器里放的就是ABAB。那个外面的容器还要设置大小，然后将超出的内容隐藏。
这是我当年自己分析某人的JS图片滚动代码时总结的。
现在嘛都直接整jquery的插件了