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 EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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 Sql Server连接失败问题及解决办法
2009/08/07 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
javascript radio 联动效果
2009/03/04 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
js实现双色球效果
2020/08/02 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
实现vuex原理的示例
2020/10/21 Javascript
详解Python中的__init__和__new__
2014/03/12 Python
详解在Python程序中使用Cookie的教程
2015/04/30 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
Python脚本处理空格的方法
2016/08/08 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
python的继承知识点总结
2018/12/10 Python
对python中的argv和argc使用详解
2018/12/15 Python
Django REST framework视图的用法
2019/01/16 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
python excel多行合并的方法
2020/12/09 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
留学自荐信的技巧
2013/10/17 职场文书
物业招聘计划书
2014/01/10 职场文书
体育教学随笔感言
2014/02/24 职场文书
地道战观后感
2015/06/04 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS