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

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

html部分

div class="cm-banner">  <div class="cm-banner-list">    <ul id="cm_banner_list">      <!--图片宽度和高度在css中定为1920x300-->      <li><img src="cm-banner-01.webp" /></li>      <li><img src="cm-banner-02.webp" /></li>      <li><img src="cm-banner-03.webp" /></li>      <li><img src="cm-banner-04.webp" /></li>    </ul>    <ul class="cm-banner-num" id="cm_banner_num"></ul>  </div>  <div class="cm-banner-in w">    <img src="cm-arrow-left.webp" id="cm_prev" class="cm-banner-arrow" />    <img src="cm-arrow-right.webp" id="cm_next" class="cm-banner-arrow" />  </div></div>

css部分

*{  margin: 0;  padding: 0;}.cm-banner {  width: 100%;  height: 300px;  overflow: hidden;  cursor: pointer;  position: relative;}.cm-banner-in {  width: 1100px;  height: 300px;  position: absolute;  top: 0;  left: 50%;  margin-left: -550px;}#cm_banner_list li{  display: none;  position: absolute;  top: 0;  left: 0;}.cm-banner-num {  width: 100%;  position: absolute;  bottom: 0;  text-align: center;  z-index: 2; /*如果没有在这里设置层次小圆点的点击效果无法触发*/}.cm-banner-num li{  width: 10px;  margin: 10px 3px;  height: 10px;  background-color: #fff;  border-radius: 5px;  -webkit-border-radius: 5px;  display: inline-block;  opacity: 0.7;}.cm-banner-num .active {  background-color: #3982de;}.cm-banner-arrow {  position: absolute;  top: 50%;  margin-top: -22px;  opacity: 0.5;  display: none;}#cm_prev {  left: 0;}#cm_next {  right: 0;}

js部分

$(function(){  //鼠标移入显示箭头按钮  $('.cm-banner').hover(function(){    $('.cm-banner-arrow').show();    clearInterval(cm_timer);  },function(){    $('.cm-banner-arrow').hide();    cm_timer = setInterval(function(){      i++;      if(i > cm_length - 1){        i = 0;      }      $('#cm_banner_list li').eq(i).fadeIn(800).siblings().fadeOut(800);      cm_toggle(i);    },2500);  });  //鼠标移入箭头按钮高亮  $('.cm-banner-arrow').hover(function(){    $(this).css('opacity','1');  },function(){    $(this).css('opacity','0.5');  });  //初始化必要变量  var i = 0;  var cm_length = $('#cm_banner_list li').length;  var cm_toggle = function(point){    $('#cm_banner_num li').eq(point).addClass('active').siblings().removeClass('active');  };  //动态添加小圆点  for(j = 0;j < cm_length;j++){    $('#cm_banner_num').append('<li></li>');  }  //给第一个小圆点添加样式  $('#cm_banner_num li').first().addClass('active');  //给第一张图片添加样式  $('#cm_banner_list li').first().css('display','block');  //鼠标点击左箭头切换  $('#cm_prev').click(function(){    i--;    if(i < 0){      i = cm_length - 1;    }    $('#cm_banner_list li').eq(i).fadeIn(800).siblings().fadeOut(800);    cm_toggle(i);  });  //鼠标点击右箭头切换  $('#cm_next').click(function(){    i++;    if(i > cm_length - 1){      i = 0;    }    $('#cm_banner_list li').eq(i).fadeIn(800).siblings().fadeOut(800);    cm_toggle(i);  });  //鼠标点击圆点切换  $('#cm_banner_num li').click(function(){    var cm_index = $(this).index();    $('#cm_banner_list li').eq(cm_index).fadeIn(800).siblings().fadeOut(800);    i = cm_index;    cm_toggle(cm_index);  });  //自动播放  cm_timer = setInterval(function(){    i++;    if(i > cm_length - 1){      i = 0;    }    $('#cm_banner_list li').eq(i).fadeIn(800).siblings().fadeOut(800);    cm_toggle(i);  },2500);});

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

tag：全屏轮播图宽度实例高度