本文为大家分享了一种常见的并且比较复杂的轮播效果，就是优酷主界面的轮播图，效果图如下：
我们在书写代码之前，先分析效果图的结构：
1. 左右两个方向按钮，可以用来切换上一张与下一张。
2. 下方有分页指示器，用来标注滚动到了第几张，当然，你点击对应的按钮，也可以跳转到对应的图片。
3. 中间主要显示区域就是用来摆放需要轮播的图片。
根据上面描述，我们首先可以书写HTML代码。
一、HTML代码
<body>
<div id="youku">
<div class="anniu">
<span class="zuo"></span>
<span class="you"></span>
</div>
<ul class="tuul">
<li class="no0"><a href="#"><img src="/static/imghwm/default1.png" data-src="images/0.jpg" class="lazy" / alt="基于jquery实现的仿优酷图片轮播特效代码_jquery" ></a></li>
<li class="no1"><a href="#"><img src="/static/imghwm/default1.png" data-src="images/1.jpg" class="lazy" / alt="基于jquery实现的仿优酷图片轮播特效代码_jquery" ></a></li>
<li class="no2"><a href="#"><img src="/static/imghwm/default1.png" data-src="images/2.jpg" class="lazy" / alt="基于jquery实现的仿优酷图片轮播特效代码_jquery" ></a></li>
<li class="no3"><a href="#"><img src="/static/imghwm/default1.png" data-src="images/3.jpg" class="lazy" / alt="基于jquery实现的仿优酷图片轮播特效代码_jquery" ></a></li>
<li class="no4"><a href="#"><img src="/static/imghwm/default1.png" data-src="images/4.jpg" class="lazy" / alt="基于jquery实现的仿优酷图片轮播特效代码_jquery" ></a></li>
<li class="waiting"><a href="#"><img src="/static/imghwm/default1.png" data-src="images/5.jpg" class="lazy" / alt="基于jquery实现的仿优酷图片轮播特效代码_jquery" ></a></li>
<li class="waiting"><a href="#"><img src="/static/imghwm/default1.png" data-src="images/6.jpg" class="lazy" / alt="基于jquery实现的仿优酷图片轮播特效代码_jquery" ></a></li>
<li class="waiting"><a href="#"><img src="/static/imghwm/default1.png" data-src="images/7.jpg" class="lazy" / alt="基于jquery实现的仿优酷图片轮播特效代码_jquery" ></a></li>
<li class="waiting"><a href="#"><img src="/static/imghwm/default1.png" data-src="images/8.jpg" class="lazy" / alt="基于jquery实现的仿优酷图片轮播特效代码_jquery" ></a></li>
</ul>
<div class="xiaoyuandian">
<ul>
<li></li>
<li></li>
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
代码内容一目了然，与我上面所描述的一致；这里有两点我需要说明：
1. class为tuul的ul，也就是存放需要轮播的图片；里面的li主要有两种class：包装为 "no" 与 "waiting" 形式，其中 "no" 系列表示当前可能处于"活跃"状态的图片，而 "waiting" 表示这些图片当前处于隐藏状态，在接下来的CSS代码中就有体现。
2. 分页指示器默认设置第三个 li的class 为 cur. 因为tuul中初始的时候设置的 "活跃" 图片的个数是5张，所以默认让第三章居中显示。但不知道大家有没有疑惑，初始状态的时候，界面上面显示的图片个数为3张，所以为什么不选择第二张作为居中显示的图片？ 那是因为考虑到点击左边按钮的情况，如果选择第二张居中显示，第一张是可以看到，但第一张前面就没有图片了。当你点击左按钮的时候，就 "露馅" 了。所以整体的设计思路是：界面上面显示三张，超出界面的部分，左右各有一张，只是看不到而已。在下面的讲解中，我将详细讲解这个实现过程。
二、CSS代码
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#youku{
width: 1189px;
height: 360px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#youku ul{
list-style: none;
}
#youku .tuul li{
position: absolute;
background-color: black;
}
#youku li.waiting{
display: none;
}
#youku li img{
width: 100%;
height: 100%;
}
#youku .anniu .zuo{
position: absolute;
width: 45px;
height: 45px;
background:url(images/zuo.png) no-repeat;
top:100px;
left:10px;
z-index: 1000;
cursor: pointer;
}
#youku .anniu .you{
position: absolute;
width: 45px;
height: 45px;
background:url(images/you.png) no-repeat;
top:100px;
right:10px;
z-index: 1000;
cursor: pointer;
}
#youku li.no0{width: 174px;height:122px;left:-116px;top:100px;z-index: 777;}
#youku li.no1{width: 356px;height:223px;left:0px;top:26px;z-index: 888;}
#youku li.no2{width: 642px;height:273px;left:274px;top:0px;z-index: 999;}
#youku li.no3{width: 356px;height:223px;left:834px;top:26px;z-index: 888;}
#youku li.no4{width: 174px;height:122px;left:1097px;top:100px;z-index: 777;}
#youku li.no1 img , #youku li.no3 img{
opacity: 0.3;
}
#youku .xiaoyuandian{
width: 600px;
height: 20px;
position: absolute;
top: 312px;
left: 454px;
}
#youku .xiaoyuandian ul li{
float: left;
width: 16px;
height: 16px;
background-color: blue;
margin-right: 10px;
border-radius: 100px;
cursor: pointer;
}
#youku .xiaoyuandian ul li.cur{
background-color:green;
}
</style>
关于这里的CSS我就不作一一说明了，如果想了解更具体的话，请参考我以前写的系列 JS & JQuery. 这里，我只说明两点：
1. 对 "活跃" 图片的CSS的设置，即 #youku li.no0~no4的设置，注意到no0的left值是负数，而no1的left值是0，这就印证了上面我所表达的观点，可视范围静止状态是显示三张图片的，而其余两张图片是分别在可视范围的左右侧。注意设置各个图片的z-index值，使得有立体层次感，值越大越靠前显示。
2. 对可视范围两边的图片，设置opacity, 使得他们变暗。
设置完以上CSS代码后，剖析图如下：
三、JQuery代码
<script type="text/javascript">
$(document).ready(
function() {
//定义一个初始速度
var sudu = 600;
var shangdi = false;
//定义json
var json0 = {"width":"174px","height":"122px","left":"-116px", "top":"100px"};
var json1 = {"width":"356px","height":"223px","left":"0px", "top":"26px"};
var json2 = {"width":"642px","height":"273px","left":"274px", "top":"0"};
var json3 = {"width":"356px","height":"223px","left":"834px", "top":"26px"};
var json4 = {"width":"174px","height":"122px","left":"1097px", "top":"100px"};
var nowimg = 2;
var timer = setInterval(youanniuyewu,2000);
$("#youku").mouseenter(
function() {
clearInterval(timer);
}
);
$("#youku").mouseleave(
function() {
clearInterval(timer);
timer = setInterval(youanniuyewu,2000);
}
);
$(".you").click(youanniuyewu);
function youanniuyewu(){
if(!$(".tuul li").is(":animated") || shangdi == true){
if(nowimg < 8){
nowimg ++;
}else{
nowimg = 0;
}
$(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur");
//先交换位置
$(".no1").animate(json0,sudu);
$(".no2").animate(json1,sudu);
$(".no3").animate(json2,sudu);
$(".no4").animate(json3,sudu);
$(".no0").css(json4);
//再交换身份
$(".no0").attr("class","waiting");
$(".no1").attr("class","no0");
$(".no2").attr("class","no1");
$(".no3").attr("class","no2");
$(".no4").attr("class","no3");
//上面的交换身份，把no0搞没了！所以，我们让no1前面那个人改名为no0
if($(".no3").next().length != 0){
//如果no3后面有人，那么改变这个人的姓名为no4
$(".no3").next().attr("class","no4");
}else{
//no3前面没人，那么改变此时队列最开头的那个人的名字为no0
$(".tuul li:first").attr("class","no4");
}
//发现写完上面的程序之后，no6的行内样式还是json0的位置，所以强制：
$(".no4").css(json4);
}
}
$(".zuo").click(
function(){
if(!$(".tuul li").is(":animated") || shangdi == true){
if(nowimg > 0){
nowimg --;
}else{
nowimg = 8;
}
$(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur");
//先交换位置:
$(".no0").animate(json1,sudu);
$(".no1").animate(json2,sudu);
$(".no2").animate(json3,sudu);
$(".no3").animate(json4,sudu);
$(".no4").css(json0);
//再交换身份
$(".no4").attr("class","waiting");
$(".no3").attr("class","no4");
$(".no2").attr("class","no3");
$(".no1").attr("class","no2");
$(".no0").attr("class","no1");
//上面的交换身份，把no0搞没了！所以，我们让no1前面那个人改名为no0
if($(".no1").prev().length != 0){
//如果no1前面有人，那么改变这个人的姓名为no0
$(".no1").prev().attr("class","no0");
}else{
//no1前面没人，那么改变此时队列最后的那个人的名字为no0
$(".tuul li:last").attr("class","no0");
}
$(".no0").css(json0);
}
}
);
$("#youku .xiaoyuandian li").click(
function(){
sudu = 100; //临时把这个速度变化一下
shangdi = true; //flag
var yonghuandexuhao = $(this).index();
if(yonghuandexuhao > nowimg ){
var cishu = yonghuandexuhao - nowimg;
console.log("主人，我已经通知上帝帮你按右按钮" + cishu + "次");
for(var i = 1 ; i<= cishu ; i++){
$(".you").trigger("click"); //让上帝帮你按一次又按钮
}
}else{
var cishu = nowimg - yonghuandexuhao;
console.log("主人，我已经通知上帝帮你按左按钮" + cishu + "次");
for(var i = 1 ; i<= cishu ; i++){
$(".zuo").trigger("click"); //让上帝帮你按一次又按钮
}
}
nowimg = yonghuandexuhao;
sudu = 600; //再把速度恢复
shangdi = false;
}
);
}
);
</script>
JQuery代码中关于定时器的控制，分页按钮的点击，这里我就不介绍了，如果感兴趣的话，请参照：JS & JQuery 里面的内容。
这里我主要说明两点：
1. json0, json1, json2, json3, json4数据的定义，其初始值与CSS上面定义的一致，它的目的就是用来方便的切换各个图片的绝对位置，下面我会详细介绍到。
2. 主要讲解右按钮点击事件，也就是youanniuyewu这个方法。
2-1） nowImg索引简单的处理：
if(nowimg < 8){
nowimg ++;
}else{
nowimg = 0;
}
如果不是最后一张，点击一下 "右按钮"， 则 nowImg值加1， 如果是最后一张，则nowImg从0开始。
2-2）点击一下 "右按钮"， 关于分页指示器的处理：
$(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur");
将当前显示的图片对应的指示器按钮高亮显示，兄弟节点普通显示。
2-3）交换图片位置：
//先交换位置
$(".no1").animate(json0,sudu);
$(".no2").animate(json1,sudu);
$(".no3").animate(json2,sudu);
$(".no4").animate(json3,sudu);
$(".no0").css(json4);
前面四句话，会动画执行图片移动的效果。静止状态的时候是三张图片显示在我们眼前；运动的时候，可以想象得出最多有四张图片显示在我们眼前，上面四句代码执行过程中，剖析图如下：
即在动画执行的过程中，"no1" 的图片渐渐离开屏幕可视范围，与此同时， "no4" 的图片渐渐显示在屏幕可视范围。
而在动画执行的过程中，"no0" 的这张图片早就定位到 "no4" 的位置(此时在可视范围之外，因为这里的animate动画是异步执行的，不会延迟$(.no0).css(json4)这句代码的执行。当这一组代码执行完毕后，剖析图如下：
此时，我们再将那些 处于 "waiting" 状态的图片考虑进来，则此时的剖析图如下：
2-4）以上流程执行完毕后，是完成了一次轮播效果，但是此时各个图片的牌号顺序已经被打乱，为了使得轮播继续下去，我们应该将牌号再 "恢复" 过来。所以我们可以添加以下代码：
//再交换身份
$(".no0").attr("class","waiting");
$(".no1").attr("class","no0");
$(".no2").attr("class","no1");
$(".no3").attr("class","no2");
$(".no4").attr("class","no3");
上面的代码执行后，意味着将 上图中 "no0" 这张图片拉入到 "waiting" 区域，而其他四个的编号则依次往前推算。执行完毕后，剖析图如下：
正如上图所示，"活跃"状态的5张图片，最后一张现在也变成了 "waiting" 状态，所以需要有人替补上去，才能继续动画的执行。很显然，应该拿 "waiting" 列表的第一张，也就是 "活跃" 状态的后面一张图片 "顶替" 上去；如果后面没有 "waiting" 状态的图片了， 说明这些 "waiting" 状态的图片全部 "跑到" class 为 tuul所有列表的前面去了，那就抓取这些列表的第一张作为 "顶替者"。代码如下：
if($(".no3").next().length != 0){
//如果no3后面有人，那么改变这个人的姓名为no4
$(".no3").next().attr("class","no4");
}else{
//no3前面没人，那么改变此时队列最开头的那个人的名字为no0
$(".tuul li:first").attr("class","no4");
}
//发现写完上面的程序之后，no6的行内样式还是json0的位置，所以强制：
$(".no4").css(json4);
这里需要注意的是：虽然已经经历了很多步奏的位置信息的改变及牌号的改变，但是刚刚被拉入等待区域的那张图片在li中的与兄弟节点的位置关系并没有发生改变，只是class属性变成了 "waiting". 即此时的tuul中li的代码结构如下：
<ul class="tuul"> <li class="waiting"><a href="#"><img src="/static/imghwm/default1.png" data-src="images/0.jpg" class="lazy" / alt="基于jquery实现的仿优酷图片轮播特效代码_jquery" ></a></li> <li class="no0"><a href="#"><img src="/static/imghwm/default1.png" data-src="images/1.jpg" class="lazy" / alt="基于jquery实现的仿优酷图片轮播特效代码_jquery" ></a></li> <li class="no1"><a href="#"><img src="/static/imghwm/default1.png" data-src="images/2.jpg" class="lazy" / alt="基于jquery实现的仿优酷图片轮播特效代码_jquery" ></a></li> <li class="no2"><a href="#"><img src="/static/imghwm/default1.png" data-src="images/3.jpg" class="lazy" / alt="基于jquery实现的仿优酷图片轮播特效代码_jquery" ></a></li> <li class="no3"><a href="#"><img src="/static/imghwm/default1.png" data-src="images/4.jpg" class="lazy" / alt="基于jquery实现的仿优酷图片轮播特效代码_jquery" ></a></li> <li class="no4"><a href="#"><img src="/static/imghwm/default1.png" data-src="images/5.jpg" class="lazy" / alt="基于jquery实现的仿优酷图片轮播特效代码_jquery" ></a></li> <li class="waiting"><a href="#"><img src="/static/imghwm/default1.png" data-src="images/6.jpg" class="lazy" / alt="基于jquery实现的仿优酷图片轮播特效代码_jquery" ></a></li> <li class="waiting"><a href="#"><img src="/static/imghwm/default1.png" data-src="images/7.jpg" class="lazy" / alt="基于jquery实现的仿优酷图片轮播特效代码_jquery" ></a></li> <li class="waiting"><a href="#"><img src="/static/imghwm/default1.png" data-src="images/8.jpg" class="lazy" / alt="基于jquery实现的仿优酷图片轮播特效代码_jquery" ></a></li> </ul>
执行完以上代码后，剖析图如下：
以上就是本文的全部内容，希望对大家的学习有所帮助。
Python vs JavaScript: la courbe d'apprentissage et la facilité d'utilisationApr 16, 2025 am 12:12 AMPython convient plus aux débutants, avec une courbe d'apprentissage en douceur et une syntaxe concise; JavaScript convient au développement frontal, avec une courbe d'apprentissage abrupte et une syntaxe flexible. 1. La syntaxe Python est intuitive et adaptée à la science des données et au développement back-end. 2. JavaScript est flexible et largement utilisé dans la programmation frontale et côté serveur.
Python vs JavaScript: communauté, bibliothèques et ressourcesApr 15, 2025 am 12:16 AMPython et JavaScript ont leurs propres avantages et inconvénients en termes de communauté, de bibliothèques et de ressources. 1) La communauté Python est amicale et adaptée aux débutants, mais les ressources de développement frontal ne sont pas aussi riches que JavaScript. 2) Python est puissant dans les bibliothèques de science des données et d'apprentissage automatique, tandis que JavaScript est meilleur dans les bibliothèques et les cadres de développement frontaux. 3) Les deux ont des ressources d'apprentissage riches, mais Python convient pour commencer par des documents officiels, tandis que JavaScript est meilleur avec MDNWEBDOCS. Le choix doit être basé sur les besoins du projet et les intérêts personnels.
De C / C à JavaScript: comment tout cela fonctionneApr 14, 2025 am 12:05 AMLe passage de C / C à JavaScript nécessite de s'adapter à la frappe dynamique, à la collecte des ordures et à la programmation asynchrone. 1) C / C est un langage dactylographié statiquement qui nécessite une gestion manuelle de la mémoire, tandis que JavaScript est dynamiquement typé et que la collecte des déchets est automatiquement traitée. 2) C / C doit être compilé en code machine, tandis que JavaScript est une langue interprétée. 3) JavaScript introduit des concepts tels que les fermetures, les chaînes de prototypes et la promesse, ce qui améliore la flexibilité et les capacités de programmation asynchrones.
Moteurs JavaScript: comparaison des implémentationsApr 13, 2025 am 12:05 AMDifférents moteurs JavaScript ont des effets différents lors de l'analyse et de l'exécution du code JavaScript, car les principes d'implémentation et les stratégies d'optimisation de chaque moteur diffèrent. 1. Analyse lexicale: convertir le code source en unité lexicale. 2. Analyse de la grammaire: générer un arbre de syntaxe abstrait. 3. Optimisation et compilation: générer du code machine via le compilateur JIT. 4. Exécuter: Exécutez le code machine. Le moteur V8 optimise grâce à une compilation instantanée et à une classe cachée, SpiderMonkey utilise un système d'inférence de type, résultant en différentes performances de performances sur le même code.
Au-delà du navigateur: Javascript dans le monde réelApr 12, 2025 am 12:06 AMLes applications de JavaScript dans le monde réel incluent la programmation côté serveur, le développement des applications mobiles et le contrôle de l'Internet des objets: 1. La programmation côté serveur est réalisée via Node.js, adaptée au traitement de demande élevé simultané. 2. Le développement d'applications mobiles est effectué par le reactnatif et prend en charge le déploiement multiplateforme. 3. Utilisé pour le contrôle des périphériques IoT via la bibliothèque Johnny-Five, adapté à l'interaction matérielle.
Construire une application SaaS multi-locataire avec next.js (intégration backend)Apr 11, 2025 am 08:23 AMJ'ai construit une application SAAS multi-locataire fonctionnelle (une application EdTech) avec votre outil technologique quotidien et vous pouvez faire de même. Premièrement, qu'est-ce qu'une application SaaS multi-locataire? Les applications saas multi-locataires vous permettent de servir plusieurs clients à partir d'un chant
Comment construire une application SaaS multi-locataire avec Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AMCet article démontre l'intégration frontale avec un backend sécurisé par permis, construisant une application fonctionnelle EdTech SaaS en utilisant Next.js. Le frontend récupère les autorisations des utilisateurs pour contrôler la visibilité de l'interface utilisateur et garantit que les demandes d'API adhèrent à la base de rôles
JavaScript: Explorer la polyvalence d'un langage WebApr 11, 2025 am 12:01 AMJavaScript est le langage central du développement Web moderne et est largement utilisé pour sa diversité et sa flexibilité. 1) Développement frontal: construire des pages Web dynamiques et des applications à une seule page via les opérations DOM et les cadres modernes (tels que React, Vue.js, Angular). 2) Développement côté serveur: Node.js utilise un modèle d'E / S non bloquant pour gérer une concurrence élevée et des applications en temps réel. 3) Développement des applications mobiles et de bureau: le développement de la plate-forme multiplateuse est réalisé par réact noral et électron pour améliorer l'efficacité du développement.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
DVWA
Damn Vulnerable Web App (DVWA) est une application Web PHP/MySQL très vulnérable. Ses principaux objectifs sont d'aider les professionnels de la sécurité à tester leurs compétences et leurs outils dans un environnement juridique, d'aider les développeurs Web à mieux comprendre le processus de sécurisation des applications Web et d'aider les enseignants/étudiants à enseigner/apprendre dans un environnement de classe. Application Web sécurité. L'objectif de DVWA est de mettre en pratique certaines des vulnérabilités Web les plus courantes via une interface simple et directe, avec différents degrés de difficulté. Veuillez noter que ce logiciel
VSCode Windows 64 bits Télécharger
Un éditeur IDE gratuit et puissant lancé par Microsoft
SublimeText3 Linux nouvelle version
Dernière version de SublimeText3 Linux
Télécharger la version Mac de l'éditeur Atom
L'éditeur open source le plus populaire
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
