第一种方式
在轮播图最后添加第一张，一张重复的图片。
点击前一张，到了第一张，将父级oList移动到最后一张（也就是添加的重复的第一张)，在进行后续动画。
点击下一张，到了最后一张（也就是添加的重复的第一张），将父级oList移动到第一张，在进行后续动画。
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/tween.js"></script>
</head>
<body>
<div class="banner">
<div class="main">
<a href="javascript:;" class="btnPre"> < </a>
<a href="javascript:;" class="btnNext"> > </a>
<ul class="list">
<li>
<img src="img/1.png">
</li>
<li>
<img src="img/2.png">
</li>
<li>
<img src="img/3.png">
</li>
<li>
<img src="img/4.png">
</li>
<li>
<img src="img/5.png">
</li>
<li>
<img src="img/1.png">
</li>
</ul>
<nav class="nav">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</nav>
</div>
</div>
</body>
</html>
HTML
CSS代码
body {
margin:0;
}
ul {
margin:0;
padding:0;
list-style: none;
}
img {
border:none;
vertical-align: top;
}
a {
text-decoration: none;
}
.banner {
margin:30px auto;
padding:135px 146px 202px 144px;
width: 420px;
background-image: url(../img/bg.png);
background-repeat: no-repeat;
}
.main {
position: relative;
height: 320px;
overflow: hidden;
}
.main>a {
position: absolute;
z-index: 2;
top:50%;
width: 49px;
height:63px;
font-size: 50px;
line-height: 63px;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,.3);
transform: translateY(-50%);
}
.banner .btnPre {
left:0;
}
.banner .btnNext {
right:0;
}
.nav {
position: absolute;
z-index: 2;
left: 0;
bottom: 18px;
width: 100%;
font-size: 0;
text-align: center;
}
.nav span {
display: inline-block;
vertical-align: bottom;
margin-right: 14px;
width: 10px;
height: 10px;
background-color: #fff;
cursor: pointer;
}
.nav span:last-child {
margin-right: 0;
}
.list {
width: 600%;
height: 320px;
margin-left: 0px;
}
.list li {
float: left;
width: 420px;
height: 320px;
}
.list li img {
width: 420px;
height: 320px;
}
CSS
JS代码
window.onload=function(){
(function(){
var aBtn=document.querySelectorAll('.main>a');
var oMain=document.querySelector('.main');
var oList=document.querySelector('.list');
var aLi=document.querySelectorAll('.list li');
var aSpan=document.querySelectorAll('.nav span');
var iLiW=css(aLi[0],'width');
var iCur= 0;
tab();
oMain.timer=setInterval(next,2000);
/*事件*/
oMain.onmouseover=function(){
clearInterval(oMain.timer);
}
oMain.onmouseout=function(){
oMain.timer=setInterval(next,2000);
}
for(var i=0;i<aSpan.length;i++){
(function(index){
aSpan[index].onmouseover=function(){
iCur=index;
tab();
}
})(i);
}
aBtn[0].onclick=function (){
if(iCur==0){
iCur=aLi.length-1;
css(oList,'margin-left',-iCur*iLiW);
}
iCur--;
tab();
};
aBtn[1].onclick=next;
/*下一张*/
function next(){
if(iCur==aLi.length-1){
iCur=0;
css(oList,'margin-left',-iCur*iLiW);
}
iCur++;
tab();
};
/*动画*/
function tab(){
startMove(oList, {'margin-left':-iCur*iLiW},500,'linear');
for(var i=0;i<aSpan.length;i++){
startMove(aSpan[i], {'height':10},500,'linear');
}
startMove(aSpan[iCur%aSpan.length], {'height':20},500,'linear');
}
})();
}
index.js
var Tween = {
linear: function (t, b, c, d){
return c*t/d + b;
},
easeIn: function(t, b, c, d){
return c*(t/=d)*t + b;
},
easeOut: function(t, b, c, d){
return -c *(t/=d)*(t-2) + b;
},
easeBoth: function(t, b, c, d){
if ((t/=d/2) < 1) {
return c/2*t*t + b;
}
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInStrong: function(t, b, c, d){
return c*(t/=d)*t*t*t + b;
},
easeOutStrong: function(t, b, c, d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeBothStrong: function(t, b, c, d){
if ((t/=d/2) < 1) {
return c/2*t*t*t*t + b;
}
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
elasticIn: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p/4;
} else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
elasticOut: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
elasticBoth: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d/2) == 2 ) {
return b+c;
}
if (!p) {
p = d*(0.3*1.5);
}
if ( !a || a < Math.abs(c) ) {
a = c;
var s = p/4;
}
else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
if (t < 1) {
return - 0.5*(a*Math.pow(2,10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
return a*Math.pow(2,-10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
},
backIn: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 1.70158;
}
return c*(t/=d)*t*((s+1)*t - s) + b;
},
backOut: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 2.70158; //回缩的距离
}
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
backBoth: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 1.70158;
}
if ((t /= d/2 ) < 1) {
return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
}
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
bounceIn: function(t, b, c, d){
return c - Tween['bounceOut'](d-t, 0, c, d) + b;
},
bounceOut: function(t, b, c, d){
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
}
return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
},
bounceBoth: function(t, b, c, d){
if (t < d/2) {
return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
}
return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
}
};
function css(el,attr,val){
if(arguments.length > 2){
if(attr == "opacity"){
el.style[attr] = val;
el.style.filter = "alpha(opacity = "+val*100+")";
} else {
el.style[attr] = val + "px";
}
} else {
return el.currentStyle?parseFloat(el.currentStyle[attr]):parseFloat(getComputedStyle(el)[attr]);
}
}
function startMove(el,target,time,type,callBack){
var t = 0;
var b = {};//初始值
var c = {};
var d = Math.ceil(time/20);
for(var s in target){
//console.log(s);
b[s] = css(el,s);
c[s] = target[s] - b[s];
}
clearInterval(el.timer);
el.timer = setInterval(function(){
if(t >= d){
clearInterval(el.timer);
callBack&&callBack();
} else {
t++;
for(var s in target){
var val = Tween[type](t,b[s],c[s],d);
css(el,s,val);
}
}
},20);
}
twen.js
第二种方式
只保留2张图位置。
点击上一张，aImg[0].src 为前一张的地址， aImg[1].src为当前张的地址，父级oList的margin-left为负的图片宽度，轮播图向右滑动。
点击下一张，aImg[0].src 为当前张的地址， aImg[1].src为下一张的地址，父级oList的margin-left为0，轮播图向左滑动。
注意：此种写法需要加一个变量isMove，判断当前是否有动画，如果有动画，不可以进行下一个动画。或者，将动画时间写小点，可以省略这个判断操作。
HTML代码和CSS代码基本与上面一致
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝-第二种思路</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/tween.js"></script>
</head>
<body>
<!--同时让下面的导航只会让两张图片变动-->
<div class="banner">
<div class="main">
<a href="javascript:;" class="btnPre"> < </a>
<a href="javascript:;" class="btnNext"> > </a>
<ul class="list">
<li>
<img src="img/1.png">
</li>
<li>
<img src="img/2.png">
</li>
</ul>
<nav class="nav">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</nav>
</div>
</div>
</body>
</html>
HTML
CSS代码
body {
margin:;
}
ul {
margin:;
padding:;
list-style: none;
}
img {
border:none;
vertical-align: top;
}
a {
text-decoration: none;
}
.banner {
margin:30px auto;
padding:135px 146px 202px 144px;
width: 420px;
background-image: url(../img/bg.png);
background-repeat: no-repeat;
}
.main {
position: relative;
height: 320px;
overflow: hidden;
}
.main>a {
position: absolute;
z-index:;
top:50%;
width: 49px;
height:63px;
font-size: 50px;
line-height: 63px;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,.3);
transform: translateY(-50%);
}
.banner .btnPre {
left:;
}
.banner .btnNext {
right:;
}
.nav {
position: absolute;
z-index:;
left:;
bottom: 18px;
width: 100%;
font-size:;
text-align: center;
}
.nav span {
display: inline-block;
vertical-align: bottom;
margin-right: 14px;
width: 10px;
height: 10px;
background-color: #fff;
cursor: pointer;
}
.nav span:last-child {
margin-right:;
}
.list {
width: 600%;
height: 320px;
margin-left: 0px;
}
.list li {
float: left;
width: 420px;
height: 320px;
}
.list li img {
width: 420px;
height: 320px;
}
CSS
window.onload=function(){
(function(){
var aBtn=document.querySelectorAll('.main>a');
var oMain=document.querySelector('.main');
var oList=document.querySelector('.list');
var aLi=document.querySelectorAll('.list li');
var aSpan=document.querySelectorAll('.nav span');
var aImg=document.querySelectorAll('.list img');
var iArrImgSrc=['img/1.png','img/2.png','img/3.png','img/4.png','img/5.png'];
var iLiW=css(aLi[0],'width');
var iCur= 0;
tab();
/*定时器*/
oMain.timer=setInterval(toNext,2000);
oMain.onmouseover=function(){
clearInterval(oMain.timer);
}
oMain.onmouseout=function(){
oMain.timer=setInterval(toNext,2000);
}
/*鼠标移入导航*/
for(var i=0;i<aSpan.length;i++){
(function(index){
aSpan[index].onmouseover=function(){
(index > iCur) && toNext(index);
(index < iCur) && toPre(index);
}
})(i);
}
/*前一张点击事件*/
aBtn[0].onclick =function(){
toPre();
};
/*后一张点击事件*/
aBtn[1].onclick=function(){
toNext();
};
var isMove=false;
/*前一张*/
function toPre(index) {
if(isMove){
return;
}
var pre=arguments.length==1?index:(iCur-1+aSpan.length)%aSpan.length;
aImg[0].src=iArrImgSrc[pre];
aImg[1].src=iArrImgSrc[iCur];
css(oList,'margin-left',-iLiW);
isMove = true;
startMove(oList, {'margin-left':0},500,'linear',function(){
isMove = false;
});
iCur=pre;
tab();
};
/*后一张*/
function toNext(index) {
if(isMove){
return;
}
var next=arguments.length==1?index:(iCur+1)%aSpan.length;
aImg[0].src=iArrImgSrc[iCur];
aImg[1].src=iArrImgSrc[next];
css(oList,'margin-left',0);
isMove = true;
startMove(oList, {'margin-left':-iLiW},500,'linear',function(){
isMove = false;
});
iCur=next;
tab();
};
/*下边导航运动*/
function tab(){
for(var i=0;i<aSpan.length;i++){
startMove(aSpan[i], {'height':10},500,'linear');
}
startMove(aSpan[iCur], {'height':20},500,'linear');
}
})();
}
index.js
tween.js封装的时间版动画函数与上面一致，这边不在重复添加。