Maison > Article > interface Web > js réalise l'image de focus de la bannière qui commute trois images (textes) ensemble_javascript skills

js réalise l'image de focus de la bannière qui commute trois images (textes) ensemble_javascript skills

WBOYoriginal: 2016-05-16 15:42:381223parcourir

L'exemple de cet article décrit comment js implémente une image de focus de bannière qui commute trois images (textes) ensemble. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Il s'agit d'une image de bannière qui commute trois images (textes) ensemble sur la base de JavaScript. Elle comporte des flèches gauche et droite. Avec la même image de mise au point, les images dans trois positions peuvent être commutées en même temps et les descriptions de texte peuvent être intercalées. au milieu des images.
Opération de rendu : -------------------Voir l'effet Télécharger le code source-------------- --------

Conseils : Si le navigateur ne fonctionne pas correctement, vous pouvez essayer de changer de mode de navigation.
Le code du js partagé par tout le monde pour réaliser l'image de focus de la bannière basculant entre trois images (textes) en même temps est le suivant

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三张图（文）片一起切换的banner焦点图</title>
<link href="css/jiaobenzhijia.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div class="lanrenzhijia">
 <div class="b b1">
 <ul class="lst lst1">
 <li><img src="images/1.jpg" /></li>
 <li><img src="images/2.jpg" /></li>
 <li><img src="images/3.jpg" /></li>
 <li><img src="images/4.jpg" /></li>
 <li><img src="images/5.jpg" /></li>
 </ul>
 </div>
 <div class="b b2">
 <ul class="lst lst2">
 <li><img src="images/2.jpg" /></li>
 <li><img src="images/3.jpg" /></li>
 <li><img src="images/4.jpg" /></li>
 <li><img src="images/5.jpg" /></li>
 <li><img src="images/1.jpg" /></li>
 </ul>
 </div>
 <div class="b3">
 <ul class="lst lst3">
 <li><img src="images/3.jpg" /></li>
 <li><img src="images/4.jpg" /></li>
 <li><img src="images/5.jpg" /></li>
 <li><img src="images/1.jpg" /></li>
 <li><img src="images/2.jpg" /></li>
 </ul>
 </div>
 <div class="cen">
 <h3 class="cenTit">美文摘抄</h3>
 <p class="wrd">花是如此柔弱，再美再艳，依然经不起朝来寒雨晚来风，春红谢匆匆，只剩满怀愁情。花却又是美丽的战士，风雨中尽管渐渐绿肥红瘦，终究不肯低头。生命也是一样，像精致的玻璃酒杯，常常经不起天灾人祸的撞击，粉碎成一地璀璨，每一片都是透明的心，生命又常常像昙花，用许多年的泪与汗，掺上心血浇灌，才会有笑看天下的一刻…<a target="_blank" href="http://www.jb51.net/">【查看更多】</a></p>
 </div>
 <div class="cen1">JS网页特效收集网站</div>
 <span class="arr lef"></span>
 <span class="arr rig"></span>
</div>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.tools.min.js"></script>
<script>
$(function(){

 $(".b").scrollable({
 size:1,
 items:".b ul",
 loop:true,
 next:".lef",
 prev:".rig",
 clickable:false,
 circular:true
 }); 
 
 $(".b3").scrollable({
 size:1,
 items:".b3 ul",
 loop:true,
 next:".lef",
 prev:".rig",
 vertical:true,
 clickable:false,
 circular:true
 }); 
 
})
</script>
</body>
</html>

Ce qui précède est le code js que j'ai partagé avec vous pour réaliser l'image de focus de la bannière basculant entre trois images (textes) en même temps. J'espère que vous pourrez l'aimer.

Déclaration：

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

Article précédent：Introduction aux différences entre les compétences alert() et console.log()_javascriptArticle suivant：Introduction aux différences entre les compétences alert() et console.log()_javascript

Articles Liés

Voir plus