Maison > interface Web > js tutoriel > Comment implémenter un carrousel dans Jquery

Comment implémenter un carrousel dans Jquery

零到壹度
Libérer: 2018-03-20 10:22:46
original
1517 Les gens l'ont consulté

Cet article vous présente principalement les étapes spécifiques et les compétences opérationnelles associées pour implémenter le carrousel dans Jquery. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

<p class=”slideShow”>
<p class=”nav-t”>
<ul>
<li><a href=”#” target=”_blank”><img src=”images/1.png” alt=””></a></li>
<li><a href=”#” target=”_blank”><img src=”images/2.png” alt=””></a></li>
<li><a href=”#” target=”_blank”><img src=”images/3.png” alt=””></a></li>
<li><a href=”#” target=”_blank”><img src=”images/4.png” alt=””></a></li>
<li><a href=”#” target=”_blank”><img src=”images/5.png” alt=””></a></li>
</ul>
<p class=”nav-b”>
<span class=”active”>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</p>
</p>
</p>
<script type=”text/javascript” src=”jquery-min.js”></script>
<script type=”text/javascript” src=”lunbo.js”></script>
Copier après la connexion

Code CSS

<style>
.slideShow{
border:0px solid blue;
width:600px;
height:450px;
margin:50px auto;
position:relative;
}
.nav-t{
border:0px solid red;
width:580px;
height:430px;
margin:8px auto;
position:relative;
overflow:hidden;
}
.nav-t ul{
border:0px solid green;
list-style:none;
width:3000px;
height:430px;
margin:0;
padding:0;
position:relative;
}
.nav-t li{
height:427px;
width:580px;
float:left;
}
.nav-b{
position:absolute;
top:390px;
left:220px;
cursor:default;
}
.nav-b span{
margin-right:5px;
border:1px solid red;
padding:0 6px;
border-radius:12px;
color:#fff;
background:rgba(132,125,119,0.5);
cursor:pointer;
}
.nav-b span.active{
background:rgba(0,0,0,0.8);
}
</style>
Copier après la connexion

Code Jquery

$(function(){
$(function(){
var slide=$(“.slideShow”),
navt=slide.find(“.nav-t”),
ul=navt.find(“ul”),
navbs=slide.find(“.nav-b span”),
onwidth=ul.find(“li”).eq(0).width(), //获取ul下的li宽度
timer=null,
inow=0;
navt.hover(function(){
clearInterval(timer); //鼠标移上去,清除掉自动轮播功能,即定时轮播},
autoPlay);
navbs.on(“click”,function(){ //点击轮播事件
var me=$(this);
inow=me.index();  //此处变量用的与自动轮播函数里的相同,为的是能在随便点击后,自动轮播时按照我们点击了的继续向后轮播,这叫动态实时
ul.animate({left:-inow*onwidth},0.01); //ul向左移动从而使得下一个li显示到p的当前窗口
navbs.removeClass(“active”);   //清除掉上一个点击按钮的样式
me.addClass(“active”);     //为当前被点击的按钮添加第一个按钮样式
});
autoPlay();
function autoPlay(){     //自动轮播函数
timer=setInterval(function(){   //开定时器
inow++;if(inow==navbs.length){    //判断是否到了最后一张,若是到了,返回到第一张
inow=0}navbs.eq(inow).trigger(“click”); //根据定时的时间用span的索引自动调用click事件,trigger为jQuery的自动调用函数
},3000);
}
});
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal