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实现鼠标经过显示动画边框特效
Mar 24 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 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
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
php编写简单的文章发布程序
2015/06/18 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
jQuery 性能优化指南(2)
2009/05/21 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
前端性能优化及技巧
2016/05/06 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
js实现简单的秒表
2020/01/16 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
python实现用于测试网站访问速率的方法
2015/05/26 Python
Python实现的计数排序算法示例
2017/11/29 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
如何开启linux的ssh服务
2015/02/14 面试题
建筑经济管理专业求职信分享
2014/01/06 职场文书
学校卫生检查制度
2014/02/03 职场文书
搞笑创意广告语
2014/03/17 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
工作说明书格式
2014/07/29 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
python模板入门教程之flask Jinja
2022/04/11 Python