如何用jQuery写出一个优雅的轮播图

「爱情、让人受尽委屈。」 2022-05-08 02:50 89阅读 0赞

先上一个简单的轮播图给大家看看效果：![70][]

1、分析轮播图原理：1）五张轮播图的原理是使用6张图片作为轮播，方便最后一张和第一张接轨，给用户带来较好的体验效果

2）当图片向左轮播时，图片的位置是向右移动的，同理当图片向右轮播时图片的位置是向左移动的

3）当轮播到最后一张时我们需要快速切换到第一张![70 1][]![70 2][],然后继续向右自动播放，向左同理（在第一张处图片位置为-num \* moveLen，然后位置逐渐向右移动）

2、实现过程：点击事件、自动轮播事件、以及切换索引显示

点击事件包括移入可视区后点击button显示，并且清除自动轮播的定时器，移出可视区后button消失，并且自动轮播，还有点击左右button的点击事件，以及点击下面小圆点的图片切换事件。

自动轮播事件就是在无点击的情况下自动播放图片，默认向右轮播，运用move函数设置定时器播放。

改变索引显示事件也是当显示当前图片便显示当前的索引点，并将其变红

3、实现

1、HTML和CSS样式简单点

body内的HTML如下：

</ul>

</ul>

</div>

css样式：

\*\{

margin:0px;

padding: 0px;

list-style: none;

.wrapper\{

position: relative;

width:400px;

height:350px;

border:1px solid \#eee;

margin:100px auto;

overflow: hidden;//设置隐藏，因为就是对.imgs的位置移动，移出可视区便使其不可见

.wrapper .imgs\{

position: absolute;

left:0px;

width:2400px;

height: 350px;

font-size: 0px;

.wrapper .imgs li\{

display: inline-block;/\*行级块元素之间会有一个tab缩进，这个大小就是font-size的值\*/

width:400px;

height:350px;

.wrapper .imgs li img\{

width:100%;

height:100%;

.btn\{

width:40px;

height:30px;

position: absolute;

top:50%;

margin-top: -15px;

background: yellow;

opacity: 0.4;

text-align: center;

line-height: 30px;

display: none;//初始化为none，方便hover事件中的show函数初始显示。

.leftBtn\{

left:0px;

.rightBtn\{

right:0px;

/\* .wrapper .rings\{

width:100%;

position: absolute;

bottom: 30px;

text-align: center;

\} \*/

.wrapper .dot\{

position: absolute;

bottom: 30px;

left: 50%;

margin-left: -65px;

width:130px;

height: 20px;

text-align: center;

.wrapper .dot li\{

float: left;

width:20px;

height:20px;

border-radius: 50%;

background: \#fff;

font-size: 0px;//使li中的文本内容消失

margin-left: 4px;

jQuery实现：

//点击事件 点击前后 图片前后移动轮播

//自动移动事件 无点击事件时自动轮播图片

//改变索引值事件

var nowIndex = 0;

var timer = null,

num = $('.imgs li').length - 1,

len = $('.imgs li').width(),

lock = true;

// console.log(num, len);

function init() \{        //init()初始化函数，作为函数的入口函数

bindEvent();

autoMove();

changeIndex();

init();

function bindEvent() \{

$('.wrapper').hover(function() \{//鼠标移入移出事件

$('.btn').show();

clearInterval(timer);

\}, function() \{

$('.btn').hide();

autoMove();

\})

$('.wrapper').on('click','.btn', function()\{//左右button点击事件

if($(this).hasClass('leftBtn'))\{

move('prev');

\}else if($(this).hasClass('rightBtn')) \{

move('next');

\})

$('.dot').on('click', 'li', function() \{//索引值的点击事件

var index = $(this).index();

// console.log(index)

move(index);

\})

function move(dir) \{

if(lock)\{//设置锁，防止自动轮播与点击事件的冲突发生，使图片的显示位置发生改变

lock = false;

if(dir == 'prev')\{

if(nowIndex == 0)\{

nowIndex = num;

$('.imgs').css('left', -nowIndex \* len);    //当图片位于最左侧时，将图片位置移回 -nowIndex \* len处

nowIndex --;

$('.imgs').animate(\{'left': -nowIndex \* len\},1000, function()\{        //设置突变的动画效果

changeIndex();

lock = true;

\});

\}else if(dir == 'next')\{

if(nowIndex == num)\{

nowIndex = 0;

$('.imgs').css('left', -nowIndex \* len);//向右同理

nowIndex ++;

$('.imgs').animate(\{'left': -nowIndex \* len\},1000, function()\{

changeIndex();

lock = true;

\});

\}else\{

nowIndex = dir;

$('.imgs').animate(\{'left': -nowIndex \* len\},400, function()\{

changeIndex();

lock = true;

\});

function changeIndex() \{

$('.dot li').css('background','\#fff');

if(nowIndex == num)\{ //索引值为0 - 4

$('.dot li').eq(0).css('background','\#f40');

\}else\{

$('.dot li').eq(nowIndex).css('background','\#f40');

function autoMove() \{

if(lock)\{

clearInterval(timer);

timer = setInterval(function()\{

move('next');

\},2000);

本次小轮播图展示效果：![70 3][]![70 4][]

希望大家好好整理下思路，能拿下轮播图。

[70]: /images/20220508/70245e7f626c48298bb9485cdfb98483.png
[70 1]: https://img-blog.csdn.net/201810082229417?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N5Z19sMDI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20220508/384e145e6199472db04e4ecde1c3d345.png
[70 3]: https://img-blog.csdn.net/20181008224749199?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N5Z19sMDI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: /images/20220508/95cb8020e1eb48b7b501cf3e3dd1e783.png