原生JavaScript实现的无缝滚动功能详解

前端之家收集整理的这篇文章主要介绍了原生JavaScript实现的无缝滚动功能详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了原生JavaScript实现的无缝滚动功能分享给大家供大家参考,具体如下:

无缝轮播(原生JavaScript)

一:HTML部分:

  1. <div class="Box" id="Box">
  2. <ul class="J_XSlide list">
  3. <li class="J_tabContent"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/main/display/1.jpg" alt="广告一" /></a></li>
  4. <li class="J_tabContent"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/main/display/2.jpg" alt="广告一" /></a></li>
  5. <li class="J_tabContent"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/main/display/3.jpg" alt="广告二" /></a></li>
  6. <li class="J_tabContent"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/main/display/4.jpg" alt="广告三" /></a></li>
  7. <li class="J_tabContent"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/main/display/5.jpg" alt="广告四" /></a></li>
  8. <li class="J_tabContent"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/main/display/6.jpg" alt="广告五" /></a></li>
  9. <li class="J_tabContent"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/main/display/1.jpg" alt="广告一" /></a></li>
  10. </ul>
  11. <div class="btn btnl"><</div>
  12. <div class="btn btnr">></div>
  13. <ul class="tabs">
  14. <li class="tab cur"></li>
  15. <li class="tab"></li>
  16. <li class="tab"></li>
  17. <li class="tab"></li>
  18. <li class="tab"></li>
  19. <li class="tab"></li>
  20. </ul>
  21. </div>

二、CSS部分

  1. <style>
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. }
  6. ul li {
  7. list-style: none;
  8. }
  9. .clearfix {
  10. zoom: 1;
  11. }
  12. .clearfix:after {
  13. display: block;
  14. clear: both;
  15. content: '';
  16. }
  17. .Box {
  18. width: 1226px;
  19. height: 460px;
  20. overflow: hidden;
  21. position: relative;
  22. margin: 20px auto 0;
  23. }
  24. .Box .list {
  25. position: relative;
  26. left: 0;
  27. height: 460px;
  28. }
  29. .Box .list li img,.Box .list li {
  30. float: left;
  31. width: 1226px;
  32. height: 460px;
  33. }
  34. .Box .tabs {
  35. position: absolute;
  36. right: 5px;
  37. bottom: 5px;
  38. z-index: 99999;
  39. }
  40. .Box .tabs .tab {
  41. float: left;
  42. width: 6px;
  43. height: 6px;
  44. border: 2px solid #f47500;
  45. border-radius: 100%;
  46. margin-right: 10px;
  47. cursor: pointer;
  48. background: #fcf2cf;
  49. font-family: arial;
  50. }
  51. .Box .tabs .tab:hover,.Box .tabs .cur {
  52. border: 2px solid #1227e4;
  53. background: #26c776;
  54. }
  55. .Box .btn {
  56. position: absolute;
  57. width: 30px;
  58. height: 70px;
  59. top: 50%;
  60. margin-top: -35px;
  61. z-index: 20;
  62. background-color: rgba(0,0.2);
  63. font-size: 30px;
  64. color: #fff;
  65. text-align: center;
  66. line-height: 70px;
  67. }
  68. .Box:hover .btn {
  69. background-color: rgba(0,0.6);
  70. }
  71. .Box .btnl {
  72. left: 10px;
  73. }
  74. .Box .btnr {
  75. right: 10px;
  76. }
  77. </style>

三、JavaScript部分

3.1 base.js

  1. var GLOBAL = {};
  2. // 定义命名空间函数
  3. GLOBAL.namespace = function(str) {
  4. var arr = str.split("."),o = GLOBAL;
  5. for(i = (arr[0] === "GLOBAL") ? 1 : 0; i < arr.length; i++) {
  6. o[arr[i]] = o[arr[i]] || {};
  7. o = o[arr[i]];
  8. }
  9. };
  10. // Dom命名空间
  11. GLOBAL.namespace("Dom");
  12. // 获取className 第一个参数必须的(class名)、第二个参数父容器,缺省为body节点、第三个参数为DOM节点标签
  13. GLOBAL.Dom.getElementsByClassName = function(str,root,tag) {
  14. if(root) {
  15. root = typeof root === 'string' ? document.getElementById(root) : root;
  16. }
  17. else {
  18. root = document.body;
  19. }
  20. tag = tag || '*';
  21. var eles = root.getElementsByTagName(tag),// 获取父容器下所有标签
  22. arr = [];
  23. for(var i = 0,n = eles.length; i < n; i++) {
  24. for(var j = 0,k = eles[i].className.split(' '),l = k.length; j < l; j++) {
  25. if(k[j] == str) {
  26. arr.push(eles[i]);
  27. break;
  28. }
  29. }
  30. }
  31. return arr;
  32. };
  33. // Event命名空间
  34. GLOBAL.namespace('Event');
  35. // 添加事件(或者说监听事件)
  36. GLOBAL.Event.addHandler = function(node,eventType,handler) {
  37. node = typeof node === 'string' ? document.getElementById(node) : node;
  38. if(node.addEventListener) {
  39. node.addEventListener(eventType,handler,false);
  40. }
  41. else if(node.attachEvent) {
  42. node.attachEvent('on' + eventType,handler);
  43. }
  44. else {
  45. node['on' + eventType] = handler;
  46. }
  47. };

3.2 完美运动框架部分代码

  1. function getStyle(obj,attr) {
  2. return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];
  3. }
  4. function startMove(obj,json,fn) {
  5. clearInterval(obj.timer);
  6. obj.timer = setInterval(function() {
  7. var bStop = true; //这一次运动结束——————所有值都到达了
  8. for(var attr in json) {
  9. //1.取当前的值
  10. var iCur = 0;
  11. if(attr == 'opacity') {
  12. var iCur = parseInt(parseFloat(getStyle(obj,attr)) * 100);
  13. }
  14. else {
  15. var iCur = parseInt(getStyle(obj,attr));
  16. }
  17. //2.计算速度
  18. var iSpeed = (json[attr] - iCur)/6;
  19. iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
  20. //3.检测停止
  21. if(iCur != json[attr]) {
  22. bStop = false;
  23. }
  24. if(attr == 'opacity') {
  25. obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) +')';
  26. obj.style.opacity = (iCur + iSpeed)/100;
  27. }
  28. else {
  29. obj.style[attr] = iCur + iSpeed + 'px';
  30. }
  31. }
  32. if(bStop) {
  33. clearInterval(obj.timer);
  34. if(fn) {
  35. fn();
  36. }
  37. }
  38. },30);
  39. }

3.3 page.js(实现功能部分)

  1. (function() {
  2. var oBox = document.getElementById('Box');
  3. var oXSlide = GLOBAL.Dom.getElementsByClassName('J_XSlide',oBox)[0];
  4. var li = oXSlide.getElementsByTagName('li');
  5. var liTabs = GLOBAL.Dom.getElementsByClassName('tabs',oBox)[0].getElementsByTagName('li');
  6. var iNow = 0;
  7. function tab() {
  8. var timer = null;
  9. var playTime = 3000;
  10. var btn = GLOBAL.Dom.getElementsByClassName('btn',oBox);
  11. oXSlide.style.width = li.length * li[0].offsetWidth + 'px';
  12. for(var i = 0,len = liTabs.length; i < len; i++) {
  13. liTabs[i].index = i;
  14. GLOBAL.Event.addHandler(liTabs[i],'mouSEOver',function() {
  15. iNow = this.index;
  16. showItem(iNow);
  17. });
  18. }
  19. GLOBAL.Event.addHandler(btn[0],'click',moveLeft);
  20. GLOBAL.Event.addHandler(btn[1],moveRight);
  21. timer = setInterval(autoPlay,playTime);
  22. function autoPlay() {
  23. moveRight();
  24. }
  25. GLOBAL.Event.addHandler(oBox,function() {
  26. clearInterval(timer);
  27. });
  28. GLOBAL.Event.addHandler(oBox,'mouSEOut',function() {
  29. timer = setInterval(autoPlay,playTime);
  30. });
  31. }
  32. // 选项卡
  33. function showItem(n) {
  34. for(var i = 0,len = liTabs.length; i < len; i++) {
  35. liTabs[i].className = 'tab';
  36. }
  37. if(n == liTabs.length) {
  38. liTabs[0].className = 'tab cur';
  39. }
  40. else {
  41. liTabs[n].className = 'tab cur';
  42. }
  43. startMove(oXSlide,{'left': -n * li[0].offsetWidth});
  44. }
  45. function moveLeft() {
  46. iNow--;
  47. if(iNow == -1) {
  48. oXSlide.style.left = -liTabs.length * li[0].offsetWidth + 'px';
  49. iNow = liTabs.length - 1;
  50. }
  51. showItem(iNow);
  52. }
  53. function moveRight() {
  54. iNow++;
  55. if(iNow == li.length) {
  56. oXSlide.style.left = 0;
  57. iNow = 1;
  58. }
  59. showItem(iNow);
  60. }
  61. tab();
  62. })();

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

猜你在找的JavaScript相关文章