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常用选择器详解
Jul 17 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
jQuery实现简单评论区功能
Oct 26 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
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
跟老齐学Python之关于类的初步认识
2014/10/11 Python
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
使用Python读取大文件的方法
2018/02/11 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
pytorch之添加BN的实现
2020/01/06 Python
python3.8下载及安装步骤详解
2020/01/15 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
python程序输出无内容的解决方式
2020/04/09 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
培训科主任岗位职责
2014/08/08 职场文书
公司领导班子对照材料
2014/08/18 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
Python爬虫实战之爬取携程评论
2021/06/02 Python
Python实现拼音转换
2021/06/07 Python