用Jquery 方法写轮播图

最新推荐文章于 2024-03-14 19:48:19 发布
最新推荐文章于 2024-03-14 19:48:19 发布
阅读量6k 收藏 9
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yllmyl/article/details/80598694
版权

jq传统轮播图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>


<style>
*{
margin: 0;
padding: 0;
}


.box{
width: 560px;
height: 300px;
border: 5px solid gray;
margin: 100px auto;
position: relative;
overflow: hidden;
}


.m_unit{
width: 10000px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
.m_unit ul{
overflow: hidden;
}
.m_unit ul li{
list-style: none;
float: left;
width: 560px;
height: 300px;
}


/*左右按钮*/
.btn span{
width: 55px;
height: 55px;
background: url('images/dog/btnL.png');
position: absolute;
border-radius:  10px;
top: 50%;
margin-top: -28px;
}


.btn span.right{
background: url('images/dog/btnR.png');
right: 0;
}


/*小圆点*/
.circle ul li{
list-style: none;
float: left;
width: 20px;
height: 20px;
background: orange;
margin-right: 10px;
border-radius: 50%;
}


.circle ul{
overflow: hidden;
}


.circle{
position: absolute;
bottom: 10px;
right: 10px;
}


.circle ul li.current{
background: red;
}
</style>
</head>
<body>
<div class="box" id='box'>
<div class="m_unit" id='m_unit'>
<ul>
<li><a href="#"><img src="images/dog/0.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/4.jpg" alt=""></a></li>
</ul>
</div>


<div class="btn">
<span class='left' id='leftBtn'></span>
<span class='right' id='rightBtn'></span>
</div>


<div class="circle" id='circle'>
<ul>
<li class='current'></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>


<script src='js/jquery-1.12.3.min.js'></script>


<script>


// 获取图片的长度
var imgLength = $('#m_unit ul li').length;


// 拼接假0
$('#m_unit ul').append($('#m_unit ul li').eq(0).clone());


// 信号量
var idx = 0;


// 自动轮播
var timer = setInterval(rightBtnHandler,2000);


// 鼠标进入box
$('#box').mouseenter(function() {
clearInterval(timer);
});


// 鼠标离开box
$('#box').mouseleave(function() {
timer = setInterval(rightBtnHandler,2000);
});


// 右按钮点击事件
$('#rightBtn').click(rightBtnHandler);
function rightBtnHandler(){
idx++;
$('#m_unit').animate({'left': -560 * idx}, 1000, function(){
if(idx > imgLength-1){
idx = 0;
// $('#m_unit').css('left','0px');
$(this).css('left', '0px');
}
});


circleChange();
}




// 左按钮点击事件
$('#leftBtn').click(function(){
idx--;


if(idx < 0){
idx = imgLength - 1;
$('#m_unit').css('left', -560 * imgLength);
}


$('#m_unit').animate({'left': -560 * idx}, 1000);


circleChange();
});

// 小圆点点击事件
$('#circle ul li').each(function(i){
// console.log(i);
$(this).click(function(){
idx = i;
$('#m_unit').animate({'left': -560 * idx}, 1000);
circleChange();
});
});


// 小圆点更改
function circleChange(){
var idxx = idx;
if(idxx > imgLength-1) idxx = 0;
// 排他
$('#circle ul li').eq(idxx).css('background','red').siblings().css('background','orange');
}
</script>
</body>
</html>

jq呼吸轮播图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>


<style>
*{
margin: 0;
padding: 0;
}


.box{
width: 560px;
height: 300px;
border: 5px solid gray;
margin: 100px auto;
position: relative;
overflow: hidden;
}


.m_unit{
width: 10000px;
height: 300px;

}
.m_unit ul{
overflow: hidden;
}
.m_unit ul li{
list-style: none;
float: left;
width: 560px;
height: 300px;
position: absolute;
top: 0;
left: 0;
opacity: 0;
filter: alpha(opacity=0);


}
.m_unit ul li.active{
opacity: 1;
filter: alpha(opacity=100);
}


/*左右按钮*/
.btn span{
width: 55px;
height: 55px;
background: url('images/dog/btnL.png');
position: absolute;
border-radius:  10px;
top: 50%;
margin-top: -28px;
}


.btn span.right{
background: url('images/dog/btnR.png');
right: 0;
}


/*小圆点*/
.circle ul li{
list-style: none;
float: left;
width: 20px;
height: 20px;
background: orange;
margin-right: 10px;
border-radius: 50%;
}


.circle ul{
overflow: hidden;
}


.circle{
position: absolute;
bottom: 10px;
right: 10px;
}


.circle ul li.current{
background: red;
}
</style>
</head>
<body>
<div class="box" id='box'>
<div class="m_unit" id='m_unit'>
<ul>
<li class="active"><a href="#"><img src="images/dog/0.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/4.jpg" alt=""></a></li>
</ul>
</div>


<div class="btn">
<span class='left' id='leftBtn'></span>
<span class='right' id='rightBtn'></span>
</div>


<div class="circle" id='circle'>
<ul>
<li class='current'></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>


<script src='js/jquery-1.12.3.min.js'></script>
<script>
var m_unit = $('#m_unit ul li');
// $('#m_unit ul').eq(0).append($('#m_unit ul li ').clone());


var idx =0;
var timer = setInterval(rightBtnHandler,2000);


$('#box').mouseenter =function(){
clearInterval(timer);
}
$('#box').mouseleave = function(){
timer = setInterval(rightBtnHandler,2000);
}
$('#rightBtn').click(rightBtnHandler);
function rightBtnHandler(){
$('#m_unit ul li').eq(idx).animate({'opacity':0},1000);
idx++;
if(idx > m_unit.length-1 ) idx =0;
$('#m_unit ul li').eq(idx).animate({'opacity':1},1000);
circleChange();
}
$('#leftBtn').click(function(){
$('#m_unit ul li').eq(idx).animate({'opacity':0},1000);
idx --;
if(idx < 0){
idx = m_unit.length-1;
}
$('m_unit ul li').eq(idx).animate({"opacity":1},1000);
circleChange();
});
$("#circle ul li").each(function(i){
$(this).click(function(){
$("#m_unit ul li").eq(idx).animate({'opacity':0},1000);
idx = i;
$("#m_unit ul li").eq(idx).animate({'opacity':1},1000);
circleChange();
})
})

function circleChange(){
$("#circle ul li").eq(idx).css('background','red').siblings().css('background','orange');


}

</script>
</body>

</html>

jq三位置轮播图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>


<style>
*{
margin: 0;
padding: 0;
}


.box{
width: 560px;
height: 300px;
border: 5px solid gray;
margin: 100px auto;
position: relative;
/*overflow: hidden;*/
}


.m_unit{
width: 10000px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
.m_unit ul{
overflow: hidden;
}
.m_unit ul li{
list-style: none;
position: absolute;
top: 0px;
left: 560px;
width: 560px;
height: 300px;

}
.m_unit ul li.current{
left: 0px;
}


/*左右按钮*/
.btn span{
width: 55px;
height: 55px;
background: url('images/dog/btnL.png');
position: absolute;
border-radius:  10px;
top: 50%;
margin-top: -28px;
}


.btn span.right{
background: url('images/dog/btnR.png');
right: 0;
}


/*小圆点*/
.circle ul li{
list-style: none;
float: left;
width: 20px;
height: 20px;
background: orange;
margin-right: 10px;
border-radius: 50%;
}


.circle ul{
overflow: hidden;
}


.circle{
position: absolute;
bottom: 10px;
right: 10px;
}


.circle ul li.current{
background: red;
}
</style>
</head>
<body>
<div class="box" id='box'>
<div class="m_unit" id='m_unit'>
<ul>
<li class='current'><a href="#"><img src="images/dog/0.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/4.jpg" alt=""></a></li>
</ul>
</div>


<div class="btn">
<span class='left' id='leftBtn'></span>
<span class='right' id='rightBtn'></span>
</div>


<div class="circle" id='circle'>
<ul>
<li class='current'></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>


<script src ='js/jquery-1.12.3.min.js'></script>
<script>
//获取所有图片
    var imgLength=$(".m_unit ul li").length;
    // //节流 
    // var timer=setInterval(rightHandler,2000);
    // //鼠标进入事件
    // $(".box").mouseenter(function(){
    //     clearInterval(timer);
    // });
    // //鼠标移除事件
    // $(".box").mouseleave(function(){
    //     timer=setInterval(rightHandler,2000);
    // });
    // //信号量
    var idx=0;
    // 右按钮点击事件click
    $(".right").click(rightHandler);
    function rightHandler(){
    $('.m_unit ul li').eq(idx).animate({'left': -560}, 1000);
    idx ++;
    if(idx == imgLength)idx=0;
    // console.log(idx);
    $('.m_unit ul li').eq(idx).css('left','560px');
    $('.m_unit ul li').eq(idx).animate({'left': 0}, 1000);  
    circleChange();
    }
    $('.left').click(function(){
    $('.m_unit ul li ').eq(idx).animate({'left':560},1000);
    idx --;
    if(idx<0)idx = imgLength-1;
    $('.m_unit ul li').eq(idx).css('left','-560px');
    $('.m_unit ul li').eq(idx).animate({'left': 0}, 1000);
    circleChange();
   
    })
    $("#circle ul li").each(function(i){
$(this).click(function(){
if(idx>$(this).index()){
//this.index是当前点击点所对应的图 idx是当前显示的图 
//先把this移动-560
//然后this 从-560移动到0 
//当前显示的图从0 到560
$(".m_unit ul li").eq($(this).index()).css({'left':-560});
$(".m_unit ul li").eq($(this).index()).animate({'left':'0px'},1000);
$(".m_unit ul li").eq(idx).animate({'left':'560px'},1000);
}else{
$(".m_unit ul li").eq($(this).index()).css({'left':560});
$(".m_unit ul li").eq($(this).index()).animate({'left':"0px"},1000);
$(".m_unit ul li").eq(idx).animate({'left':'-560px'},1000); }
idx = i;
circleChange();
});
});


  function circleChange(){
$("#circle ul li").eq(idx).css('background','red').siblings().css('background','orange');


}

</script>
</body>

</html>

jq传送带轮播图



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>


<style>
*{
margin: 0;
padding: 0;
} 


.box{
width: 560px;
height: 300px;
border: 5px solid red;
margin: 100px auto;
position: relative;
/*overflow: hidden;*/
}


.imglist ul li{
display: none;
}


.m_unit{
width: 1120px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}


.m_unit li{
width: 560px;
height: 300px;
list-style: none;
float: left;
}


.btn span{
width: 55px;
height: 55px;
position: absolute;
top: 50%;
margin-top: -27px;
}


.btn .left{
background: url('images/dog/btnL.png');
left: 10px;
}


.btn .right{
background: url('images/dog/btnR.png');
right: 10px;
}


.circle{
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -70px;
}


.circle ul li{
list-style: none;
width: 20px;
height: 20px;
margin-right: 10px;
background: orange;
border-radius: 50%;
float: left;
}


.circle ul li.current{
background: red;
}
</style>
</head>
<body>
<div class="box">

<div class="imglist" id='imglist'>
<ul>
<li><a href="#"><img src="images/dog/0.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/4.jpg" alt=""></a></li>
</ul>
</div>

<!-- 传送带 -->
<div class="m_unit" id='m_unit'>

</div>


<div class="btn">
<span class="left" id='leftBtn'></span>
<span class="right" id='rightBtn'></span>
</div>


<div class="circle" id='circle'>
<ul>
<li class='current'></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>


</div>


<script src='js/jquery-1.12.3.min.js'></script>
<script>
var imgs = $('#imglist ul li');
var m_unit =$('#m_unit');
m_unit.append(imgs.eq(0).clone());
m_unit.append(imgs.eq(1).clone());


// $('#m_unit ul').eq(0).append($('#m_unit ul li ').clone());


var idx =0;
// var timer = setInterval(rightBtnHandler,2000);


// $('#box').mouseenter =function(){
// clearInterval(timer);
// }
// $('#box').mouseleave = function(){
// timer = setInterval(rightBtnHandler,2000);
// }
$("#rightBtn").click(rightBtnHandler);
function rightBtnHandler(){
$('#m_unit').css({'left':'0px'});
$('#m_unit').empty();
m_unit.append(imgs.eq(idx).clone());
    idx++;
    if(idx>imgs.length-1)idx=0;
    m_unit.append(imgs.eq(idx).clone());




$('#m_unit').animate({'left':-560},1000);
changeCircle();
}
$('#leftBtn').click(function(){


$('#m_unit').css({'left':'-560px'});
$('#m_unit').empty();
m_unit.append(imgs.eq(idx).clone());
    idx--;
    if(idx<0)idx=imgs.length-1;
    m_unit.prepend(imgs.eq(idx).clone());
$('#m_unit').animate({'left':0},1000);
changeCircle();
});


// 更改小圆点

function changeCircle(){
// 排他
var idxx = idx;
if(idxx>imgs.length-1)idxx=0;
$(".circle li").eq(idxx).css('background','red').siblings().css('background','orange');
}
</script>
</body>

</html>

jq间歇模型2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>


<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 200px;
background: #ddd;
margin: 100px auto;
position: relative;
overflow: hidden;
}


ul{
position: absolute;
top: 0;
left: 0;
}


li{
list-style: none;
width: 300px;
height: 50px;
line-height: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<div id ='box'>
<ul>
<li>沈同学 阿里**网络有限公司</li>
<li>曹同学 *度网络有限公司</li>
<li>朱同学 *讯网络有限公司</li>
<li>杨同学 *60网络有限公司</li>
<li>杨同学 *东网络有限公司</li>
<li>曹同学 *易网络有限公司</li>
</ul>
</div>


<script src='js/jquery-1.12.3.min.js'></script>
<script>
var uls = $('#box ul');
var lis =$("#box ul li");


// 内容翻倍
  uls.append(lis.clone());
  console.log(lis.length);
  var idx = 0;
  setInterval(function(){
  idx++;
  $("#box ul ").animate({'top':-50*idx},1000,function(){
  if(idx==lis.length){
  idx = 0;
  $('#box ul').css({"top":"0"});
  }
  })
  },2000);
</script>
</body>
</html>

柳LL
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现轮播图代码
日常笔记/总结/系列知识梳理
12-20 1135
一个简单的jQuery轮播图代码，首先，定义了一个slideshow-container的div容器，其中包含了所有轮播图幻灯片。每个幻灯片都包含一个mySlides的类名，并且使用CSS将其隐藏。在showSlides()函数中，遍历所有幻灯片并将它们隐藏，然后显示当前索引的幻灯片。最后，我们使用setTimeout()函数来每隔2秒钟调用showSlides()函数，从而实现了轮播效果。它使事情变得更简单，使用jQuery能够以最小的努力在Web上构建复杂的交互性。
用jquery写轮播图
YSRMHLJY的博客
10-08 229
1.定义count变量 图片的张数 定义变量index=1图片的下标 获取小圆点 2.自动轮播 setinterval定时器 定时3秒后图片自动切换 nextpage（）切换到下一张 3.鼠标移入是左右切换的按钮显现 且自动轮播停止 鼠标移出是左右切换按钮隐藏 自动轮播继续 4.点击左按钮时图片切换到下一张 点击右按钮时图片切换到上一张 5.获取小圆点集合数组的长度 对小圆点进行循环遍历绑定 删除第一个小圆点的class属性...
用jQuery实现轮播图
m0_59302271的博客
03-14 1039
使用jQuery实现简单的轮播图
50行Jquery代码写轮播图
TheFlangeUndead的博客
07-13 834
50行Jquery代码写轮播图
使用jQuery实现图片轮播与切换功能
weixin_45539338的博客
06-20 1899
使用jQuery实现图片轮播与切换功能
用jquery来实现轮播图效果
xhdjdje的博客
04-14 5288
效果展示 首先就是布局，在这里面
jquery手写广告轮播图，无限循环功能
weixin_43452154的博客
12-08 422
在很多情况下，我们都需要开发广告轮播图，当我们进行页面的功能开发时，采用轮播图来实现也行，但是很多情况下，我们只需要简单的控制轮播循环轮播展示即可，所以用jq开开发广告轮播波，自定义方式比较灵活，而且还简单，只需要几行代码就可以实现广告轮播。
使用Jquery实现轮播图
jiaohuizhuang6019的博客
09-14 1833
使用Jquery实现轮播图
jquery手写轮播图_jquery 轮播图怎么写
weixin_35942549的博客
01-12 264
jquery轮播图的实现方法：首先创建一个放置的盒子“p.focus”；然后将overflow设置为hidden；接着通过javascript实现点击左右翻页切换图片的功能即可。本教程操作环境：windows7系统、jquery1.10.0版本，该方法适用于所有品牌电脑。jQuery实现轮播图效果许多电商网站或者门户网站上都会有一个焦点图自动轮播的广告，下面将亲自用jQuery实现一个这个效果。主...
jquery手写轮播图_用jQuery如何手写一个简单的轮播图？（附代码）
weixin_39888807的博客
12-19 205
用jQuery如何手写一个简单的轮播图？下面本篇文章通过代码示例来给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。用 jQuery 手写轮播图先上个效果截图：主要包含以下功能点：* 1、页面加载完，自动循环翻页* 2、翻页按钮，翻页* 3、定点翻页* 4、翻页时同步圆点状态* 5、鼠标进入，停止自动翻页* 6、快速点击翻页的bug(加 isPaging 标志)主要包...
jQuery手风琴图片轮播切换
04-07
jQuery提供了多种实现轮播的方法，如使用`.fadeIn()`和`.fadeOut()`实现淡入淡出效果，或者使用`.slideToggle()`实现滑动切换。例如： ```javascript var index = 0; var slides = $("#carousel .slide"); ...
jquery图片轮播图多图切换效果（带小图左右箭头）
03-16
jQuery提供了一系列的动画方法，如`fadeIn`、`fadeOut`等，可以用来实现平滑的图片切换效果。同时，Swiper也内置了丰富的过渡动画效果，可以根据需求进行设置。 总的来说，“jquery图片轮播图多图切换效果（带小图...
jQuery图片轮播切换
07-24
它利用JavaScript库jQuery的强大功能，为用户提供平滑、响应式的图片切换体验。在本篇文章中，我们将深入探讨jQuery图片轮播切换的工作原理、实现方法以及相关技术点。 首先，jQuery是一个轻量级的JavaScript库，它...
简单的jquery层叠图片滚动轮播切换效果代码,带按钮的滚动轮播图
06-13
总之，这个项目提供了一个基本的jQuery图片轮播解决方案，结合HTML和CSS，能够实现带按钮的图片切换效果。对于初学者来说，这是一个很好的实践项目，可以学习到如何使用jQuery操作DOM，处理事件，以及实现动态效果。...
jQuery图片自动轮播切换展示特效
04-07
总的来说，jQuery图片自动轮播切换展示特效涉及到的选择器使用、事件处理、动画效果以及插件化开发都是jQuery应用中的重要知识点。通过掌握这些技术，你可以轻松创建出富有动态效果和交互性的网页元素，提升网站的...
聊天室、websocket、socket.io、毕业设计.zip
07-27
聊天室、websocket、socket.io、毕业设计.zip
微麦电影购票小程序，分为三部分-小程序端-商家（影院）后台与官方后台.zip
07-27
微麦电影购票小程序，分为三部分-小程序端-商家（影院）后台与官方后台.zip
防盗门进销存管理系统（SDIMS）.zip
07-27
防盗门进销存管理系统（SDIMS）.zip
Matlab实现蝗虫优化算法GOA-CNN-BiLSTM-Mutilhead-Attention多变量时序预测.rar
最新发布
07-27
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
用jquery写轮播图 手动点击切换图片
06-01
好的，以下是一个简单的用 jQuery 实现手动点击切换图片的轮播图代码： HTML 代码： ```html <div class="slider"> <div class="slider-wrapper"> <img src="img/img1.jpg"> <img src="img/img2.jpg"> <img src="img/img3.jpg"> </div> <div class="slider-nav"> <span class="slider-nav-item"></span> <span class="slider-nav-item"></span> <span class="slider-nav-item"></span> </div> </div> ``` CSS 代码： ```css .slider { position: relative; width: 100%; height: 400px; overflow: hidden; } .slider-wrapper { position: absolute; width: 300%; height: 100%; left: -100%; } .slider-wrapper img { float: left; width: 33.3333%; height: 100%; } .slider-nav { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); } .slider-nav-item { display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background-color: #ccc; cursor: pointer; } .slider-nav-item.active { background-color: #f00; } ``` JavaScript 代码： ```javascript $(function() { var $slider = $('.slider'); var $wrapper = $('.slider-wrapper'); var $nav = $('.slider-nav'); var $navItem = $('.slider-nav-item'); var currentIndex = 0; var timer; // 初始化 $navItem.eq(currentIndex).addClass('active'); $wrapper.css('left', -currentIndex * 100 + '%'); // 点击导航切换图片 $navItem.on('click', function() { var index = $(this).index(); if (index === currentIndex) { return; } $navItem.eq(currentIndex).removeClass('active'); $navItem.eq(index).addClass('active'); $wrapper.animate({left: -index * 100 + '%'}, 500); currentIndex = index; }); // 自动轮播 function autoPlay() { timer = setInterval(function() { currentIndex = (currentIndex + 1) % $navItem.length; $navItem.eq(currentIndex).trigger('click'); }, 2000); } autoPlay(); // 鼠标悬停暂停轮播 $slider.on('mouseenter', function() { clearInterval(timer); }).on('mouseleave', function() { autoPlay(); }); }); ``` 这段代码实现了一个具有导航按钮的轮播图，点击导航按钮可以切换图片，同时具有自动轮播和鼠标悬停暂停轮播的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值