首页 > 代码库 > 2017/3/8 无缝轮播心得(完整版)
2017/3/8 无缝轮播心得(完整版)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://www.mamicode.com/css/elementinit.css">
<style>
.wrap{
position:relative;
width:600px;
height:500px;
margin:20px auto;
overflow:hidden;
}
.photo{
position:absolute;
left:-600px;
width:9999px;
height:500px;
}
.photo img{
float:left;
width:600px;
height:500px;
}
.prev,.next{
width:38px;
height:78px;
position:absolute;
top:225px;
}
.prev{
background:url(img/indexNew-bg.png) 0 -51px no-repeat;
}
.next{
right:0;
background:url(img/indexNew-bg.png) -43px -51px no-repeat;
}
.btns{
position:absolute;
bottom:30px;
right:90px;
}
.btns li{
width:10px;
height:10px;
border:2px solid deepskyblue;
background:transparent;
border-radius:50%;
margin:10px;
float:left;
}
</style>
</head>
<body>
<div class="wrap">
<div class="photo">
<img src="http://www.mamicode.com/img/4.jpg" >
<img src="http://www.mamicode.com/img/1.jpg" >
<img src="http://www.mamicode.com/img/2.jpg" >
<img src="http://www.mamicode.com/img/3.jpg" >
<img src="http://www.mamicode.com/img/4.jpg" >
<img src="http://www.mamicode.com/img/1.jpg" >
</div>
<div class="prev"></div>
<div class="next"></div>
<ul class="btns">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
var photo = document.querySelector(‘.photo‘);
var prev = document.querySelector(‘.prev‘);
var next = document.querySelector(‘.next‘);
var btns = document.querySelectorAll(‘.btns li‘);
var index = 1 ;//图片的下标从1开始.而不是从零开始.`
var timer = null;
var bol = true;
btns[0].style.background = ‘orange‘;
next.onclick = function(){
clearInterval(timer);
//如果 bol 是false 返回(return)执行程序,否则就让 bol = false;
//总体的意思就是:当点击两下的时候让 bol = false; 阻止连续执行两下.()
//相当于是开关,如果是关闭的状态,就返回重新执行代码,否则的话,就让开关关闭(也就是bol=false),关闭的话就阻止了连续点击行为.
if(bol==false){
return;
}else{
bol = false;
}
//方便起见,这个邮件的代码和左键的一个效果只不过是下面那段简化而已.
index ++;
//这个 if 判断的代码要注意.图的轮播是4张图片,而布局确是6张,让 left = 0;让下标等于1,这就实现了无缝轮播(中间切换用函数,16毫秒进行切换)
if(index >4){
photo.style.left = ‘0px‘;
index = 1;//第一个图的下标是1,但是第一个图的left值是600.
}
for(var j = 0 ; j < btns.length; j ++){
btns[j].style.background = ‘transparent‘;
}
btns[index-1].style.background = ‘orange‘;//这里的[index-1]是同步num和index的.也就是在点击左键时候.btn切换能同步.
animate();//图片切换时候的函数.
autoPlay();//自动轮播
}
prev.onclick = function(){
clearInterval(timer);
if(!bol){
return;
}
bol = false;
index --;
//这个判断方式与图片的布局也有关系,如果布局不是这样就答案不到轮播的效果.
if(index < 1){
index = 4;
photo.style.left = ‘-3000px‘;
//这个-3000显示的是第六张(最后一张)图片,而不是所谓的img/4.jpg这张,
}
//通过循环遍历四个按钮.
for(var j = 0 ; j < btns.length; j ++){
btns[j].style.background = ‘transparent‘;
}
console.log(index)
btns[index-1].style.background = ‘orange‘;
animate();
autoPlay();
}
//下面的四个按钮
//底层点击的小按钮,外层循环添加下标,
for(var i = 0 ; i < btns.length; i ++){
btns[i].num = i;//这里的num相当于index
btns[i].onclick = function(){
clearInterval(timer);
if(!bol){
return;
}
bol = false;
for(var j = 0 ; j < btns.length; j ++){
btns[j].style.background = ‘transparent‘;
}
this.style.background = ‘orange‘;
index = this.num +1;
animate();
autoPlay();
}
}
// console.log(btns)
function animate(){
var start = photo.offsetLeft;
//console.log(start);
//起始位置,每次photo.offsetLeft;都不一样,轮播一个图片就变一次.
var end = index * -600; //结束位置
var change = end - start;//改变量
var startstep = 0;//开始步数
var endstep = 38;
//结束步数 //这个参数可以调节图片滑动的速度
var timer = setInterval(function(){
startstep ++;
if(startstep >=endstep){
clearInterval(timer);
bol = true;//这里的 bol = true 也会是打开开关!必须加,否则就左右点击按钮不能进行下一次点击.
}
//注意下边的操作要放到定时器里边
photo.style.left = start + change /endstep *startstep + ‘px‘; // 100 = 改变 + 不变 / 不变 * 改变
// 100 = 100 + 600 / 50 * 0
// 112 = 100 + 600 / 50 * 1
// 124 = 100 + 600 / 50 * 2
// 136 = 100 + 600 / 50 * 3
// 148 = 100 + 600 / 50 * 4
// 160 = 100 + 600 / 50 * 5
// change /endstep *startstep 从左到右一次运算.
// 该变量/总步数 * 改变步数 = (每步改变的量) * 改变的步数 = 该变量
},16);
//定时器的作用就是,16毫秒内完成50步的该变量.
}
function autoPlay(){
timer = setInterval(function(){
index ++;
if(index >4){
index = 1;
photo.style.left = ‘0px‘;
}
for(var j = 0 ; j < btns.length; j ++){
btns[j].style.background = ‘transparent‘;
}
btns[index-1].style.background = ‘orange‘;
animate();
//自动轮,调用animate();实现切换页面;
},2000)
}
autoPlay();
//console.log(timer)
</script>
</html>
2017/3/8 无缝轮播心得(完整版)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。