jQuery实现轮播图及其原理详解

前端之家收集整理的这篇文章主要介绍了jQuery实现轮播图及其原理详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

JQuery轮播图

@H_403_10@
<div class="container">
<div class="list" style="left:0px;">

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

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,鼠标移入,循环停止,移除循环继续;

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

原文链接:https://www.f2er.com/jquery/30930.html

猜你在找的jQuery相关文章