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 EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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
投票管理程序
2006/10/09 PHP
PHP 裁剪图片成固定大小代码方法
2009/09/09 PHP
PHP实现懒加载的方法
2015/03/07 PHP
前端必学之PHP语法基础
2016/01/01 PHP
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
JavaScript实用技巧(一)
2010/08/16 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
jquery 手势密码插件
2017/03/17 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
python和shell获取文本内容的方法
2018/06/05 Python
python re模块的高级用法详解
2018/06/06 Python
Python实现FLV视频拼接功能
2020/01/21 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
计算机专业自我鉴定
2013/10/15 职场文书
总经理助理职责
2014/02/04 职场文书
七一党日活动总结
2014/07/08 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
MySQL 全文检索的使用示例
2021/06/07 MySQL