这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了原生 js 实现无限循环轮播图效果的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
知识要点
1. 实现无限循环的原理:
以偏移的距离来判断是否跳回第一张和最后一张
也可以利用循环判断图片的当前索引值
- 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 的索引
- //添加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 函数,一直到不满足条件就停
- 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 = 需要跳转的正负距离(向左或向右)
- 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 方法
- //给方法定义全局变量是因为停止的时候要使用
- function play(){
- timer=setInterval(function(){
- next.onclick();
- },3000);
- }
- clearInterval(timer)
完整代码
注:图片链接本地替换一下
- <!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.phperz.com/article/17/0606/328304.html