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


Posted in jQuery onJuly 08, 2017

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

html部分

div class="cm-banner">
  <div class="cm-banner-list">
    <ul id="cm_banner_list">
      <!--图片宽度和高度在css中定为1920x300-->
      <li><img src="cm-banner-01.png" /></li>
      <li><img src="cm-banner-02.png" /></li>
      <li><img src="cm-banner-03.png" /></li>
      <li><img src="cm-banner-04.png" /></li>
    </ul>
    <ul class="cm-banner-num" id="cm_banner_num"></ul>
  </div>
  <div class="cm-banner-in w">
    <img src="cm-arrow-left.png" id="cm_prev" class="cm-banner-arrow" />
    <img src="cm-arrow-right.png" 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制作全屏宽度固定高度轮播图(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 #jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 #jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 #jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 #jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 #jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 #jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 #jQuery
You might like
Php做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
ThinkPHP路由详解
2015/07/27 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
Javascript的匿名函数小结
2009/12/31 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
浅谈Angular7 项目开发总结
2018/12/19 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
python持久性管理pickle模块详细介绍
2015/02/18 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
工程管理造价应届生求职信
2013/11/13 职场文书
会计专业自我鉴定范文
2013/12/29 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
个性与发展自我评价
2015/03/06 职场文书
男人帮观后感
2015/06/18 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
Java Socket实现多人聊天系统
2021/07/15 Java/Android
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang
virtualenv隔离Python环境的问题解析
2022/06/21 Python