jquery写出PC端轮播图实例


Posted in jQuery onJanuary 26, 2018

最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过swiper.js,后来想了想,就不引入它了,免得又得增加依次一次网络请求,项目里既然已经用到了jQuery,那就索性用jQuery写一个轮播图吧。

现在把自己写的轮播图这块代码单独拿出来,做一个小demo写在这里记录一下(demo中轮播图的图片网上随意找的)

实现的效果:

1、自动轮播(轮播时间间隔在js代码中自定义)

2、点击左右侧按钮,实现手动切换

3、底部小圆点根据切换图片的位置相应的显示active状态

4、鼠标经过轮播图区域,停止轮播,离开轮播图区域开始轮播

代码目录结果如下:

jquery写出PC端轮播图实例

一、index.html

注:这里以5张图片为例,页面上真正轮播展示给用户看到的是5张不同的图片,但是为了轮播效果的连贯性,所以在第一张图片前面添加上第五张图片,在第五张图片后面加上了第一张图片,所以demo结构里是7张图片,每张图片的尺寸必须都是一样的哦(这里宽高尺寸是720*350px)。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>PC-jquery版轮播图</title>
 <link rel="stylesheet" href="css/style.css" rel="external nofollow" >
</head>
<body>
<div class="layout">
 <h2 style="text-align: center;">PC-jquery版轮播图</h2>
 <div class="slide" id="slide">
  <div id="outer" class="outer">
   <ul id="inner" class="inner">
    <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-5</p><img src="images/slide-5.jpg"></a></li>
    <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-1</p><img src="images/slide-1.jpg"></a></li>
    <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-2</p><img src="images/slide-2.jpg"></a></li>
    <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-3</p><img src="images/slide-3.jpg"></a></li>
    <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-4</p><img src="images/slide-4.jpg"></a></li>
    <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-5</p><img src="images/slide-5.jpg"></a></li>
    <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-1</p><img src="images/slide-1.jpg"></a></li>
   </ul>

 <!--底部小圆点-->
   <ol class="dot" id="dot">
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ol>
  </div>


 <!--左右两侧的点击切换按钮-->
  <div class="arrow-box">
   <div class="arrow arrow-l" id="arrow_l">‹</div>
   <div class="arrow arrow-r" id="arrow_r">›</div>
  </div>
 </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>

二、style.css

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
.layout {
 width: 1000px;
 margin: 30px auto;
}
ul,ol,li {
 list-style: none;
}
.slide {
 position: relative;
 width: 900px;
 margin:auto;
}
.slide .outer {
 position: relative;
 margin: 30px auto;
 width: 720px;
 height: 400px;
 overflow: hidden;
}
.slide .outer .inner {
 width: 5040px;
 height: 350px;
 position: absolute;
 left: -720px;
 top: 0;
}
.slide .outer .inner li {
 float: left;
 height: 350px;
}
.slide .outer .inner li a {
 display: block;
 position: relative;
 width: 100%;
 height: 100%;
}
.slide .outer .inner li a p {
 position: absolute;
 left: 0;
 bottom: 0;
 color: #fff;
 font-size: 18px;
 width: 720px;
 height: 80px;
 line-height: 80px;
 padding-left: 50px;
 background: linear-gradient(180deg,rgba(0,0,0,0), rgba(0,0,0,0.5));
}
.slide .outer .dot {
 margin-top: 365px;
 text-align: center;
}
.slide .outer .dot li {
 height: 6px;
 width: 6px;
 border-radius: 3px;
 background-color: #d2cbcb;
 display: inline-block;
 margin: 0 3px;
}
.slide .outer .dot li.active {
 background-color: #6e5ca5;
}
.slide .arrow-box {
 position: absolute;
 width: 900px;
 height: 60px;
 top: 150px;
 left: 0;
}
.slide .arrow-box .arrow {
 width: 60px;
 height: 60px;
 line-height: 60px;
 text-align: center;
 border-radius: 30px;
 background-color: #dde2e6;
 font-size: 60px;
 color: #999;
 cursor: pointer;
}
.slide .arrow-box .arrow.arrow-l {
 float: left;
}
.slide .arrow-box .arrow.arrow-r {
 float: right;
}

三、index.js

注:js代码中,每个变量均已给了注释。为了防止快速多次点击,而出现动画不停的现象,这里在每次切换图片的时候先调用stop(false,true)。但是注意在向左侧滚动的时候,滚动到最后一张图图片后,再次切换时就不要用stop(false,true),而是要瞬间定位到第一张图片(其实是dom结构中的第二张)的位置,同样,向右侧滚动时,当滚动到第一张图片后,再次切换时就不用stop(false,true),而是要瞬间定位到最后一张图片(其实是dom结构中的倒数第二张)的位置。

var interval = 3000;    //轮播间隔时间
var arrowL = $('#arrow_l');   //左侧箭头
var arrowR = $('#arrow_r');   //右侧箭头

var slideBox = $('#slide');   //轮播图区域
var innerBox = $('#inner');   //内层大盒子
var img = innerBox.children('li'); //每个图片
var dot = $('#dot');    //小圆点盒子

var imgW = $(img[0]).outerWidth(); //每个li标签的宽度

var imgCount = 5;     //总图片个数(不同图片的个数)(实际dom上是有7张)
var i = 0;       //初始化为第0张图片
timer = null;      //定时器

//自动轮播
timer = setInterval(function () {
 i++;
 innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
 dot.find('li').removeClass('active').eq(i-1).addClass('active')
 if(i > imgCount){
  innerBox.animate({'left':-1*imgW+'px'},0);
  dot.find('li').removeClass('active').eq(0).addClass('active')
  i = 1;
 }
},interval)

//点击右侧箭头,播放下一张
arrowR.click(function () {
 i++;
 innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
 dot.find('li').removeClass('active').eq(i-1).addClass('active')
 if(i > imgCount){
  innerBox.animate({'left':-1*imgW+'px'},0);
  dot.find('li').removeClass('active').eq(0).addClass('active')
  i = 1;
 }
})

//点击左侧箭头,播放上一张
arrowL.click(function () {
 i--;
 innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
 dot.find('li').removeClass('active').eq(i-1).addClass('active')
 if(i < 1){
  innerBox.animate({'left':-imgCount*imgW+'px'},0);
  dot.find('li').removeClass('active').eq(imgCount-1).addClass('active')
  i = imgCount;
 }
})
//鼠标经过轮播图区域时,清除定时器,停止自动轮播
slideBox.mouseenter(function () {
 clearInterval(timer);
})

//鼠标离开轮播图区域时,重新启动自动轮播
slideBox.mouseleave(function () {
 timer = setInterval(function () {
  i++;
  innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
  dot.find('li').removeClass('active').eq(i-1).addClass('active')
  if(i > imgCount){
   innerBox.animate({'left':-1*imgW+'px'},0);
   dot.find('li').removeClass('active').eq(0).addClass('active')
   i = 1;
  }
 },interval)
})

四、效果图展示

jquery写出PC端轮播图实例

jquery写出PC端轮播图实例

jquery写出PC端轮播图实例

jQuery 相关文章推荐
利用jQuery解析获取JSON数据
Apr 08 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
详解jQuery的核心函数和事件处理
Feb 18 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 #jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 #jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 #jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 #jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 #jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 #jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 #jQuery
You might like
php mysql 封装类实例代码
2016/09/18 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
phpfpm的作用和用法
2019/10/10 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
Underscore源码分析
2015/12/30 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
Vue常用指令V-model用法
2017/03/08 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
python避免死锁方法实例分析
2015/06/04 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
服务型党组织建设典型材料
2014/05/07 职场文书
团队会宣传标语
2014/10/09 职场文书
vue router 动态路由清除方式
2022/05/25 Vue.js