资讯专栏INFORMATION COLUMN

第一个自己写的banner动画

raoyi / 3151人阅读

摘要:动画实现滚动文字描述切换的宽度自动切换的时间默认是否自动播放返回值,作为清除时延的标志位文字介

</>复制代码

  1. transition:height .2s ease-in ;

/------------------------------动画实现滚动-------------------------------/

</>复制代码

  1. var excursion = -420 ; //文字描述切换的宽度
  2. var btn = $("#circle-btn-wrapper .circle-btn");
  3. var all_index = btn.find(".circle-btn-active").index();
  4. var timer = 4000; //自动切换的时间ms,默认4s
  5. var autoPaly = true; //是否自动播放
  6. var inter; //setInterval返回值,作为清除时延的标志位
  7. //console.log(all_index);
  8. //文字介绍切换函数
  9. function introduce_cross(index){
  10. $(".app-introduce-cross").animate({
  11. left: (excursion * index) + "px" ,
  12. },600);
  13. }
  14. //手机画面切换函数
  15. function iphone_show(dex){
  16. $(".iphone-down .filter-img").each(function(index) {
  17. //console.log(dex);
  18. if(index != dex){
  19. $(this).fadeOut(0);
  20. }
  21. else{
  22. $(this).fadeIn(1000);
  23. }
  24. });
  25. $(".iphone-up .filter-imgS").each(function(i) {
  26. //console.log(dex);
  27. if(i != dex){
  28. $(this).fadeOut(0);
  29. }
  30. else{
  31. $(this).fadeIn(1000);
  32. }
  33. });
  34. };
  35. //小圆点切换函数
  36. function circle_btn(dex){
  37. $("#circle-btn-wrapper i").each(function(t) {
  38. //console.log(dex);
  39. if(t != dex){
  40. $(this).removeClass("circle-btn-active");
  41. }
  42. else{
  43. $(this).addClass("circle-btn-active");
  44. }
  45. });
  46. }
  47. //控制箭头的显示和隐藏
  48. function arrow_toogle(index){
  49. if(index == 0){
  50. $(".arrow-left-btn").fadeOut(100);
  51. $(".arrow-right-btn").fadeIn(100);
  52. }
  53. else if(index == 2){
  54. $(".arrow-right-btn").fadeOut(100);
  55. $(".arrow-left-btn").fadeIn(100);
  56. }
  57. else{
  58. $(".arrow-right-btn").fadeIn(100);
  59. $(".arrow-left-btn").fadeIn(100);
  60. }
  61. }
  62. //左侧切换按钮点击事件
  63. $(".arrow-left-btn").click(function(){
  64. if(all_index > 0){
  65. all_index--;
  66. introduce_cross(all_index);
  67. iphone_show(all_index);
  68. circle_btn(all_index);
  69. arrow_toogle(all_index);
  70. }
  71. });
  72. //右侧切换按钮点击事件
  73. $(".arrow-right-btn").click(function(){
  74. if(all_index < 2){
  75. if(all_index == -1){
  76. all_index = all_index + 2 ;
  77. }
  78. else{
  79. all_index++;
  80. }
  81. //console.log(all_index);
  82. introduce_cross(all_index);
  83. iphone_show(all_index);
  84. circle_btn(all_index);
  85. arrow_toogle(all_index);
  86. }
  87. });
  88. //小圆点-点击事件
  89. btn.click(function() {
  90. all_index = $(this).index();
  91. //console.log(dex);
  92. $(this).addClass("circle-btn-active");
  93. btn.not(this).removeClass("circle-btn-active");
  94. introduce_cross(all_index);
  95. iphone_show(all_index);
  96. arrow_toogle(all_index);
  97. });
  98. /*
  99. $(window).focus(function(){setTimeout(autoChange,timer);});
  100. function autoChange()
  101. {
  102. changeScroll();
  103. setTimeout(autoChange,timer);
  104. }
  105. */
  106. //自动滚动初始化
  107. Is_autoPlay(autoPaly);
  108. //手动切换时,终止自动播放;手动停止后,回到自动切换
  109. $(".arrow-btn,.circle-btn").hover(function(){
  110. autoPaly = false;
  111. Is_autoPlay(autoPaly);
  112. },function(){
  113. autoPaly = true;
  114. Is_autoPlay(autoPaly);
  115. });
  116. //判断是否自动播放
  117. function Is_autoPlay(t){
  118. if(t){
  119. inter = setInterval(changeScroll,timer);
  120. }
  121. else{
  122. clearInterval(inter);
  123. }
  124. }
  125. //自动播放函数
  126. function changeScroll(){
  127. if(all_index < 2){
  128. if(all_index == -1){
  129. all_index = all_index + 2 ;
  130. }
  131. else{
  132. all_index += 1;
  133. }
  134. }
  135. else{
  136. all_index = 0;
  137. }
  138. //console.log(all_index);
  139. introduce_cross(all_index);
  140. iphone_show(all_index);
  141. circle_btn(all_index);
  142. arrow_toogle(all_index);
  143. }
  144. /*------------------------------动画实现滚动 end-------------------------------*/

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85292.html

相关文章

  • JS实现轮播图思路整理

    摘要:结构层表现层实现原理通过改变图片的偏移量来实现图片的切换实现步骤通过获取页面需要操作的元素获取轮播图父容器获取图片列表获取图片切换圆点按钮获取向左切换箭头获取向右切换箭头实现左 html结构层 ...

    Anonymous1 评论0 收藏0
  • JS实现轮播图思路整理

    摘要:结构层表现层实现原理通过改变图片的偏移量来实现图片的切换实现步骤通过获取页面需要操作的元素获取轮播图父容器获取图片列表获取图片切换圆点按钮获取向左切换箭头获取向右切换箭头实现左 html结构层 ...

    Meathill 评论0 收藏0
  • JS实现轮播图思路整理

    摘要:结构层表现层实现原理通过改变图片的偏移量来实现图片的切换实现步骤通过获取页面需要操作的元素获取轮播图父容器获取图片列表获取图片切换圆点按钮获取向左切换箭头获取向右切换箭头实现左 html结构层 ...

    keithyau 评论0 收藏0

发表评论

0条评论

raoyi

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<