Implémenter l'effet du carrousel d'images Bootstrap sur le téléphone mobile

Cet article présente principalement en détail l'implémentation sur téléphone mobile d'une simple image de carrousel basée sur Bootstrap. Elle a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Est-elle enregistrée dans l'ordinateur personnel ? Il existe peu d’images pouvant être visionnées sur un téléphone mobile, mais les visualiser sur un téléphone mobile consomme beaucoup de ressources. Puisqu’il y a à la maison un ordinateur qui est souvent allumé et qui est utilisé pour le partage du réseau local, l’auteur a imaginé une idée relativement simple et respectueuse de l’environnement. Accédez aux photos sur votre ordinateur via votre téléphone.

La première consiste à créer le site local : win+R et entrez mmc pour ouvrir la console, l'unité de composant logiciel enfichable d'ajout/suppression de fichiers, le service d'informations Internet. Ajoutez OK, informations de base à droite, créez un nouveau site Web - modifiez le chemin. Définissez un numéro de port et le navigateur mobile peut saisir l'adresse IP LAN de l'ordinateur : numéro de port pour se connecter.

Le problème suivant arrive. Cliquer pour visualiser puis fermer les images une par une est encore moins respectueux de l'environnement. Pourquoi ne pas faire une visite web ? Le plus simple est le mode onglet-carrousel. Compte tenu de la facilité d’adaptabilité du bootstrap, utilisez-le simplement.

1. Paramètres initiaux :

Groupe de boutons (bouton ul-li) (trop long, tout débordement caché, il faut glisser vers display), le groupe de boutons est généré à l'aide du DOM en fonction de la situation réelle, et la première page est surlignée en rouge par défaut lors de l'entrée dans la page.
Bouton de saut : une zone de saisie de texte, une saisie de style de bouton
Belle zone d'affichage d'image

2. La page implémente principalement trois fonctions, et chaque fonction doit être implémentée Trois types d'effets similaires :

1. Cliquez sur la page avec votre doigt pour basculer automatiquement les zones gauche et droite de

Cliquez sur l'idée
et créez deux p de positionnement absolu transparents, un à gauche et un à droite, couvrant le haut du calque img. Des événements peuvent être déclenchés lorsque vous cliquez dessus :
(1) Changement de couleur du groupe de boutons
(2) Glissement du groupe de boutons
(3) Changement d'image
La question se pose de savoir qui contrôle qui, et vous devez sélectionnez le moment du clic. Le bouton rouge devient alors bleu et le suivant (précédent) devient rouge.
Dans le système (ul-li-button), la distance de glissement du groupe de boutons doit être d'une unité de largeur li vers l'avant ou vers l'arrière en fonction de la position actuelle. Cependant, les largeurs de boutons adaptatifs pour les chiffres simples et les dizaines sont différentes. Il faut en discuter en catégories.
L'image change l'image affichée en fonction du numéro de série dans le bouton rouge après le changement.
Ainsi, le bouton de séquence contrôle toutes les fonctions

2. Cliquez sur le bouton pour changer de page

Événement. - Séquence Le bouton est cliqué
(1) La couleur du bouton cliqué change - le bouton cliqué devient rouge et les autres deviennent bleus - pas difficile
(2) La position cible coulissante du groupe de boutons - la gauche la valeur du bouton actuel est utilisée, plus 15 de moins ul-lipadding - calcule le décalage du bouton actuel par rapport à ul. Ensuite, utilisez ce décalage comme valeur de décalage de ul par rapport à la zone d'affichage. (Si vous le souhaitez, vous pouvez ajouter une valeur pour que le bouton semble centré)
(3) Changement d'image, modifiez l'image affichée en fonction du numéro de série modifié dans le bouton rouge.
Ce processus 1 utilise toujours les boutons de séquence pour contrôler toutes les fonctions.

3. Événement de saut d'entrée
- le bouton de saut est cliqué
(1) Le bouton change de couleur en fonction de la valeur dans la zone de saisie, utilisez. native js sélectionne le bouton contenant le numéro de série. Devenir rouge
(2) Groupe de boutons coulissant - comme avant
(2) Changement d'image, comme avant.
Ce processus permet à la zone de saisie de contrôler toutes les fonctions de la page.

Sur la base de cette idée, la fonction générale est réalisée.

3. Il existe plusieurs principes :
(1) Contrôle de l'animation : les caractéristiques des appareils portables permettent aux utilisateurs d'appuyer sur l'écran à une vitesse de main très rapide et de déclencher événements fréquemment. Le bouton ne peut pas être arrêté. Vous pouvez utiliser la fonction d'animation de jugement pour empêcher l'exécution. Mais cela rend la page rigide. Vous pouvez envisager d'utiliser la méthode du fondu sortant - modifier le chemin de l'image (exécution différée) - fondu entrant, ce qui résout le problème des utilisateurs rapides et peut également améliorer la douceur dans une certaine mesure
(2) Contrôle extrême, quand. la première page et la dernière page, l'utilisateur ne doit pas pouvoir effectuer d'autres opérations.
(3) Les images doivent être modifiées pour la page Web. Les images utilisées dans cet exemple sont nommées xxx (1) et xxx (2). . . . D'une manière ou d'une autre, parce qu'il existe un numéro de série, il est très pratique d'utiliser le DOM.

4. Application supplémentaire

Écrire autant de code et ne l'utiliser que sur une seule page d'image n'est pas respectueux de l'environnement. Alors encapsulez-les sous forme de fonctions. Passez deux paramètres : url et imgNum représentent respectivement le chemin de l'image et le nombre d'images dans l'ensemble.
url est une chaîne qui doit répondre aux exigences suivantes :
Le nom du fichier image doit contenir "(numéro de série)", et il n'y a aucune exigence pour les noms de dossier, tels que "Wenjing/wenjing().jjpg" numéros de série de la série Générés par js. Donc pas besoin d'écrire.
La méthode d'implémentation est la méthode slice().

5. Problèmes

L'affichage de l'animation est en retard lors du premier chargement. C'est parce que le téléchargement prend du temps. le temps d'animation de manière appropriée. Dans un environnement de partage de maison, ce problème peut être ignoré.
Il se peut que certains styles personnalisés ne répondent pas aux spécifications de conception en raison de la fonctionnalité bootstrap.

Rendu : (Adapté à ip6)

Adresse de démonstration : (recommandé de regarder sur téléphone mobile) http://djtao.top/ugirl/

Liste de codes html

<!DOCTYPE html>
<html lang="zh-cn">
 <head>
 <!--页面编码 -->
 <meta charset="UTF-8">
 <!--低版本浏览器模拟渲染-->
  
 <meta name="viewport" content="width=device-width, initialscale=
1, maximumscale=1, user-scalable=no">
 <meta name="viewport" content="width=deviece-width,initial-scale=1">
  
 <!--支持国产浏览器的高速渲染-->
 <meta name="renderer" content="Webkit">
 <!--在此进行SEO设置：作者、关键词、描述-->
 <meta name="author" content="djtao">
 <meta name="keywords" content="djtao">
 <meta name="description" content="djtao">
  
 <title>Ugirl</title>
  
 <!--bootstrap-->
  
 <!--以下两个js插件用于在IE8及以下支持H5元素查询的，如不用可移除 -->
 <!--[if lt IE 9]>
  <script src="scripts/html5.min.js"></script>
  <script src="scripts/respond.min.js"></script>
 <![endif]-->
  
 <!--bootstrap样式文件 -->
 <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
 <!--自定义样式文件 -->
 <link rel="stylesheet" href="styles/css.css">
  
 <!--基于jQuery的脚本文件 -->
 <script src="scripts/jquery.min.js"></script>
 <!-- bootstrap的jq插件 -->
 <script src="bootstrap/js/bootstrap.min.js"></script>
 <!--自定义脚本文件 -->
 <script src="scripts/js.js"></script>
  
  
  
 </head>
 <body class="container">
 <header>
  <h1>Ugirl <small>专业的秘密</small></h1>
 </header>
 <p id="main" class="row">
  <p id="btn-group" class="col-xs-6">
  <ul id="list" class="list-inline"></ul>
  </p>
  <p class="col-xs-6">
   <form class="form-horizontal">
   <p class="form-group has-success">
    <p class="col-xs-6"><input class="form-control" id="num" style="width:100%" col="2" type="text"></p>
    <p class="col-xs-2"><input type="button" value="jump" class="btn btn-default">
   </p>
   </form>
  </p>
  </p>
 </p>
 <p class="row">
  <p id="box" class="col-xs-12">
  <p id="last"></p>
  <p id="next"></p>
  <img class="img-responsive" src="img/wenjing/wenjing (1).jpg">
  </p> 
 </p>
 
  
 </body>
</html>

css

body{
 background: #f2f2f2;
}
#box{
 position: relative;
}
#next{
 width:50%;height:500px;
 position: absolute;
 left:50%;
}
#last{
 width:50%;height:500px;
 position: absolute;
 
}
#btn-group{
 height: 40px;
 overflow: hidden;
}
#list{
 list-style: none;
 position: absolute;
}
#list>li{
 list-style: none;
 float: left;
 position: relative;
}
#main{
 margin-top: 20px;
}

javascript

function Ugirl(url,imgNum){
 
 var aBtn=document.getElementsByTagName('button');
 $('#list').css('width',(imgNum*(52))+'px');
 var str=url;
 var index=0;
 for(i=0;i<str.length;i++){
 if(str.slice(i-1,i)==&#39;(&#39;){
  index=i;
 }
 }
 var a=str.slice(0,index);
 var b=str.slice(index);
 //分割url字符串
 for(j=1;j<=imgNum;j++){
 var $btn = $(&#39;<li><button class="btn btn-primary">&#39;+j+&#39;</button></li>&#39;);
 $btn.appendTo($(&#39;#list&#39;));
 }
 aBtn[0].className=&#39;btn btn-danger&#39;;
 //按钮初始化设置
 //手指点击事件
 $(&#39;#box p&#39;).click(function(){
  
 if($(this).attr(&#39;id&#39;)==&#39;next&#39;){//下一个
  if($(&#39;.btn-danger&#39;) .html()==imgNum){
  alert(&#39;到底了哦&#39;);
  return false;
  }
  liWidth=44;
  liWidth2=52;
  
  $(&#39;.btn-danger&#39;).removeClass().addClass(&#39;btn btn-primary&#39;)
  .parent().next().children().removeClass().addClass(&#39;btn btn-danger&#39;);
 
 }else if($(this).attr(&#39;id&#39;)==&#39;last&#39;){//上一个
  if($(&#39;.btn-danger&#39;) .html()==1){
  alert(&#39;到顶了哦&#39;);
  return false;
  }else{
  $(&#39;.btn-danger&#39;).removeClass().addClass(&#39;btn btn-primary&#39;)
   .parent().prev().children().removeClass().addClass(&#39;btn btn-danger&#39;);
  liWidth=-44;
  liWidth2=-52;
  } 
 }else{
  return false;
 };
 //个位数按钮和10位数按钮宽度不同。所以设置两个
 if($(&#39;.btn-danger&#39;) .html()<=10){
  
  $(&#39;#list&#39;).animate({left:&#39;-=&#39;+liWidth+&#39;px&#39;},400);
  
 }else if($(&#39;.btn-danger&#39;) .html()>10){
  
  $(&#39;#list&#39;).animate({left:&#39;-=&#39;+liWidth2+&#39;px&#39;},400);
 }
 //大图切换
 $(&#39;img&#39;).fadeOut(200);
 setTimeout(function(){
  $(&#39;img&#39;).attr(&#39;src&#39;,a+$(&#39;.btn-danger&#39;) .html()+b);
 },220)
 $(&#39;img&#39;).fadeIn(300);
 });
 //选项按钮点击
 $(&#39;button&#39;).click(function(){ 
 $(&#39;button&#39;).attr(&#39;class&#39;,&#39;btn btn-primary&#39;);
 $(this).attr(&#39;class&#39;,&#39;btn btn-danger&#39;);
 var moveLength=-$(this).parent().position().left+15;
 $(&#39;#list&#39;).animate({left:moveLength+&#39;px&#39;},400);
 $(&#39;img&#39;).attr(&#39;src&#39;,a+$(&#39;.btn-danger&#39;) .html()+b); 
  
 });
 //跳转按钮点击
 $(&#39;.btn-default&#39;).click(function(){
 var s=$(&#39;#num&#39;).val();
 if(s<1||s>imgNum){
  return false;
  alert(&#39;没有那么多哦&#39;)
 }//极限设置
 var pageNum=$(&#39;.btn-danger&#39;) .html();
 $(&#39;img&#39;).attr(&#39;src&#39;,a+s+b);
 $(&#39;#list&#39;).children().children().removeClass().addClass(&#39;btn btn-primary&#39;);
 $(aBtn[s-1]).removeClass().addClass(&#39;btn btn-danger&#39;);
 var moveLength=-$(aBtn[s-1]).parent().position().left+15;
 $(&#39;#list&#39;).animate({left:moveLength+&#39;px&#39;},400);
 })
}
$(function(){
 Ugirl(&#39;img/wenjing/wenjing ().jpg&#39;,65);
})//在其它页面也引入了Ugirl函数后，就可以直接调用直接调用

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser le sélecteur de plage de contrôle du temps d'amorçage

Analyse sur la façon d'utiliser le formulaire et la barre de navigation dans Bootstrap

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!