Implementieren Sie den Effekt des Bootstrap-Bildkarussells auf dem Mobiltelefon

In diesem Artikel wird hauptsächlich die Implementierung eines einfachen Karussellbilds basierend auf Bootstrap vorgestellt. Es hat einen gewissen Referenzwert.

Wird es auf dem PC gespeichert? Es gibt nur wenige Bilder, die für die Anzeige auf Mobiltelefonen geeignet sind, aber die Anzeige auf einem Mobiltelefon nimmt viele Ressourcen in Anspruch. Da es zu Hause einen Computer gibt, der oft eingeschaltet ist und für das Home-LAN-Sharing verwendet wird, hat sich der Autor eine relativ einfache und umweltfreundliche Idee ausgedacht. Greifen Sie über Ihr Telefon auf Bilder auf Ihrem Computer zu.

Die erste besteht darin, eine lokale Site zu erstellen: Win+R und mmc eingeben, um die Konsole, das Snap-In zum Hinzufügen/Löschen von Dateien und den Internetinformationsdienst zu öffnen. OK hinzufügen, rechts Basisinformationen, neue Website erstellen – Pfad ändern. Legen Sie eine Portnummer fest, und der mobile Browser kann die LAN-IP-Portnummer des Computers eingeben, um eine Verbindung herzustellen.

Das nächste Problem kommt, wenn man die Bilder einzeln anklickt und dann schließt, was noch weniger umweltfreundlich ist. Warum nicht einen Webbesuch machen? Am einfachsten ist der Tab-Karussell-Modus. Angesichts der einfachen Anpassungsfähigkeit von Bootstrap sollten Sie es einfach verwenden.

1. Anfangseinstellungen:

Tastengruppe (ul-li-button) (zu lang, alle Überläufe ausgeblendet, muss verschoben werden Anzeige), die Schaltflächengruppe wird entsprechend der tatsächlichen Situation mithilfe von DOM generiert und die erste Seite wird beim Aufrufen der Seite standardmäßig rot hervorgehoben.
Sprungschaltfläche: ein Texteingabefeld, eine Schaltflächenstileingabe
Schöner Bildanzeigebereich

2. Die Seite implementiert hauptsächlich drei Funktionen, und jede Funktion muss drei implementiert werden Arten ähnlicher Effekte:

1 Klicken Sie mit dem Finger auf die Seite, um den linken und rechten Bereich von

Klicken Sie auf die Idee

und erstellen Sie zwei transparente absolute Positionierungs-Ps, eines links und eines rechts, die den oberen Rand der Bildebene bedecken. Ereignisse können ausgelöst werden, wenn darauf geklickt wird:
(1) Farbänderung der Schaltflächengruppe
(2) Verschieben der Schaltflächengruppe
(3) Bildwechsel
Es stellt sich die Frage, wer wen kontrolliert, und das müssen Sie tun Wählen Sie den Klickmoment aus. Der rote Knopf wird dann blau und der nächste (vorherige) wird rot.
Im (ul-li-button)-System sollte der Schiebeabstand der Button-Gruppe basierend auf der aktuellen Position eine Li-Breiteneinheit vorwärts oder rückwärts betragen. Allerdings sind die adaptiven Tastenbreiten für einzelne Ziffern und Zehnerziffern unterschiedlich. Es muss in Kategorien diskutiert werden.
Das Bild ändert das angezeigte Bild entsprechend der Seriennummer im roten Knopf nach der Änderung.
Die Sequenztaste steuert also alle Funktionen

2. Klicken Sie auf die Schaltfläche, um die Seite zu wechseln

Ereignis - Reihenfolge Die Schaltfläche wird angeklickt

(1) Die Farbe der angeklickten Schaltfläche ändert sich – die angeklickte Schaltfläche wird rot und die anderen werden blau – nicht schwierig
(2) Die verschiebbare Zielposition der Schaltflächengruppe – links Es wird der Wert der aktuellen Schaltfläche plus 15 weniger ul-lipadding verwendet – berechnet den Versatz der aktuellen Schaltfläche relativ zu ul. Verwenden Sie diesen Versatz dann als Versatzwert von ul relativ zum Anzeigebereich. (Wenn Sie möchten, können Sie einen Wert hinzufügen, damit die Schaltfläche zentriert aussieht)
(3) Bildwechsel: Ändern Sie das angezeigte Bild entsprechend der geänderten Seriennummer in der roten Schaltfläche.
Dieser Prozess 1 verwendet weiterhin die Sequenztasten zur Steuerung aller Funktionen.

3. Eingabesprung
Ereignis – die Sprungschaltfläche wird angeklickt (1) Die Schaltfläche ändert ihre Farbe entsprechend dem Wert im Eingabefeld natives js wählt die Schaltfläche mit der Seriennummer aus. Rot werden
(2) Tastengruppe verschiebbar – wie zuvor
(2) Bildumschaltung, wie zuvor.
Dieser Vorgang dient dazu, dass das Eingabefeld alle Funktionen der Seite steuert.

Basierend auf dieser Idee wird die allgemeine Funktion realisiert.

3. Es gibt mehrere Prinzipien:
(1) Animationssteuerung: Die Eigenschaften von Handheld-Geräten ermöglichen es Benutzern, mit sehr hoher Handgeschwindigkeit auf den Bildschirm zu tippen und auszulösen Die Schaltfläche kann nicht gestoppt werden. Sie können die Beurteilungsanimationsfunktion verwenden, um das Laufen zu verhindern. Dadurch wird die Seite jedoch steif. Sie können die Methode Ausblenden – Ändern des Bildpfads (verzögerte Ausführung) – Einblenden in Betracht ziehen, die das Problem schneller Benutzer löst und auch die Weichheit bis zu einem gewissen Grad verbessern kann (2) Extreme Kontrolle, wann Auf der ersten Seite und der letzten Seite soll der Benutzer von weiteren Bedienvorgängen ausgeschlossen werden.
(3) Die Bilder sollten für die Webseite geändert werden. Die in diesem Beispiel verwendeten Bilder heißen xxx (1) und xxx (2). . . . Da es eine Seriennummer gibt, ist es sehr bequem, DOM zu bedienen.

4. Weitere Anwendung

So viel Code zu schreiben und ihn nur auf einer Bildseite zu verwenden, ist nicht umweltfreundlich. Kapseln Sie sie also als Funktionen. Übergeben Sie zwei Parameter: url und imgNum repräsentieren jeweils den Bildpfad und die Anzahl der Bilder im Satz.

URL ist eine Zeichenfolge und muss die folgenden Anforderungen erfüllen:
Der Bilddateiname muss mit „(Seriennummer)“ gemischt werden und es gibt keine Anforderungen für Ordnernamen, wie z. B. „Wenjing/wenjing()“. jjpg“-Reihe von Seriennummern, generiert von js. Es besteht also keine Notwendigkeit zu schreiben.
Die Implementierungsmethode ist die Slice()-Methode.

Probleme

Die Animationsanzeige verzögert sich beim ersten Laden. Dies liegt daran, dass das Herunterladen einige Zeit in Anspruch nimmt die Animationszeit entsprechend anpassen. In einer Home-Sharing-Umgebung kann dieses Problem ignoriert werden.

Es kann sein, dass einige benutzerdefinierte Stile aufgrund der Bootstrap-Funktion nicht den Designspezifikationen entsprechen.

Rendering: (An IP6 angepasst)

Demo-Adresse: (empfohlen, auf dem Mobiltelefon anzusehen) http://djtao.top/ugirl/

Codeliste 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函数后，就可以直接调用直接调用

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So verwenden Sie Bootstrap Time Control Daterangepicker

Analyse zur Verwendung von Formular und Navigationsleiste in Bootstrap

Das obige ist der detaillierte Inhalt vonImplementieren Sie den Effekt des Bootstrap-Bildkarussells auf dem Mobiltelefon. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!