知识要点
1. 实现无限循环的原理:
以偏移的距离来判断是否跳回第一张和最后一张
也可以利用循环判断图片的当前索引值
html 代码
- var newLeft=parseInt(list.style.left)+offset;// 当前的偏移量 + 下一次的偏移量 = 新的偏移量
- list.style.left=newLeft+"px";// 当前的偏移值 = 新的偏移值
- // 以偏移的距离来判断是否跳回第一张和最后一张
- if(newLeft>-600){
- list.style.left=-3000+"px";
- }
- if (newLeft<-3000){
- list.style.left=-600+"px";
- }
2. 当前图片轮播的圆点变色显示:
因为每次点击 index+1 所以当前的 index-1 就是 button 的索引
html 代码
- // 添加 on 前先清空 on
- for(var i=0;i<buttons.length;i++){
- if(buttons[i].className=="on"){
- buttons[i].className="";
- break;
- }
- }
- buttons[index-1].className="on";
3. 实现动画滚动效果:
原理就是把每次的偏移量分为多次完成比如一次 600px 那就分为 10 次每次偏移 60px
就要用到 setTimeout(go,10);//10 毫秒再次调用 go 函数, 一直到不满足条件就停
html 代码
- var newLeft=parseInt(list.style.left)+offset;// 当前的偏移量 + 下一次的偏移量 = 新的偏移量
- var time=300;// 位移总时间
- var interval=10;// 位移间隔时间
- // 动画效果自定义公式: 每次位移的距离 = 单次偏移距离 / 位移次数
- var speed=offset/(time/interval);
- // 递归函数 直到不满足条件 (跳到辅助图)
- // 递归就是把 600 偏移量分为多次完成偏移
- function go(){
- //speed<0 并且 当前偏移量 > 下一次偏移量 就是向左偏移 || 反之向右偏移
- if ((speed<0 &&parseInt(list.style.left)>newLeft) || (speed>0 &&parseInt(list.style.left)<newLeft)) {
- list.style.left=parseInt(list.style.left)+speed+"px";// 每次位移的值
- setTimeout(go,interval);//10 毫秒再次调用 go 函数
- }else{
- animated=false;
- list.style.left=newLeft+"px";// 当前的偏移值 = 新的偏移值
- if(newLeft>-600){
- list.style.left=-3000+"px";
- }
- if (newLeft<-3000){
- list.style.left=-600+"px";
- }
- }
- }
4. 点击圆点按钮执行动画:
原理获取当前的按钮位置再获取要点击的按钮的位置
用 (点击的 -- 当前的)*-600 = 需要跳转的正负距离 (向左或向右)
html 代码
- for(var i=0;i<buttons.length;i++){
- buttons[i].onclick=function(){
- if(this.className=="on"){
- return;
- }
- // 要点击的 index 属性的值 转换为整数
- var myIndex=parseInt(this.getAttribute("index"));
- // 偏移量 =-600*(要点击的位置 - 当前所在的位置), 当前的位置就是 index 循环所得
- var os=-600*(myIndex-index);
- // 切换完成后, 把点击的 index 位置变成当前的 index 位置
- index=myIndex;
- showButton();
- if(!animated){
- animate(os);
- }
- }
- }
5. 自动播放:
给外层容器加个 onmouseover 事件再调用 setInterval 方法
html 代码
- // 给方法定义全局变量是因为停止的时候要使用
- function play(){
- timer=setInterval(function(){
- next.onclick();
- },3000);
- }
- clearInterval(timer)
完整代码
注: 图片链接本地替换一下
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>demo</title>
- <style>
- body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
- h1,h2,h3,h4,h5,h6{font-size:100%;}
- address,cite,dfn,em,var{font-style:normal;}
- code,kbd,pre,samp{font-family:courier new,courier,monospace;}
- ul,ol{list-style:none;}
- a{text-decoration:none;}
- a:hover{text-decoration:none;}
- sup{vertical-align:text-top;}
- sub{vertical-align:text-bottom;}
- legend{color:#000;}
- fieldset,img{border:0;}
- button,input,select,textarea{font-size:100%;}
- table{border-collapse:collapse;border-spacing:0;}
- .clear{clear: both;float: none;height: 0;overflow: hidden;}
- #container{width: 600px; height: 400px; overflow: hidden; position: relative; }
- #list{width: 4200px; height: 400px; position: absolute; z-index: 1;}
- #list img{float: left;}
- #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
- #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
- #buttons .on { background: orangered;}
- .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
- .arrow:hover { background-color: RGBA(0,0,0,.7);}
- #container:hover .arrow { display: block;}
- #prev { left: 20px;}
- #next { right: 20px;}
- </style>
- </head>
- <body>
- <div id="container">
- <div id="list" style="left: -600px;">
- <img src="images/5.jpg" alt="5"/>
- <img src="images/1.jpg" alt="1"/>
- <img src="images/2.jpg" alt="2"/>
- <img src="images/3.jpg" alt="3"/>
- <img src="images/4.jpg" alt="4"/>
- <img src="images/5.jpg" alt="5"/>
- <img src="images/1.jpg" alt="1"/>
- </div>
- <div id="buttons">
- <span index="1" class="on"></span>
- <span index="2"></span>
- <span index="3"></span>
- <span index="4"></span>
- <span index="5"></span>
- </div>
- <a href="javascript:;" id="prev" class="arrow"><</a>
- <a href="javascript:;" id="next" class="arrow">></a>
- </div>
- <script type="text/javascript">
- // 在页面加载完后立即执行多个函数方案.
- function addloadEvent(func){
- var oldonload=window.onload;
- if(typeof window.onload !="function"){
- window.onload=func;
- }
- else{
- window.onload=function(){
- if(oldonload){
- oldonload();
- }
- func();
- }
- }
- }
- // 在页面加载完后立即执行多个函数方案结束.
- addloadEvent(lbt);
- // 轮播图动画切换原理
- function lbt(){
- var container=document.getElementById("container");
- var prev=document.getElementById("prev");
- var next=document.getElementById("next");
- var list=document.getElementById("list");
- var buttons=document.getElementById("buttons").getElementsByTagName("span");
- var imgs=list.getElementsByTagName("img");
- var index=1;
- var animated=false;
- var timer;
- // 当前图片轮播的圆点变色显示, 原理: index 数值是跟随 list 滑动次数递增的, 第一次 index=1, 所以第一个 button 的索引值就是 0.
- //for 循环是添加 on 样式之前要清空之前的 on.
- function showButton(){
- for(var i=0;i<buttons.length;i++){
- if(buttons[i].className=="on"){
- buttons[i].className="";
- break;
- }
- }
- buttons[index-1].className="on";
- }
- // 圆点变色显示 结束.
- function animate(offset){
- animated=true;
- var newLeft=parseInt(list.style.left)+offset;// 当前的偏移量 + 下一次的偏移量 = 新的偏移量
- var time=300;// 位移总时间
- var interval=10;// 位移间隔时间
- // 动画效果自定义公式: 每次位移的距离 = 单次偏移距离 / 位移次数
- var speed=offset/(time/interval);
- // 递归函数 直到不满足条件 (跳到辅助图)
- // 递归就是把 600 偏移量分为多次完成偏移
- function go(){
- //speed<0 并且 当前偏移量 > 下一次偏移量 就是向左偏移 || 反之向右偏移
- if ((speed<0 &&parseInt(list.style.left)>newLeft) || (speed>0 &&parseInt(list.style.left)<newLeft)) {
- list.style.left=parseInt(list.style.left)+speed+"px";// 每次位移的值
- setTimeout(go,interval);//10 毫秒再次调用 go 函数
- }else{
- animated=false;
- list.style.left=newLeft+"px";// 当前的偏移值 = 新的偏移值
- if(newLeft>-600){
- list.style.left=-3000+"px";
- }
- if (newLeft<-3000){
- list.style.left=-600+"px";
- }
- }
- }
- go();
- }
- // 自动播放 3 秒执行一次 next.onclick
- function play(){
- timer=setInterval(function(){
- next.onclick();
- },3000);
- }
- function stop(){
- clearInterval(timer);
- }
- // 执行所有函数
- next.onclick=function(){
- if(index==5){
- index=1;
- }else{
- index+=1;
- }
- showButton();
- if(!animated){
- animate(-600);
- }
- }
- // 执行所有函数
- prev.onclick=function(){
- if(index==1){
- index=5;
- }else{
- index-=1;
- }
- showButton();
- if(!animated){
- animate(600);
- }
- }
- // 点击圆点按钮 偏移
- for(var i=0;i<buttons.length;i++){
- buttons[i].onclick=function(){
- if(this.className=="on"){
- return;
- }
- // 要点击的 index 属性的值 转换为整数
- var myIndex=parseInt(this.getAttribute("index"));
- // 偏移量 =-600*(要点击的位置 - 当前所在的位置), 当前的位置就是 index 循环所得
- var os=-600*(myIndex-index);
- // 切换完成后, 把点击的 index 位置变成当前的 index 位置
- index=myIndex;
- showButton();
- if(!animated){
- animate(os);
- }
- }
- }
- container.onmouseover=stop;
- container.onmouseout=play;
- play();
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/36841/3e286c6b6dfe795fd8131d13a755e099.html