jQuery实现轮播图及其原理详解


Posted in jQuery onApril 12, 2020

本文实例为大家分享了jQuery实现轮播图及其原理的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <title>JQuery轮播图</title>
 <style>
 *{
 padding:0;
 margin:0;
 }
 .container{
 width:600px;
 height:400px;
 overflow: hidden;
 position:relative;
 margin:0 auto;
 }
 .list{
 width:3000px;
 height:400px;
 position:absolute;

 }
 .list>img{
 float:left;
 width:600px;
 height:400px;
 }
 .pointer{
 position:absolute;
 width:100px;
 bottom:20px;
 left:250px;
 }
 .pointer>span{
 cursor:pointer;
 display:inline-block;
 width:10px;
 height:10px;
 background: #7b7d80;
 border-radius:50%;
 border:1px solid #fff;
 }
 .pointer .on{
 background: #28a4c9;
 }
 .arrow{
 position:absolute;
 text-decoration:none;
 width:40px;
 height:40px;
 background: #727d8f;
 color:#fff;
 font-weight: bold;
 line-height:40px;
 text-align:center;
 top:180px;
 display:none;
 }
 .arrow:hover{
 background: #0f0f0f;
 }
 .left{
 left:0;
 }
 .right{
 right:0;
 }
 .container:hover .arrow{
 display:block;
 }
 </style>
</head>

<body>
 <div class="container">
 <div class="list" style="left:0px;">
 <!--<img src="../static/image/photo1.jpg" alt="5"/>-->
 <img src="../static/image/banner.jpg" alt="1"/>
 <img src="../static/image/slide1.jpg" alt="2"/>
 <img src="../static/image/slide1.jpg" alt="3"/>
 <img src="../static/image/slide1.jpg" alt="4"/>
 <img src="../static/image/photo1.jpg" alt="5"/>
 <!--<img src="../static/image/banner.jpg" alt="1"/>-->
 </div>
 <div class="pointer">
 <span index="1" class="on"></span>
 <span index="2"></span>
 <span index="3"></span>
 <span index="4"></span>
 <span index="5"></span>
 </div>
 <a href="#" rel="external nofollow" rel="external nofollow" class="arrow left">></a>
 <a href="#" rel="external nofollow" rel="external nofollow" class="arrow right"><</a>
 </div>

 <script src="../static/js/jquery-3.2.1.min.js"></script>
 <script>
 var imgCount = 5;
 var index = 1;
 var intervalId;
 var buttonSpan = $('.pointer')[0].children;//htmlCollection 集合
 //自动轮播功能 使用定时器
 autoNextPage();
 function autoNextPage(){
 intervalId = setInterval(function(){
 nextPage(true);
 },3000);
 }
 //当鼠标移入 停止轮播
 $('.container').mouseover(function(){
 console.log('hah');
 clearInterval(intervalId);
 });
 // 当鼠标移出,开始轮播
 $('.container').mouseout(function(){
 autoNextPage();
 });
 //点击下一页 上一页的功能
 $('.left').click(function(){
 nextPage(true);
 });
 $('.right').click(function(){
 nextPage(false);
 });
 //小圆点的相应功能 事件委托
 clickButtons();
 function clickButtons(){
 var length = buttonSpan.length;
 for(var i=0;i<length;i++){
 buttonSpan[i].onclick = function(){
 $(buttonSpan[index-1]).removeClass('on');
 if($(this).attr('index')==1){
 index = 5;
 }else{
 index = $(this).attr('index')-1;
 }
 nextPage(true);

 };
 }
 }
 function nextPage(next){
 var targetLeft = 0;
 //当前的圆点去掉on样式
 $(buttonSpan[index-1]).removeClass('on');
 if(next){//往后走
 if(index == 5){//到最后一张,直接跳到第一张
 targetLeft = 0;
 index = 1;
 }else{
 index++;
 targetLeft = -600*(index-1);
 }

 }else{//往前走
 if(index == 1){//在第一张,直接跳到第五张
 index = 5;
 targetLeft = -600*(imgCount-1);
 }else{
 index--;
 targetLeft = -600*(index-1);
 }

 }
 $('.list').animate({left:targetLeft+'px'});
 //更新后的圆点加上样式
 $(buttonSpan[index-1]).addClass('on');


 }


 </script>
</body>

</html>

效果图:

jQuery实现轮播图及其原理详解

原理:

页面结构方面:

将轮播图容器设置成相对定位,宽度设置成图片的宽度;容器中分为四部分:轮播的图片;点击的小按钮;前一张;后一张

样式方面:

  • 轮播图容器为相对定位,宽度/高度设置成图片的宽度/高度,设置overflow为hidden;
  • 容器中的每一部分都设置成绝对定位,放到相应的位置;
  • 轮播图片的容器宽度设置成所有图片的宽度和,left开始先设置为0;
  • 每张图片宽度一样,都设成左浮动,左右图片都在一行排列,所以轮播图的实质是装有图片的容器的移动,每次移动的距离为一张图片的宽度,这样每次就只显示一张图片;
  • 前一张/后一张设置成display为none,当鼠标移入总容器时,再设置成display为block

功能方面:

自动轮播为一个定时循环机制setInteval,鼠标移入,循环停止,移除循环继续;

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery操作css样式
May 15 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
使用jquery实现轮播图效果
Jan 02 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 #jQuery
jQuery轮播图实例详解
Aug 15 #jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 #jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 #jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 #jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 #jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 #jQuery
You might like
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
PHP $_FILES函数详解
2011/03/09 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
MVVM框架下实现分页功能示例
2018/06/14 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
pyside写ui界面入门示例
2014/01/22 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
django的登录注册系统的示例代码
2018/05/14 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
Python中的With语句的使用及原理
2020/07/29 Python
通过代码实例了解Python sys模块
2020/09/14 Python
生物化工专业个人自荐信
2013/09/26 职场文书
技能竞赛活动方案
2014/02/21 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
师范类求职信
2014/06/21 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
学习新党章心得体会2016
2016/01/15 职场文书