简单php轮播源码,jQuery实现轮播图源码

朱雀 2022-10-21 03:59 140阅读 0赞

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

设计：

![d29eb70098326b77d4a114d381e98abd.png][]

根据上图可以看出，轮播图需要以下元素：外面的盒子div、放置图片集合的盒子ul、放置两侧按钮的盒子div、下侧顺序按钮div

源代码如下：

一、html源码如下：

*  ![1.jpg][]
 *  ![2.jpg][1.jpg]
 *  ![3.jpg][1.jpg]
 *  ![4.jpg][1.jpg]

*  1
 *  2
 *  3
 *  4

二、css样式实现：

/\*去掉默认浏览器样式\*/

\*\{

margin: 0;

padding: 0;

/\*去掉li标签默认样式\*/

li\{

list-style: none;

/\*最外层盒子样式处理：

1.设置与轮播图高宽一致

2.设置纵向距顶部50px，水平居中

3.设置自己为固定位置

\*/

.outer\{

height: 470px;

width: 590px;

margin: 50px auto;

position:relative;

/\*轮播图片集合处理:

1.将其设置为脱离文档流

2.设置距顶部和左侧都为0

\*/

.img li\{

position: absolute;

top: 0;

left: 0;

/\*顺序按钮区域处理：

1.设置脱离文档流

2.通过设置text-align、width使其整体水平居中

3.设置距离底部20px

\*/

.num\{

position: absolute;

text-align: center;

width: 100%;

bottom: 20px;

/\*顺序按钮处理:

1.将其设置为行级及块级兼容显示

2.设置其宽高

3.设置背景色及字体颜色

4.设置字体水平居中

5.通过设置line-height与height一致，使其字体纵向居中

6.设置其样式为圆形

7.增加按钮左右间距

\*/

.num li\{

display: inline-block;

width: 20px;

height: 20px;

background-color: darkgray;

color: white;

text-align: center;

line-height: 20px;

border-radius: 50%;

margin: 0 20px;

/\*左、右按钮相同部分处理:

1.设置其脱离文档流

2.设置其宽高

3.设置背景色及字体颜色

4.设置字体水平居中

5.通过设置line-height与height一致，使其字体纵向居中

6.通过设置top、margin-top使其整体纵向居中

7.默认不显示

\*/

.btn\{

position: absolute;

width: 20px;

height: 50px;

background-color: darkgray;

color: white;

text-align: center;

line-height: 50px;

top: 50%;

margin-top: -25px;

display: none;

/\*左侧按钮处理:

设置左侧为0

\*/

.left\_btn\{

left: 0;

/\*右侧按钮处理:

设置右侧为0

\*/

.right\_btn\{

right: 0;

/\*鼠标悬浮至轮播图区域时左、右按钮处理:

1.设置左右按钮显示样式为行级块级兼容

2.设置鼠标放置在左右按钮时样式为小手

\*/

.outer:hover .btn\{

display: inline-block;

cursor: pointer;

/\*设置顺序按钮初始按钮样式:

设置为红色(由于样式级别问题会导致设置无效，可通过两种方式解决：

1.后面加上!important

2.将css定位写详细，比如：.outer .num .current\{……

)

\*/

.current\{

background-color: red!important;

三、JQuery实现：

/\*定义位置：由于图片个数与下侧顺序按钮数量一致，可通过位置进行关联\*/

var index=0;

/\*当鼠标放到顺序按钮上时：

1.将当前这个顺序按钮增加样式为红色背景

2.移除周围其他同级元素红色背景样式

3.获取当前顺序按钮的index

4.通过index获取该位置图片

5.一秒钟渐入该图片

6.一秒钟渐出其他相邻图片

7.防止移动过快导致的效果闪现，使用stop方法

\*/

$(".num li").mousemove(function () \{

$(this).addClass("current").siblings().removeClass("current");

index=$(this).index();

$(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);

\});

/\*设置每一秒钟自动轮播：

1.获取当前位置序号：自加操作；当超过图片最大序号时序号设置为0

2.设置下侧顺序按钮及轮播图显示

\*/

var time=setInterval(move,1000);

function move() \{

index++;

if (index==4)\{

index=0

$(".num li").eq(index).addClass("current").siblings().removeClass("current");

$(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);

\};

/\*当鼠标划入、划出轮播图区域时：

1.划入时停止自动轮播

2.划出时继续自动轮播

\*/

$(".outer").hover(function () \{

clearInterval(time);

\},

function () \{

time=setInterval(move,1000);

\});

/\*点击右侧按钮时执行\*/

$(".right\_btn").click(function () \{

move();

\});

/\*点击左侧按钮时执行\*/

function moveL() \{

index--;

if (index==-1)\{

index=3

$(".num li").eq(index).addClass("current").siblings().removeClass("current");

$(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);

$(".left\_btn").click(function () \{

moveL();

\});

更多关于轮播图效果的专题，请点击下方链接查看学习

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

[d29eb70098326b77d4a114d381e98abd.png]: /images/20221021/d6db65a8a0d0444d8160994e05e83c81.png
[1.jpg]:

简单php轮播源码,jQuery实现轮播图源码

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jQuery实现轮播图

相关简单php轮播源码,jQuery实现轮播图源码

相关 jquery简单轮播图实现

相关 JQuery简单轮播图

相关 JQuery实现轮播图源码

相关 jquery 实现轮播图

相关 jQuery手风琴图片轮播（源码+注释）

相关 jQuery实现轮播图

相关 jQuery实现轮播图

相关 js实现轮播图（简单滚动轮播)