用ajax实现轮播器,jQuery实现简单的轮播图

客官°小女子只卖身不卖艺 2022-09-03 11:16 143阅读 0赞

先看效果，如果是你想要的，可以看看

![d3719bc5e552d342a6da8a41ace054f9.gif][]

总体思路：

1.自动轮播

2.指定轮播

3.左右翻动

详细步骤：jQuery部分

设置第一张图片显示，其他的兄弟元素隐藏

自动轮播的时候，指定第一张的索引为 i=0，然后 i++, 使其对应的 i 索引的图片显示，其他的隐藏，当 i=5(即第六张图片的时候，使其为第一张即可，否则我们没有第六张图片就不显示了)。

指定图片轮播，就是鼠标移动到白圈上显示对应的图片，并计时器停止，我们可以看看图片上的内容，有的轮播图计时器还是继续的，看不了什么内容；鼠标离开则继续轮播。

左右翻动，左就是往左轮播，当 i = -1的时候使其为 4 (应该能知道什么意思吧，道理同自动轮播的括号里的内容)，往右轮播同左。

好了不多说了，直接上代码

html

![Image 1][]

css

\*\{

margin:0px;

padding:0px;

list-style-type:none;

\#banner\{

width:520px;

height:280px;

position:absolute;

top:50%;

margin-top:-140px;

left:50%;

margin-left:-260px;

.pic img\{

position:absolute;

.tabs\{

position:absolute;

bottom:10px;

left:200px;

.tabs li\{

width:20px;

height:20px;

border:2px solid \#fff;

float:left;

margin-left:5px;

border-radius:100%;

.btn\{

width:30px;

height:50px;

background-color:rgba(0,0,0,.5);

color:\#fff;

font-size:30px;

line-height:50px;

text-align:center;

position:absolute;

top:50%;

margin-top:-25px;

cursor:pointer;

.btn:hover\{

background-color:rgba(0,0,0,.8);

color:red;

.btn1\{

left:0;

.btn2\{

right:0;

.bg\{

background-color:red;

var i=0;

var Timer;

$(function()\{

$(".picImg").eq(0).show().siblings().hide(); //默认第一张图片显示，其他的隐藏

//自动轮播

TimerBanner();

//点击红圈

$(".tabs li").hover(function()\{ //鼠标移动上去

clearInterval(Timer); //让计时器暂时停止 清除计时器

i=$(this).index(); //获取该圈的索引

showPic(); //调用显示图片的方法，显示该索引对应的图片

\},function()\{ //鼠标离开

TimerBanner(); //继续轮播 计时器开始

\});

//点击左右按钮

$(".btn1").click(function()\{

clearInterval(Timer);

i--; //往左

if(i==-1)\{

i=4;

showPic();

TimerBanner();

\});

$(".btn2").click(function()\{

clearInterval(Timer);

i++; //往右

if(i==5)\{

i=0;

showPic();

TimerBanner();

\});

//轮播部分

function TimerBanner()\{

Timer = setInterval(function()\{

i++;

if(i==5)\{

i=0;

showPic()

\},1000);

//显示图片

function showPic()\{

$(".picImg").eq(i).show().siblings().hide();

$(".tabs li").eq(i).addClass("bg").siblings().removeClass("bg");

思路也数说了，这个实例很简单，代码也有详细的注释，有不懂得随时呼叫我，看到即回，

下载链接：

链接：https://pan.baidu.com/s/1Ar7vP\_cPUAwmw6UipnnzFg 密码：ypol

[d3719bc5e552d342a6da8a41ace054f9.gif]: /images/20220829/48b47cb200c64056b5738a8d0f0dc398.png
[Image 1]:

用ajax实现轮播器,jQuery实现简单的轮播图

发表评论取消回复

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

相关阅读

相关 jQuery实现轮播图

相关 HTML实现jquery实现轮播图,jquery+css实现简单的图片轮播效果

相关 html中简单轮播图实现原理,jQuery实现一个简单的轮播图

相关实现简单轮播器

相关用ajax实现轮播器,jQuery实现简单的轮播图

相关 jquery简单轮播图实现

相关 jquery 实现轮播图

相关 jQuery实现轮播图

相关 jQuery实现轮播图

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