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表单验证(简单)
May 23 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jQuery实现简易QQ聊天框
Feb 10 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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
python根据路径导入模块的方法
2014/09/30 Python
批处理与python代码混合编程的方法
2016/05/19 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
python之super的使用小结
2018/08/13 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
内刊编辑求职自荐书范文
2014/02/19 职场文书
会务接待方案
2014/02/27 职场文书
个人校本研修方案
2014/05/26 职场文书
公司员工辞职信范文
2015/05/12 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
Django REST framework 限流功能的使用
2021/06/24 Python
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL