『壹』 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的插件了