基于JavaScript实现动画轮播效果
来源：互联网 发布：淘宝手机怎么网页版 编辑：程序博客网 时间：2024/06/01 10:16
这是之前做一个仿极客学院网站写的代码了，年代也比较久远。原本是使用jquery写的，后来被强制改回JavaScript...鬼知道我那时经历了什么。
当时在百度上快速学习了一下相关内容，再请教一下大神，糊里糊涂就弄出来了...
直接上代码（Carousel.js），页面布局代码在文末，因为实在太长：
var img_list = document.getElementById("carousel-box").getElementsByTagName("div")[0]; //获取图片列表容器var ori_imgs = img_list.getElementsByTagName("a"); //获取图片对象var spans = document.getElementById("carousel-box").getElementsByTagName("div")[1].getElementsByTagName("span"); //获取圆点var img_list_timer = null;//克隆首图片节点并添加到img_list节点后var clone1 = ori_imgs[0].cloneNode(true);img_list.appendChild(clone1);var clone5 = ori_imgs[4].cloneNode(true);var clone4 = ori_imgs[3].cloneNode(true);img_list.insertBefore(clone5, ori_imgs[0]);img_list.insertBefore(clone4, clone5);var btnsize = spans.length;var imgs = img_list.getElementsByTagName("img");var size = imgs.length;var viewWidth, base, pdis;var i = 3;setopc(i);var sf = 0;adjust();window.onresize = function() {adjust();} //这里的参数为了自适应调整了很久function adjust() {base = document.body.clientWidth*0.09;pdis = document.body.clientWidth*0.84;for (var j = 0; j < size; j++) {imgs[j].style.width = (document.body.clientWidth*0.84).toString() + "px";imgs[j].style.height = "450px";}var imgsWidth = document.body.clientWidth*0.84;img_list.style.width = (imgsWidth*(imgs.length+1)).toString() + "px";if (sf == 0) {img_list.style.left = (-(document.body.clientWidth*0.84)*3+document.body.clientWidth*0.08).toString() + "px";sf = 1;} else {img_list.style.left = (-i*pdis+base).toString() + "px";}}//向右轮播函数function moveR() {i++;if (i == size-1) {img_list.style.left = -1*pdis+base;i = 2;}if (img_list_timer != null)clearInterval(img_list_timer);var current_left = img_list.offsetLeft;var current_time = 0;img_list_timer = setInterval(function() {var delta = (current_left - ((-i*pdis)+base)) / 42;img_list.style.left = (img_list.offsetLeft - delta).toString() + "px";current_time += 1if(current_time >= 42){clearInterval(img_list_timer);}}, 1000 / 60);setopc(i);for(var k = 0;k < spans.length;k++) {if (k != i-2) {remove_class(spans[k], "on");} else {add_class(spans[k], "on");}}}function setopc(index) {for (var k = 0; k < size; k++) {if (k != index) imgs[k].style.opacity = 0.7;else imgs[k].style.opacity = 1;}}//鼠标滑过圆点for(var j = 0;j < spans.length;j++) {(function(arg) {spans[arg].onmouseover = function() {var real_i = arg + 2;setopc(real_i);i = real_i;if (img_list_timer != null)clearInterval(img_list_timer);var current_left = img_list.offsetLeft;var current_time = 0;img_list_timer = setInterval(function() {var delta = (current_left - ((-real_i*pdis)+base)) / 42;img_list.style.left = (img_list.offsetLeft - delta).toString() + "px";current_time += 1;if(current_time >= 42){clearInterval(img_list_timer);}}, 1000 / 60);for(var k = 0;k < spans.length;k++) {if (k != arg) {remove_class(spans[k], "on");} else {add_class(spans[k], "on");}}};})(j);}//定时自动轮播var t = setInterval(function() {moveR();}, 2000);//鼠标划过图片停止自动轮播var cbox = document.getElementById("carousel-box");cbox.onmouseover = function() {clearInterval(t);};cbox.onmouseout = function() {t = setInterval(function() {moveR();}, 2000);};function has_class(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));}function add_class(obj, cls) { if (!has_class(obj, cls)) obj.className += " " + cls;}function remove_class(obj, cls) { if (has_class(obj, cls)) { var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); obj.className = obj.className.replace(reg, ' '); }}下面是首页的HTML代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ML</title> <link rel="shortcut icon" href="img/logo/logo_red.png"> <link rel="stylesheet" href="css/HorizontalScrollstyle.css"> <link rel="stylesheet" href="css/public/myLayout.css"> <link rel="stylesheet" href="css/Carousel.css"> <link rel="stylesheet" href="css/public/header_footer.css"> <link rel="stylesheet" href="css/index.css"></head><body><header> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand"><img id="header-logo" src="img/logo/logo_white.png" alt="A"></a> </div> <div class="header-menu"> <ul class="nav navbar-nav"> <li><a href="#">实战</a></li> <li class="dropdown"> <a href="#">路径<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#" class="glyphicon glyphicon-fire"> 前端工程师</a></li> <li class="divider"></li> <li><a href="#" class="glyphicon glyphicon-phone"> Android工程师</a></li> <li class="divider"></li> <li><a href="#" class="glyphicon glyphicon-unchecked"> PHP工程师</a></li> <li class="divider"></li> <li><a href="#" class="glyphicon glyphicon-leaf"> Java工程师</a></li> <li class="divider"></li> <li><a href="#" class="glyphicon glyphicon-hdd"> Linux运维工程师</a></li> </ul> </li> <li><a href="#">猿问</a></li> <li class="dropdown"> <a href="#">极客社区<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#" class="glyphicon glyphicon-question-sign"> 技术问答</a></li> <li class="divider"></li> <li><a href="#" class="glyphicon glyphicon-globe"> Wiki</a></li> <li class="divider"></li> <li><a href="#" class="glyphicon glyphicon-comment"> 社群</a></li> <li class="divider"></li> <li><a href="#" class="glyphicon glyphicon-save"> 资源下载</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#" class="glyphicon glyphicon-phone"></a></li> <li><a href="login.html">登录</a></li> <li><a href="register.jsp">注册</a></li> </ul> <div class="nav navbar-nav navbar-right"> <form id="rearch-box" role="search"> <input type="text" placeholder="Search"> <button><span class="glyphicon glyphicon-search"></span></button> </form> </div> </div> </div> </nav></header><main class="main"> <!-- 轮播图 --> <div id="carousel-box"> <div id="img_list"> <a href="#"><img class="LunboImg" src="img/index/1.jpg" alt="1"/></a> <a href="#"><img class="LunboImg" src="img/index/2.jpg" alt="2"/></a> <a href="#"><img class="LunboImg" src="img/index/3.jpg" alt="3"/></a> <a href="#"><img class="LunboImg" src="img/index/4.jpg" alt="4"/></a> <a href="#"><img class="LunboImg" src="img/index/5.jpg" alt="5"/></a> </div> <div id="point"> <span></span> <span class="on"></span> <span></span> <span></span> <span></span> </div> </div> <!--课程滚条--> <div id="Horizontal"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-12 col-lg-12"> <div class="page-header"> <h2><span class="glyphicon glyphicon-signal"></span> 最新课程<a href="#" class="more_inf">更多 ></a></h2> </div> </div> </div> <div class="row" id="Horizontal-Scroll"> <div id="content-1" class="content horizontal-images"> <table id="light-box"> <tr> <ul > <td> <li> <div class="flip-container" > <div class="flipper"> <div class="front"> <img src="img/index/JS.jpg" /> <p class="img_under">JS基础学习</p> </div> <a href="#" class="back"> <h3>JS基础</h3> <p>当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换</p> <div class="button_">开始学习</div> </a> </div> </div> </li> </td> <td> <li> <div class="flip-container" > <div class="flipper"> <div class="front"> <img src="img/index/JS.jpg" /> <p class="img_under">JS基础学习</p> </div> <a href="#" class="back"> <h3>JS基础</h3> <p>当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换</p> <div class="button_">开始学习</div> </a> </div> </div> </li> </td> <td> <li> <div class="flip-container" > <div class="flipper"> <div class="front"> <img src="img/index/JS.jpg" /> <p class="img_under">JS基础学习</p> </div> <a href="#" class="back"> <h3>JS基础</h3> <p>当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换</p> <div class="button_">开始学习</div> </a> </div> </div> </li> </td> <td> <li> <div class="flip-container"> <div class="flipper"> <div class="front"> <img src="img/index/JS.jpg" /> <p class="img_under">JS基础学习</p> </div> <a href="#" class="back"> <h3>JS基础</h3> <p>当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换</p> <div class="button_">开始学习</div> </a> </div> </div> </li> </td> <td> <li> <div class="flip-container" > <div class="flipper"> <div class="front"> <img src="img/index/JS.jpg" /> <p class="img_under">JS基础学习</p> </div> <a href="#" class="back"> <h3>JS基础</h3> <p>当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换</p> <div class="button_">开始学习</div> </a> </div> </div> </li> </td> <td> <li> <div class="flip-container"> <div class="flipper"> <div class="front"> <img src="img/index/JS.jpg" /> <p class="img_under">JS基础学习</p> </div> <a href="#" class="back"> <h3>JS基础</h3> <p>当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换</p> <div class="button_">开始学习</div> </a> </div> </div> </li> </td> <td> <li> <div class="flip-container" > <div class="flipper"> <div class="front"> <img src="img/index/JS.jpg" /> <p class="img_under">JS基础学习</p> </div> <a href="#" class="back"> <h3>JS基础</h3> <p>当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换</p> <div class="button_">开始学习</div> </a> </div> </div> </li> </td> <td> <li> <div class="flip-container" > <div class="flipper"> <div class="front"> <img src="img/index/JS.jpg" /> <p class="img_under">JS基础学习</p> </div> <a href="#" class="back"> <h3>JS基础</h3> <p>当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换当鼠标滑过包含块时，元素整体翻转180度，以实现正反面的切换</p> <div class="button_">开始学习</div> </a> </div> </div> </li> </td> </ul> </tr> </table> </div> </div> </div> </div> <div class="container class_show"> <div class="row"> <div class="col-xs-12 col-md-12 col-lg-12"> <div class="page-header"> <h2> <span class="glyphicon glyphicon-signal"></span> 免费好课<a href="#" class="more_inf">更多 ></a></h2> </div> </div> </div> <div class="row" style="box-shadow: 3px 3px 5px rgba(9,9,9,0.5);"> <div class="col-xs-2 col-md-2 col-lg-2 work_show_left" style="background-image: url(img/index/Web1.png);background-size: cover"> <br> <h2>Web<br>前端工程师</h2> <p><a href="#">职业路径 ></a></p> <ul> <li><a href="#">jQuery源码探索之旅1</a> </li> <li><a href="#">jQuery源码探索之旅2</a> </li> <li><a href="#">jQuery源码探索之旅3</a> </li> </ul> </div> <div class="col-xs-8 col-md-8 col-lg-8 work_show_middle"> <a href="#"> <div class="row"> <div class="col-xs-8 col-md-8 col-lg-8" style="background-image:url(img/index/IP2.jpg);background-size:cover;"> <h3>JS高级编程</h3> </div> <div class="col-xs-4 col-md-4 col-lg-4" style="padding:0px;margin-bottom: 10px"> <img src="img/index/SmallIP1.jpg"> <div class="intr_other"> <div class="intr_detail"> <p>中</p> <p>响应式布局</p> <p>摆脱设备大小的限制</p> </div> <p class="people_num">共有8000人正在学习</p> </div> </div> </div> </a> <a href="#"> <div class="row"> <div class="col-xs-8 col-md-8 col-lg-8" style="background-image:url(img/index/IP1.jpg);background-size:cover;"> <h3>JS高级编程</h3> </div> <div class="col-xs-4 col-md-4 col-lg-4" style="padding:0px;margin-bottom: 10px"> <img src="img/index/SmallIP2.jpg"> <div class="intr_other"> <div class="intr_detail"> <p>中</p> <p>响应式布局</p> <p>摆脱设备大小的限制</p> </div> <p class="people_num">共有8000人正在学习</p> </div> </div> </div> </a> </div> <div class="col-xs-2 col-md-2 col-lg-2 work_show_right"> <a href="#"><img src="img/index/SmallIP3.jpg"></a> <div></div> <ul> <li><a href="#">鼠标悬浮效果</a> </li> <li><a href="#">阿里云在线编辑</a> </li> <li><a href="#">AngulJS实战</a> </li> <li><a href="#">Html/CSS基础</a> </li> <li><a href="#">Html/CSS进阶</a> </li> <li><a href="#">Html/CSS高级</a> </li> <li><a href="#">Html/CSS实战</a> </li> </ul> </div> </div> <div class="row" style="box-shadow: 3px 3px 5px rgba(9,9,9,0.5);"> <div class="col-xs-2 col-md-2 col-lg-2 work_show_left" style="background-image: url(img/index/Web2.png);background-size: cover"> <br> <h2>Java<br>工程师</h2> <p><a href="#">职业路径 ></a></p> <ul> <li><a href="#">jQuery源码探索之旅1</a> </li> <li><a href="#">jQuery源码探索之旅2</a> </li> <li><a href="#">jQuery源码探索之旅3</a> </li> </ul> </div> <div class="col-xs-8 col-md-8 col-lg-8 work_show_middle"> <a href="#"> <div class="row"> <div class="col-xs-8 col-md-8 col-lg-8" style="background-image:url(img/index/IP2_2.jpg);background-size:cover;"> <h3>JS高级编程</h3> </div> <div class="col-xs-4 col-md-4 col-lg-4" style="padding:0px;margin-bottom: 10px"> <img src="img/index/SmallIP10.jpg"> <div class="intr_other"> <div class="intr_detail"> <p>中</p> <p>响应式布局</p> <p>摆脱设备大小的限制</p> </div> <p class="people_num">共有8000人正在学习</p> </div> </div> </div> </a> <a href="#"> <div class="row"> <div class="col-xs-8 col-md-8 col-lg-8" style="background-image:url(img/index/IP2_1.jpg);background-size:cover;"> <h3>JS高级编程</h3> </div> <div class="col-xs-4 col-md-4 col-lg-4" style="padding:0px;margin-bottom: 10px"> <img src="img/index/SmallIP9.jpg"> <div class="intr_other"> <div class="intr_detail"> <p>中</p> <p>响应式布局</p> <p>摆脱设备大小的限制</p> </div> <p class="people_num">共有8000人正在学习</p> </div> </div> </div> </a> </div> <div class="col-xs-2 col-md-2 col-lg-2 work_show_right"> <a href="#"><img src="img/index/SmallIP8.jpg"></a> <div></div> <ul> <li><a href="#">鼠标悬浮效果</a> </li> <li><a href="#">阿里云在线编辑</a> </li> <li><a href="#">AngulJS实战</a> </li> <li><a href="#">Html/CSS基础</a> </li> <li><a href="#">Html/CSS进阶</a> </li> <li><a href="#">Html/CSS高级</a> </li> <li><a href="#">Html/CSS实战</a> </li> </ul> </div> </div> <div class="row" style="box-shadow: 3px 3px 5px rgba(9,9,9,0.5);"> <div class="col-xs-2 col-md-2 col-lg-2 work_show_left" style="background-image: url(img/index/Web3.png);background-size: cover"> <br> <h2>Android<br>工程师</h2> <p><a href="#">职业路径 ></a></p> <ul> <li><a href="#">jQuery源码探索之旅1</a> </li> <li><a href="#">jQuery源码探索之旅2</a> </li> <li><a href="#">jQuery源码探索之旅3</a> </li> </ul> </div> <div class="col-xs-8 col-md-8 col-lg-8 work_show_middle"> <a href="#"> <div class="row"> <div class="col-xs-8 col-md-8 col-lg-8" style="background-image:url(img/index/IP3_2.jpg);background-size:cover;"> <h3>JS高级编程</h3> </div> <div class="col-xs-4 col-md-4 col-lg-4" style="padding:0px;margin-bottom: 10px"> <img src="img/index/SmallIP7.jpg"> <div class="intr_other"> <div class="intr_detail"> <p>中</p> <p>响应式布局</p> <p>摆脱设备大小的限制</p> </div> <p class="people_num">共有8000人正在学习</p> </div> </div> </div> </a> <a href="#"> <div class="row"> <div class="col-xs-8 col-md-8 col-lg-8" style="background-image:url(img/index/IP3_1.jpg);background-size:cover;"> <h3>JS高级编程</h3> </div> <div class="col-xs-4 col-md-4 col-lg-4" style="padding:0px;margin-bottom: 10px"> <img src="img/index/SmallIP6.jpg"> <div class="intr_other"> <div class="intr_detail"> <p>中</p> <p>响应式布局</p> <p>摆脱设备大小的限制</p> </div> <p class="people_num">共有8000人正在学习</p> </div> </div> </div> </a> </div> <div class="col-xs-2 col-md-2 col-lg-2 work_show_right"> <a href="#"><img src="img/index/SmallIP5.jpg"></a> <div></div> <ul> <li><a href="#">鼠标悬浮效果</a> </li> <li><a href="#">阿里云在线编辑</a> </li> <li><a href="#">AngulJS实战</a> </li> <li><a href="#">Html/CSS基础</a> </li> <li><a href="#">Html/CSS进阶</a> </li> <li><a href="#">Html/CSS高级</a> </li> <li><a href="#">Html/CSS实战</a> </li> </ul> </div> </div> </div></main><footer> <div class="container"> <div class="row"> <a href="##"><img src="img/logo/Sina.png"></a> <a href="##"><img src="img/logo/wechat.png"></a> <a href="##"><img src="img/logo/qq.png"></a> <a href="##"><img src="img/logo/qqBlog.png"></a> <a href="##"><img src="img/logo/qqSpace.png"></a> <p> <a href="#">企业合作</a> <a href="#">联系我们</a> <a href="#">讲师招募</a> <a href="#">常见问题</a> <a href="#">意见反馈</a> <a href="#">友情链接</a> </p> </div> </div> <div> <p style="width:100%; height:1px; background-color: #ccc;margin-bottom: 2.5rem"></p> <p>© 2016 www.bl.com 京ICP备130236642号(伪造)</p> </div></footer><script type="text/javascript" src="js/Carousel.js"></script><script type="text/javascript" src="js/Scroll.js"></script><script type="text/javascript" src="js/header.js"></script></body></html>
现在让我再看这份代码，唯一的感觉就是，快速学习能力太重要了... 0 0
- 基于JavaScript实现动画轮播效果
- 广告轮播效果的javascript实现
- 原生javascript实现图片轮播效果
- Handler和属性动画实现TextView广告轮播效果
- 基于JQuery的实现图片轮播效果(焦点图)
- 实现文字轮播的效果--基于MSclass插件
- 原生javascript实现图片轮播效果——续
- 使用原生javascript和css实现图片轮播效果
- 纯原生javascript实现图片轮播切换效果代码。
- Javascript图片轮播效果
- JavaScript图片轮播效果
- JavaScript 23 轮播效果
- 用javascript实现动画效果
- 用javascript实现动画效果
- JavaScript---实现动画效果1
- 用JavaScript实现动画效果
- 用JavaScript实现动画效果
- ViewPager轮播切换带动画效果
- 数据库
- QT5.7调用office
- visual studio 2015 key vs2015密钥
- javafirset
- ZOJ
- 基于JavaScript实现动画轮播效果
- mysql having 使用 及where和having子句的区别
- Glide加载框架知识整合一
- Hadoop MapReduce执行过程详解（带hadoop例子）
- Asp.net注意的细节
- 网页给flash传递参数的问题
- flash安全沙箱
- 看张亚飞《.Net for Flash FMS》的笔记
- AspNetPager控件+repeater+Ajax+存储过程实现高效分页,还有漂亮控件样式
