Cette fois, je vous propose jquery pour implémenter un graphique carrousel (avec code). Quelles sont les précautions à prendre pour jquery pour implémenter un graphique carrousel ? Ce qui suit est un cas pratique, jetons un coup d'oeil.
Image du carrousel :
Je travaille avec jquery depuis un certain temps et je viens d'utiliser l'image du carrousel pour mettre en pratique mes compétences aujourd'hui. Au début de l'article de blog, je présenterai un exemple d'utilisation simple de jquery pour créer un graphique carrousel. Au milieu, j'insérerai quelques réflexions supplémentaires sur les graphiques carrousel. À la fin, j'utiliserai la méthode Javascript pour écrire un carrousel. graphique. Enfin, je parlerai de la comparaison entre jquery et Javascript. Vous pouvez cliquer sur le lien suivant pour voir l'effet du carrousel : http://sandbox.runjs.cn/show/t07kscph
Exemple de carrousel de création jquery :
Code de la pièce html :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> <link rel="stylesheet" type="text/css" href="demo.css"/> <script src="../jquery/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="demo.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p id="igs"> <a class="ig" href="#"><img src="images/1.jpg"/></a> <a class="ig" href="#"><img src="images/2.jpg"/></a> <a class="ig" href="#"><img src="images/3.jpg"/></a> <a class="ig" href="#"><img src="images/4.jpg"/></a> <a class="ig" href="#"><img src="images/5.jpg"/></a> <p class="btn btn1"><</p> <p class="btn btn2">></p> <ul id="tabs"> <li class="tab">1</li> <li class="tab">2</li> <li class="tab">3</li> <li class="tab">4</li> <li class="tab">5</li> </ul> </p> </body> </html>
Code de la pièce css :
* {
margin: 0;
padding: 0;
}
#igs {
margin: 10px auto;
width: 700px;
height: 320px;
position: relative;
}
.ig {
position: absolute;
}
#tabs {
position: absolute;
list-style: none;
background-color: rgba(255,255,255,.5);
left: 300px;
bottom: 10px;
border-radius: 10px;
padding: 5px 0 5px 5px;
}
.tab{
float: left;
text-align: center;
line-height: 20px;
width: 20px;
height: 20px;
cursor: pointer;
overflow: hidden;
margin-right: 4px;
border-radius: 100%;
background-color: rgb(200,100,150);
}
.btn{
position: absolute;
color: #fff;
top: 110px;
width: 40px;
height: 100px;
background-color: rgba(255,255,255,.3);
font-size: 40px;
font-weight: bold;
text-align: center;
line-height: 100px;
border-radius: 5px;
margin: 0 5px;
}
.btn2{
position: absolute;
right: 0px;
}
.btn:hover{
background-color: rgba(0,0,0,.7);
}Code de la pièce js :
//定义全局变量和定时器
var i = 0 ;
var timer;
$(document).ready(function(){
//用jquery方法设置第一张图片显示，其余隐藏
$('.ig').eq(0).show().siblings('.ig').hide();
//调用showTime()函数（轮播函数）
showTime();
//当鼠标经过下面的数字时，触发两个事件（鼠标悬停和鼠标离开）
$('.tab').hover(function(){
//获取当前i的值，并显示，同时还要清除定时器
i = $(this).index();
Show();
clearInterval(timer);
},function(){
//
showTime();
});
//鼠标点击左侧的箭头
$('.btn1').click(function(){
clearInterval(timer);
if(i == 0){
i = 5;//注意此时i的值
}
i--;
Show();
showTime();
});
//鼠标点击右侧的箭头
$('.btn2').click(function(){
clearInterval(timer);
if(i == 4){
i = -1;//注意此时i的值
}
i++;
Show();
showTime();
});
});
//创建一个showTime函数
function showTime(){
//定时器
timer = setInterval(function(){
//调用一个Show()函数
Show();
i++;
//当图片是最后一张的后面时，设置图片为第一张
if(i==5){
i=0;
}
},2000);
}
//创建一个Show函数
function Show(){
//在这里可以用其他jquery的动画
$('.ig').eq(i).fadeIn(300).siblings('.ig').fadeOut(300);
//给.tab创建一个新的Class为其添加一个新的样式，并且要在css代码中设置该样式
$('.tab').eq(i).addClass('bg').siblings('.tab').removeClass('bg');
/*
* css中添加的代码：
* .bg{ background-color: #f00; }
* */
}Rendu complet :
Plus de réflexions sur l'utilisation de jquery pour créer des images de carrousel
Réflexion 1 : utilisez la méthode jquery pour définir la première image dans la septième ligne de code Afficher et masquer le reste, existe-t-il un autre moyen d'y parvenir ?
Idée : Implémenter
via des filtres jquery : Exemple de code :
$("#igs a:not(
:first-child
)").hide()；Extension : Si vous le regardez de cette façon, in Nous pouvons omettre la classe dans la balise a. En même temps, nous devons avoir une compréhension plus approfondie des sélecteurs jquery.
Réflexion 2 : Dans la ligne 64 du code, nous avons créé une fonction Show, où nous ne pouvons voir que des effets simples. Pouvons-nous rendre nos effets d'animation plus éblouissants ?
Idée : utilisez une animation personnalisée dans jquery pour définir plusieurs effets d'animation
Exemple de code :
//Astuce de code : vous pouvez utiliser fadeIn(), fadeOut(), fadeTo (), animate(), etc. Veuillez vous référer aux informations pertinentes pour les méthodes de mise en œuvre spécifiques
Réflexion 3 : Si nous ajoutons une ou plusieurs images sur la base d'origine, nous devons modifier notre code, pouvons-nous l'appliquer coder pour plus d'images de carrousel ?
Idée : nous définissons un compteur devant et obtenons le nombre d'images via la méthode DOM
Exemple de code :
var count;
$(document).ready(function(){
count= $(".main a").length; /*给动态变化的i备用*/;
//。。。代码省略
//鼠标点击左侧的箭头
$('.btn1').click(function(){
clearInterval(timer);
if(i == 0){
i = count;//注意此时i的值
}
i--;
Show();
showTime();
});
//鼠标点击右侧的箭头
$('.btn2').click(function(){
clearInterval(timer);
//console.log(count-1);
if(i == count-1){
i = -1;//注意此时i的值
}
i++;
Show();
showTime();
});
});Utilisez la méthode Javascript native pour écrire un simple L'image du carrousel
partie html du code :
<p id="container">
<p id="list" style="left: -600px;">
<img src="img/5.jpg" alt="1"/>
<img src="img/1.jpg" alt="1"/>
<img src="img/2.jpg" alt="2"/>
<img src="img/3.jpg" alt="3"/>
<img src="img/4.jpg" alt="4"/>
<img src="img/5.jpg" alt="5"/>
<img src="img/1.jpg" alt="5"/>
</p>
<p id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</p>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</p>partie js du code :
<script type="text/javascript">
/* 知识点： */
/* this用法 */
/* DOM事件 */
/* 定时器 */
window.onload = function () {
var container = document.getElementById('container');
var list = document.getElementById('list');
var buttons = document.getElementById('buttons').getElementsByTagName('span');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var index = 1;
var timer;
function animate(offset) {
//获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，
//且style.left获取的是字符串，需要用parseInt()取整转化为数字。
var newLeft = parseInt(list.style.left) + offset;
list.style.left = newLeft + 'px';
//无限滚动判断
if (newLeft > -600) {
list.style.left = -3000 + 'px';
}
if (newLeft < -3000) {
list.style.left = -600 + 'px';
}
}
function play() {
//重复执行的定时器
timer = setInterval(function () {
next.onclick();
}, 2000)
}
function stop() {
clearInterval(timer);
}
function buttonsShow() {
//将之前的小圆点的样式清除
for (var i = 0; i < buttons.length; i++) {
if (buttons[i].className == "on") {
buttons[i].className = "";
}
}
//数组从0开始，故index需要-1
buttons[index - 1].className = "on";
}
prev.onclick = function () {
index -= 1;
if (index < 1) {
index = 5
}
buttonsShow();
animate(600);
};
next.onclick = function () {
//由于上边定时器的作用，index会一直递增下去，我们只有5个小圆点，所以需要做出判断
index += 1;
if (index > 5) {
index = 1
}
animate(-600);
buttonsShow();
};
for (var i = 0; i < buttons.length; i++) {
(function (i) {
buttons[i].onclick = function () {
/* 这里获得鼠标移动到小圆点的位置，用this把index绑定到对象buttons[i]上，去谷歌this的用法 */
/* 由于这里的index是自定义属性，需要用到getAttribute()这个DOM2级方法，去获取自定义index的属性*/
var clickIndex = parseInt(this.getAttribute('index'));
var offset = 600 * (index - clickIndex); //这个index是当前图片停留时的index
animate(offset);
index = clickIndex; //存放鼠标点击后的位置，用于小圆点的正常显示
buttonsShow();
}
})(i)
}
container.onmouseover = stop;
container.onmouseout = play;
play();
}
</script>Comparaison des méthodes jquery et Javascript
Après comparaison, il n'est pas difficile de constater que la méthode jquery nécessite beaucoup moins de code que notre méthode Javascript. En fait, utiliser Javascript évite directement de nombreux problèmes, tels que les problèmes de compatibilité (cet exemple n'est pas testé, juste utilisé à des fins de comparaison également, s'il y a deux valeurs de classe, séparées par des espaces, alors comment devons-nous opérer avec DOM) ; (idée : utiliser des expressions régulières et des méthodes liées aux tableaux), pour que notre quantité de code soit plus importante si nous voulons changer l'effet d'animation, nous devons beaucoup modifier, et d'après l'introduction précédente, nous savons que si vous souhaitez modifier l'effet d'animation, modifiez simplement la fonction d'animation appelée directement...
Les mots suivants :
Ce billet de blog enregistre davantage de mes pensées, parmi lesquelles The les effets spécifiques de la mise en œuvre de nombreuses méthodes n'ont pas encore été écrits. Maintenant, j'apprends jquery en révisant le Javascript que j'ai appris auparavant. Je sens de plus en plus que Javascript est puissant (en fait, je suis faible). Il y a beaucoup de choses qui méritent d'être étudiées en profondeur, et je me sens de plus en plus intéressant à ce sujet.
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Quelles sont les précautions à prendre pour la mise à niveau de la version de jQuery
Utilisation de $ et $(). . dans jQuery Explication détaillée
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!
Que sont les plug-ins jquery ?
Comment faire fonctionner json avec jquery
Comment supprimer des éléments dans jquery
Introduction à l'utilisation du code complet VBS
Utilisation de la méthode jQuery hover()
jquery implémente la méthode de pagination
Qu'est-ce qu'un élément caché dans jquery
Qu'est-ce qui est mis en évidence dans jquery
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
