<">
当前位置:Gxlcms > JavaScript > jQuery制作全屏宽度固定高度轮播图(实例讲解)

jQuery制作全屏宽度固定高度轮播图(实例讲解)

时间:2021-07-01 10:21:17 帮助过:17人阅读

前端新手自己写的,练习一下基本功,也是留下的第一次记录

html部分

  1. div class="cm-banner">
  2. <div class="cm-banner-list">
  3. <ul id="cm_banner_list">
  4. <!--图片宽度和高度在css中定为1920x300-->
  5. <li><img src="cm-banner-01.png" /></li>
  6. <li><img src="cm-banner-02.png" /></li>
  7. <li><img src="cm-banner-03.png" /></li>
  8. <li><img src="cm-banner-04.png" /></li>
  9. </ul>
  10. <ul class="cm-banner-num" id="cm_banner_num"></ul>
  11. </div>
  12. <div class="cm-banner-in w">
  13. <img src="cm-arrow-left.png" id="cm_prev" class="cm-banner-arrow" />
  14. <img src="cm-arrow-right.png" id="cm_next" class="cm-banner-arrow" />
  15. </div>
  16. </div>

css部分

  1. *{
  2. margin: 0;
  3. padding: 0;
  4. }
  5. .cm-banner {
  6. width: 100%;
  7. height: 300px;
  8. overflow: hidden;
  9. cursor: pointer;
  10. position: relative;
  11. }
  12. .cm-banner-in {
  13. width: 1100px;
  14. height: 300px;
  15. position: absolute;
  16. top: 0;
  17. left: 50%;
  18. margin-left: -550px;
  19. }
  20. #cm_banner_list li{
  21. display: none;
  22. position: absolute;
  23. top: 0;
  24. left: 0;
  25. }
  26. .cm-banner-num {
  27. width: 100%;
  28. position: absolute;
  29. bottom: 0;
  30. text-align: center;
  31. z-index: 2; /*如果没有在这里设置层次小圆点的点击效果无法触发*/
  32. }
  33. .cm-banner-num li{
  34. width: 10px;
  35. margin: 10px 3px;
  36. height: 10px;
  37. background-color: #fff;
  38. border-radius: 5px;
  39. -webkit-border-radius: 5px;
  40. display: inline-block;
  41. opacity: 0.7;
  42. }
  43. .cm-banner-num .active {
  44. background-color: #3982de;
  45. }
  46. .cm-banner-arrow {
  47. position: absolute;
  48. top: 50%;
  49. margin-top: -22px;
  50. opacity: 0.5;
  51. display: none;
  52. }
  53. #cm_prev {
  54. left: 0;
  55. }
  56. #cm_next {
  57. right: 0;
  58. }

js部分

  1. $(function(){
  2. //鼠标移入显示箭头按钮
  3. $('.cm-banner').hover(function(){
  4. $('.cm-banner-arrow').show();
  5. clearInterval(cm_timer);
  6. },function(){
  7. $('.cm-banner-arrow').hide();
  8. cm_timer = setInterval(function(){
  9. i++;
  10. if(i > cm_length - 1){
  11. i = 0;
  12. }
  13. $('#cm_banner_list li').eq(i).fadeIn(800).siblings().fadeOut(800);
  14. cm_toggle(i);
  15. },2500);
  16. });
  17. //鼠标移入箭头按钮高亮
  18. $('.cm-banner-arrow').hover(function(){
  19. $(this).css('opacity','1');
  20. },function(){
  21. $(this).css('opacity','0.5');
  22. });
  23. //初始化必要变量
  24. var i = 0;
  25. var cm_length = $('#cm_banner_list li').length;
  26. var cm_toggle = function(point){
  27. $('#cm_banner_num li').eq(point).addClass('active').siblings().removeClass('active');
  28. };
  29. //动态添加小圆点
  30. for(j = 0;j < cm_length;j++){
  31. $('#cm_banner_num').append('<li></li>');
  32. }
  33. //给第一个小圆点添加样式
  34. $('#cm_banner_num li').first().addClass('active');
  35. //给第一张图片添加样式
  36. $('#cm_banner_list li').first().css('display','block');
  37. //鼠标点击左箭头切换
  38. $('#cm_prev').click(function(){
  39. i--;
  40. if(i < 0){
  41. i = cm_length - 1;
  42. }
  43. $('#cm_banner_list li').eq(i).fadeIn(800).siblings().fadeOut(800);
  44. cm_toggle(i);
  45. });
  46. //鼠标点击右箭头切换
  47. $('#cm_next').click(function(){
  48. i++;
  49. if(i > cm_length - 1){
  50. i = 0;
  51. }
  52. $('#cm_banner_list li').eq(i).fadeIn(800).siblings().fadeOut(800);
  53. cm_toggle(i);
  54. });
  55. //鼠标点击圆点切换
  56. $('#cm_banner_num li').click(function(){
  57. var cm_index = $(this).index();
  58. $('#cm_banner_list li').eq(cm_index).fadeIn(800).siblings().fadeOut(800);
  59. i = cm_index;
  60. cm_toggle(cm_index);
  61. });
  62. //自动播放
  63. cm_timer = setInterval(function(){
  64. i++;
  65. if(i > cm_length - 1){
  66. i = 0;
  67. }
  68. $('#cm_banner_list li').eq(i).fadeIn(800).siblings().fadeOut(800);
  69. cm_toggle(i);
  70. },2500);
  71. });

以上这篇jQuery制作全屏宽度固定高度轮播图(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

人气教程排行