• ▸ PHP
• ▸ Java
• ▸ Java SE
• ▸ Python
• ▸ C#
• ▸ C&C++
• ▸ Ruby
• ▸ VB
• ▸ asp.Net
• ▸ Go
• ▸ Perl
• ▸ netty
• ▸ Django
• ▸ Delphi
• ▸ Jsp
• ▸ .NET Core
• ▸ Spring
• ▸ Flask
• ▸ Springboot
• ▸ SpringMVC
• ▸ Lua
• ▸ Laravel
• ▸ Mybatis
• ▸ Asp
• ▸ Groovy
• ▸ ThinkPHP
• ▸ Yii
• ▸ swoole
• ▸ HTML
• ▸ HTML5
• ▸ JavaScript
• ▸ CSS
• ▸ jQuery
• ▸ Bootstrap
• ▸ Angularjs
• ▸ TypeScript
• ▸ Vue
• ▸ Dojo
• ▸ Json
• ▸ Electron
• ▸ Node.js
• ▸ extjs
• ▸ Express
• ▸ XML
• ▸ ES6
• ▸ Ajax
• ▸ Flash
• ▸ Unity
• ▸ React
• ▸ Flex
• ▸ Ant Design
• ▸ Web前端
• ▸ 微信小程序
• ▸ 微信公众号
• ▸ iOS
• ▸ Android
• ▸ Swift
• ▸ Hybrid
• ▸ Cocos2d-x
• ▸ Flutter
• ▸ Xcode
• ▸ Silverlight
• ▸ cocoa
• ▸ Cordova

• 前端之家
• jQuery
• jQuery实现轮播图及其原理详解

本文实例为大家分享了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，鼠标移入，循环停止，移除循环继续；

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