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

<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">

nofollow" rel="external nofollow" class="arrow right"><

<script src="../static/js/jquery-3.2.1.min.js">

效果图：

原理：

页面结构方面：

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

样式方面：

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

功能方面：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。