携帯電話にブートストラップ画像カルーセルの効果を実装する-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

携帯電話にブートストラップ画像カルーセルの効果を実装する

不言

Jun 25, 2018 am 11:50 AM

この記事では主にBootstrapに基づいた簡単なカルーセル画像の携帯電話実装について詳しく紹介します。興味のある方は参考にしてください。

私のパソコンには携帯電話で見るのに適した画像がたくさんあります。しかし、携帯電話で見ると多くのリソースが消費されます。自宅に頻繁に電源が入っていて家庭内 LAN 共有に使用されているコンピュータがあるため、著者は比較的シンプルで環境に優しいアイデアを想像しました。携帯電話を介してコンピュータ上の写真にアクセスします。

1 つ目は、ローカルサイトを構築することです: win+R を入力して mmc を入力し、コンソール、ファイル - 管理ユニットの追加/削除、インターネットインフォメーションサービスを開きます。 [OK] を追加し、右側に基本情報を追加し、新しい Web サイトを作成します - パスを変更します。ポート番号を設定すると、モバイルブラウザでコンピュータの LAN IP: ポート番号を入力して接続できるようになります。

次の問題は、クリックして写真を 1 枚ずつ表示してから閉じることは、さらに環境に優しくありません。 ウェブ訪問をしてみませんか? 最も単純なのはタブカルーセルモードです。ブートストラップの適応性の容易さを考えると、そのまま使用してください。

1. 初期化設定:

ボタングループ (ul-li-button) (長すぎる、すべてのオーバーフローが非表示、スライドして表示する必要がある)、ボタングループは実際の状況に応じて DOM を使用して生成されます。、ページに入るときにデフォルトで表示されます。最初のページは赤色で強調表示されます。
ジャンプボタン: テキスト入力ボックス、ボタンスタイル入力
美しい画像表示エリア

II. ページは主に 3 つの機能を実装しており、各機能は 3 種類の同様の効果を達成する必要があります:

1.左右の領域をクリックすることでページを自動的に切り替えることができます。これは、img レイヤーの上部を覆う 2 つの透明な絶対位置 ps を作成することです。クリックするとイベントがトリガーされます:
(1) ボタングループの色の変更 (2) ボタングループのスライド (3) 画像の切り替え

誰が誰を制御するかという問題があります。一瞬クリックする赤いボタンを選択する必要があります。、次に青に変わり、次（前）のものが赤に変わります。

(ul-li-button)システムでは、ボタングループのスライド距離は、現在の状況に基づいて前後に1リ幅単位である必要があります。ただし、一桁と十桁では適応ボタンの幅が異なります。分類して議論する必要がある。
写真は変更後の赤いボタンのシリアル番号に応じて表示される写真が変わります。
つまり、すべての機能を制御するのはシーケンスボタンです

2. ボタンページをクリックして切り替えます

イベント - シーケンスボタンがクリックされます (1) クリックボタンの色が変わります - クリックされたボタンが赤に変わります、その他の変更青 - 難しくありません
(2) ボタングループのスライドターゲット位置 - 現在のボタンの左の値に 15 少ない ul-lipadding を加えた値を使用して、ul を基準とした現在のボタンのオフセットを計算します。次に、このオフセットを表示領域に対する ul のオフセット値として使用します。 (必要に応じて、ボタンが中央に見えるように値を追加できます) (3) 画像切り替え、赤いボタンの変更されたシリアル番号に従って、表示される画像を変更します。このプロセス 1 では、引き続きシーケンスボタンを使用してすべての機能を制御します。

3. 入力ジャンプ

イベント - ジャンプボタンがクリックされる
(1) ボタンの色が変わり、入力ボックスの値に基づいて、ネイティブ JS を使用してシリアル番号を含むボタンを選択します。赤に変わります

(2) ボタングループのスライド - 前と同じ

(2) 画像の切り替え、前と同じ。 このプロセスは、入力ボックスがページのすべての機能を制御するためのものです。

この考え方に基づいて、一般的な機能が実現されます。

3 つの原則があります:

(1) アニメーション制御: ハンドヘルドデバイスの特性により、ユーザーは非常に速い手の速度で画面をクリックし、ボタンを停止できないように頻繁にイベントをトリガーすることができます。判定アニメーション機能を使用することで、実行を防止することができます。しかし、そうするとページが硬くなってしまいます。フェードアウト - 画像パスの変更 (遅延実行) - フェードインの方法を使用することを検討してください。これにより、高速ユーザーの問題を解決でき、ある程度の柔らかさを改善することもできます
(2) 最初の場合、極端な制御。ページと最後のページ 1 ページに達すると、ユーザーはそれ以上の操作を禁止される必要があります。

(3) 画像は Web ページ用に変更する必要があります。この例で使用されている画像の名前は xxx (1) と xxx (2) です。。。。ちなみにシリアル番号があるのでDOMの操作がとても便利です。

4. さらなる応用

大量のコードを記述し、それを一連の画像にのみ使用するのは環境に優しくありません。したがって、それらを関数としてカプセル化します。 2 つのパラメータを渡します。url と imgNum は、それぞれ画像パスとセット内の画像の数を表します。

url は文字列であり、次の要件を満たす必要があります: 画像ファイル名は「(シリアル番号)」と混在する必要があり、フォルダー名などの要件はありません。例: 「Wenjing/wenjing().jjpg」 " 一連のシリアル番号は js によって生成されます。したがって、書く必要はありません。
実装メソッドはslice()メソッドです。

5. 問題点

初回読み込み時にアニメーションの表示が遅れるのは、ダウンロードに時間がかかるためです。ホームシェアリング環境では、この問題は無視できます。

ブートストラップ機能により、一部のカスタムスタイルのパフォーマンスが設計仕様を満たしていない可能性があります。
レンダリング：（ip6に適応）

デモアドレス: (携帯電話での視聴を推奨) http://djtao.top/ugirl/

コードリスト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 id="Ugirl-nbsp-small-专业的秘密-small">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 lazy"  src="/static/imghwm/default1.png"  data-src="img/wenjing/wenjing (1).jpg"    alt="携帯電話にブートストラップ画像カルーセルの効果を実装する" >
  </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;
}

javaスクリプト

function Ugirl(url,imgNum){
 
 var aBtn=document.getElementsByTagName(&#39;button&#39;);
 $(&#39;#list&#39;).css(&#39;width&#39;,(imgNum*(52))+&#39;px&#39;);
 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函数后，就可以直接调用直接调用

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

ブートストラップの時間制御 daterangepicker の使用方法

Bootstrap でのフォームとナビゲーションバーの使用方法の分析について

以上が携帯電話にブートストラップ画像カルーセルの効果を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptフレームワークのパワーは、開発を簡素化し、ユーザーエクスペリエンスとアプリケーションのパフォーマンスを向上させることにあります。フレームワークを選択するときは、次のことを検討してください。1。プロジェクトのサイズと複雑さ、2。チームエクスペリエンス、3。エコシステムとコミュニティサポート。

JavaScript、C、およびブラウザの関係May 01, 2025 am 12:06 AM

はじめに私はあなたがそれを奇妙に思うかもしれないことを知っています、JavaScript、C、およびブラウザは正確に何をしなければなりませんか？彼らは無関係であるように見えますが、実際、彼らは現代のウェブ開発において非常に重要な役割を果たしています。今日は、これら3つの間の密接なつながりについて説明します。この記事を通して、JavaScriptがブラウザでどのように実行されるか、ブラウザエンジンでのCの役割、およびそれらが協力してWebページのレンダリングと相互作用を駆動する方法を学びます。私たちは皆、JavaScriptとブラウザの関係を知っています。 JavaScriptは、フロントエンド開発のコア言語です。ブラウザで直接実行され、Webページが鮮明で興味深いものになります。なぜJavascrを疑問に思ったことがありますか

node.jsは、型を使用してストリーミングしますApr 30, 2025 am 08:22 AM

node.jsは、主にストリームのおかげで、効率的なI/Oで優れています。ストリームはデータを段階的に処理し、メモリの過負荷を回避します。大きなファイル、ネットワークタスク、リアルタイムアプリケーションの場合。ストリームとTypeScriptのタイプの安全性を組み合わせることで、パワーが作成されます

Python vs. JavaScript：パフォーマンスと効率の考慮事項Apr 30, 2025 am 12:08 AM

PythonとJavaScriptのパフォーマンスと効率の違いは、主に以下に反映されています。1）解釈された言語として、Pythonはゆっくりと実行されますが、開発効率が高く、迅速なプロトタイプ開発に適しています。 2）JavaScriptはブラウザ内の単一のスレッドに限定されていますが、マルチスレッドおよび非同期I/Oを使用してnode.jsのパフォーマンスを改善でき、両方とも実際のプロジェクトで利点があります。

JavaScriptの起源：その実装言語の調査Apr 29, 2025 am 12:51 AM

JavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。

舞台裏：JavaScriptをパワーする言語は何ですか？Apr 28, 2025 am 12:01 AM

JavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1）解析段階で抽象的構文ツリー（AST）を生成します。 2）ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3）実行段階でコンパイルされたコードを実行します。

PythonとJavaScriptの未来：傾向と予測Apr 27, 2025 am 12:21 AM

PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

Python vs. JavaScript：開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。