资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

使用jQuery怎么自定义一个轮播图功能

本篇文章为大家展示了使用jQuery怎么自定义一个轮播图功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

为山南等地区用户提供了全套网页设计制作服务，及山南网站建设行业解决方案。主营业务为成都网站设计、成都网站制作、外贸网站建设、山南网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

jquery是什么

jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。

实现思路:

1.布局

通过叠罗汉方式将图片展示区、上一张下一张点击区，指示灯展示区层叠显示
主画布wrap层在最低层，其次是图片展示区，上一张下一张点击区覆盖图片展示区，
指示灯展示区覆盖图片展示区。

2.CSS样式

将wrap层相对布局，图片展示区、上一张下一张点击区、指示灯展示区层设置为绝对布局。
wrap层作为包涵体，对图片展示区、上一张下一张点击区、指示灯展示区层进行层叠布局。
通过display:flex设置盒子弹性布局对指示灯展示区层进行居中排列
通过display:block和dispaly:inline-block讲行级元素转换成块级元素

3.js

(1)web界面渲染后，开启图片从左向右切换的定时器
(2)鼠标移入轮播器后关闭定时器，鼠标移除轮播器后，开启定时器。
(3).点击上一张，关闭定时器，图片从右向左移动一张，鼠标移开上一张，开启定时器。
(4).点击下一张，关闭定时器，图片从坐向右移动一张，鼠标移开下一张，开启定时器。
(5).鼠标移入到指示灯，关闭定时器，图片切换到指示灯所指示的位置，鼠标移开指示灯，开启定时器。

布局图：

使用jQuery怎么自定义一个轮播图功能

实现代码:

shufflingfigure.html:




  
  轮播图
  
  
  
  
  


  
    
    
      
      
      
      
      
    
                <       >     
                                                 
  

shufflingfigure.css:

*{
  margin: 0;
  padding: 0;
}
#wrap{
  position: relative;
  width:600px ;
  height: 260px;
  margin: 50px auto;
}
#wrap .pic{
  width: 600px;
  height: 260px;
  position: relative;
  cursor: pointer;
}
#wrap .pic img{
  position:absolute;
  width:600px ;
  height: 260px;
}
#wrap .btn span{
  position: absolute;
  top: 50%;
  display: block;
  width: 50px;
  height: 90px;
  margin-top: -45px;
  background: rgba(0,0,0,.5);
  font-size: 20px;
  text-align: center;
  line-height: 90px; /*设置垂直居中*/
  cursor: pointer;
}
#wrap .btn span.next{
  position: absolute;
  right: 0;
}
#wrap .lib{
  position: absolute;
  bottom: 10px;
  left: 50%;
  margin-left: -65px;
  display: flex;  /*弹性盒子模型*/
  flex-direction: row; /*主轴为行*/
  justify-content:space-between;/*主轴方向排列方式*/
  align-items: center; /*辅轴方向排列方式*/
  width:130px ;
  height: 30px;
  background: rgba(0,0,0,.5);
}
#wrap .lib span {
  display: block;
  width: 10px;
  height: 10px;
  background: #fff;
  margin: 5px;
  border-radius: 50%;  /*设置圆角设置圆形*/
  cursor: pointer;
}
#wrap .lib span.on{
  background: red;
}

shufflingfigure.js:

/**
 * Created by Administrator on 2017/4/6.
 */
window.onload=function () {
  /**定义*/
  /*点击 下一张按钮 被点击的时候 图片进行切换 小圆点切换*/
  var $pic=$(".pic"); /*获取图片点击区域*/
  var $next=$(".next");/*获取下一张的按钮*/
  var $prev=$(".prev");/*获取上一张的按钮*/
  var $img=$(".pic img");  /*获取pic下所有的img*/
  var $lib=$(".lib span"); /*获取所有的小圆点*/
  var index=0;  //定义当前图片下标
  var length=$img.length;  //图片个数
  //图片从左向右切换
  function changeImage() {
    index++;
    index=index%length;
    $img.eq(index).fadeIn(300).siblings().fadeOut(300);
    $lib.eq(index).addClass('on').siblings().removeClass('on');
  }
  //图片从右向左切换
  function changeImageRighttoLeft() {
    index--;
    index=index<0?length:index;
    $img.eq(index).fadeIn(300).siblings().fadeOut(300);
    $lib.eq(index).addClass('on').siblings().removeClass('on');
  }
  //开启图片从左向右切换定时器
  var intervalHandle = setInterval(changeImage,2000);
  /**逻辑*/
  //下一张点击时图片向右移动一张
  $next.click(function () {
    clearInterval(intervalHandle);
    changeImage();
  })
  //下一张移除焦点时开启定时器
  $next.hover(function () {
  },function () {
    clearInterval(intervalHandle);
    intervalHandle = setInterval(changeImage,2000);
  });
  //上一张点击时图片向左移动一张
  $prev.click(function () {
    clearInterval(intervalHandle);
    changeImageRighttoLeft();
  })
  //上一张移除焦点时开启定时器
  $prev.hover(function () {
  },function () {
    clearInterval(intervalHandle);
    intervalHandle = setInterval(changeImage,2000);
  });
  $lib.hover(function () {/*移入小圆点上*/
    //关闭图片切换定时器
    clearInterval(intervalHandle);
    index=$(this).index();
    $img.eq(index).fadeIn(300).siblings().fadeOut(300);
    $lib.eq(index).addClass('on').siblings().removeClass('on');
  },function () {
    intervalHandle = setInterval(changeImage,2000);
  });
  $pic.hover(function () {
    clearInterval(intervalHandle);
  },function () {
    intervalHandle = setInterval(changeImage,2000);
  });
  //图片点击事件
  $pic.click(function () {
      alert("index:"+index);
  });
}

上述内容就是使用jQuery怎么自定义一个轮播图功能，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。


网站标题：使用jQuery怎么自定义一个轮播图功能
分享地址：http://cdkjz.cn/article/pciigh.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
成都公司注册网络推广公司成都画册制作成都移动机房微信小程序成都网络推广做手机网站网站运维托管外贸网站建设四川正泰动物

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图