휴대폰에서 Bootstrap 이미지 캐러셀 효과 구현-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

휴대폰에서 Bootstrap 이미지 캐러셀 효과 구현

不言

Jun 25, 2018 am 11:50 AM

이 글은 주로 부트스트랩을 기반으로 한 간단한 캐러셀 이미지의 휴대폰 구현을 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

제 개인 컴퓨터에는 휴대폰 보기에 적합한 사진이 많이 있습니다. 하지만 휴대폰으로 시청하려면 많은 리소스가 필요합니다. 집에 컴퓨터가 있어서 자주 켜서 홈 LAN 공유에 사용하고 있기 때문에 저자는 비교적 간단하고 환경친화적인 아이디어를 떠올렸다. 휴대폰을 통해 컴퓨터에 있는 사진에 액세스하세요.

첫 번째는 로컬 사이트를 구축하는 것입니다: win+R을 누르고 mmc를 입력하여 콘솔, 파일 추가/삭제 관리 장치, 인터넷 정보 서비스를 엽니다. 확인, 오른쪽에 기본 정보를 추가하고 새 웹사이트를 생성하세요 - 경로를 변경하세요. 포트 번호를 설정하면 모바일 브라우저가 컴퓨터 LAN IP: 연결할 포트 번호를 입력할 수 있습니다.

다음 문제는 사진을 클릭해서 보고 하나씩 닫는 것은 환경 친화적이지 않다는 것입니다. 웹 방문을 해보시는 건 어떨까요? 가장 간단한 것은 탭 회전식 모드입니다. 부트스트랩의 적응 용이성을 고려하면 그냥 사용하세요.

1. 초기화 설정:

버튼 그룹(ul-li-button)(너무 길어서 오버플로가 모두 숨겨짐, 슬라이딩으로 표시해야 함), 버튼 그룹은 실제 상황에 따라 DOM을 사용하여 생성됩니다. , 페이지 진입 시 기본적으로 표시됩니다. 첫 번째 페이지는 빨간색으로 강조 표시됩니다.
점프 버튼: 텍스트 입력 상자, 버튼 스타일 입력
아름다운 그림 표시 영역

II. 페이지는 주로 세 가지 기능을 구현하며 각 기능은 세 가지 유형의 유사한 효과를 달성해야 합니다.

1. 손가락을 클릭하면 페이지가 자동으로 전환될 수 있습니다. 왼쪽과 오른쪽 영역을 클릭하면 img 레이어의 상단을 덮는 두 개의 투명한 절대 위치 지정 ps를 만드는 것입니다. 클릭 시 이벤트 발생 가능:
(1) 버튼 그룹 색상 변경 (2) 버튼 그룹 슬라이딩 (3) 이미지 전환

누가 누구를 제어하는지에 대한 질문이 있습니다. 잠시 클릭하는 빨간색 버튼을 선택해야 합니다. , 파란색으로 변경되고 다음(이전)이 빨간색으로 변합니다.

(ul-li-button) (ul-li-button) 시스템에서 버튼 그룹의 슬라이딩 거리는 현재 상황에 따라 앞으로 또는 뒤로 1li 너비 단위여야 합니다. 그러나 한 자리 숫자와 10자리 숫자의 적응형 버튼 너비는 다릅니다. 카테고리별로 논의해야합니다.
사진은 변경 후 빨간색 버튼의 일련번호에 따라 표시된 사진이 변경됩니다.
그러니까 모든 기능을 제어하는 것이 시퀀스 버튼입니다

2. 버튼 페이지를 클릭하면

이벤트 - 시퀀스 버튼이 클릭됩니다 (1) 클릭 버튼 색상 변경 - 클릭한 버튼이 빨간색으로 변합니다. , 다른 하나는 파란색 변경 - 어렵지 않습니다.
(2) 버튼 그룹 슬라이딩 대상 위치 - 현재 버튼의 왼쪽 값을 사용하고 ul-lipadding 15를 더해 - ul을 기준으로 현재 버튼의 오프셋을 계산합니다. 그런 다음 이 오프셋을 표시 영역을 기준으로 한 ul의 오프셋 값으로 사용합니다. (원한다면 버튼이 중앙에 보이도록 값을 추가할 수 있습니다.) (3) 이미지 전환, 빨간색 버튼에 변경된 일련번호에 따라 표시되는 이미지가 변경됩니다. 이 프로세스 1은 여전히 시퀀스 버튼을 사용하여 모든 기능을 제어합니다.

3. 입력 점프

이벤트 - 점프 버튼 클릭
(1) 버튼 색상이 바뀌고 입력 상자의 값에 따라 기본 js를 사용하여 일련 번호가 포함된 버튼을 선택합니다. 빨간색으로 변경

(2) 버튼 그룹 슬라이딩 - 이전과 동일

(2) 사진 전환, 이전과 동일. 이 과정은 입력 상자가 페이지의 모든 기능을 제어하는 과정입니다.

이 아이디어를 바탕으로 일반적인 기능이 구현됩니다.

세 가지 원칙이 있습니다.

(1) 애니메이션 제어: 휴대용 장치의 특성상 사용자는 매우 빠른 손 속도로 화면을 클릭할 수 있어 버튼을 멈출 수 없도록 이벤트가 자주 발생합니다. 판정 애니메이션 기능을 사용하여 달리는 것을 방지할 수 있습니다. 하지만 그렇게 하면 페이지가 딱딱해집니다. 페이드 아웃 - 이미지 경로 변경(지연된 실행) - 페이드 인 방법을 사용하는 것을 고려할 수 있습니다. 이는 빠른 사용자의 문제를 해결하고 어느 정도 부드러움을 향상시킬 수도 있습니다.
(2) 처음 사용할 때 극단적인 제어. 페이지 및 마지막 페이지 한 페이지에 도달하면 사용자가 더 이상 작업을 수행할 수 없도록 해야 합니다.

(3) 웹페이지에 맞게 사진을 수정해야 합니다. 이 예에 사용된 사진의 이름은 xxx(1) 및 xxx(2)입니다. . . . 방법은 일련번호가 있어서 DOM 조작이 매우 편리합니다.

4. 추가 적용

너무 많은 코드를 작성하고 사진 세트에만 사용하는 것은 환경 친화적이지 않습니다. 그러니 그것들을 함수로 캡슐화하세요. 두 개의 매개변수를 전달합니다. 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="휴대폰에서 Bootstrap 이미지 캐러셀 효과 구현" >
  </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;
}

ja 바스크립트

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 중국어 홈페이지를 주목해주세요!

관련 기사

Python vs. JavaScript : 성능 및 효율성 고려 사항Apr 30, 2025 am 12:08 AM

파이썬과 자바 스크립트 간의 성능과 효율성의 차이는 주로 다음과 같이 반영됩니다. 1) 해석 된 언어로서, 파이썬은 느리게 실행되지만 개발 효율이 높고 빠른 프로토 타입 개발에 적합합니다. 2) JavaScript는 브라우저의 단일 스레드로 제한되지만 멀티 스레딩 및 비동기 I/O는 Node.js의 성능을 향상시키는 데 사용될 수 있으며 실제 프로젝트에서는 이점이 있습니다.

JavaScript의 기원 : 구현 언어 탐색Apr 29, 2025 am 12:51 AM

JavaScript는 1995 년에 시작하여 Brandon Ike에 의해 만들어졌으며 언어를 C로 실현했습니다. 1.C Language는 JavaScript의 고성능 및 시스템 수준 프로그래밍 기능을 제공합니다. 2. JavaScript의 메모리 관리 및 성능 최적화는 C 언어에 의존합니다. 3. C 언어의 크로스 플랫폼 기능은 자바 스크립트가 다른 운영 체제에서 효율적으로 실행하는 데 도움이됩니다.

무대 뒤에서 : 어떤 언어의 힘이 자바 스크립트입니까?Apr 28, 2025 am 12:01 AM

JavaScript는 브라우저 및 Node.js 환경에서 실행되며 JavaScript 엔진을 사용하여 코드를 구문 분석하고 실행합니다. 1) 구문 분석 단계에서 초록 구문 트리 (AST)를 생성합니다. 2) 컴파일 단계에서 AST를 바이트 코드 또는 기계 코드로 변환합니다. 3) 실행 단계에서 컴파일 된 코드를 실행하십시오.

파이썬과 자바 스크립트의 미래 : 트렌드와 예측Apr 27, 2025 am 12:21 AM

Python 및 JavaScript의 미래 추세에는 다음이 포함됩니다. 1. Python은 과학 컴퓨팅 분야에서의 위치를 통합하고 AI, 2. JavaScript는 웹 기술의 개발을 촉진하고, 3. 교차 플랫폼 개발이 핫한 주제가되고 4. 성능 최적화가 중점을 둘 것입니다. 둘 다 해당 분야에서 응용 프로그램 시나리오를 계속 확장하고 성능이 더 많은 혁신을 일으킬 것입니다.

Python vs. JavaScript : 개발 환경 및 도구Apr 26, 2025 am 12:09 AM

개발 환경에서 Python과 JavaScript의 선택이 모두 중요합니다. 1) Python의 개발 환경에는 Pycharm, Jupyternotebook 및 Anaconda가 포함되어 있으며 데이터 과학 및 빠른 프로토 타이핑에 적합합니다. 2) JavaScript의 개발 환경에는 Node.js, VScode 및 Webpack이 포함되어 있으며 프론트 엔드 및 백엔드 개발에 적합합니다. 프로젝트 요구에 따라 올바른 도구를 선택하면 개발 효율성과 프로젝트 성공률이 향상 될 수 있습니다.

JavaScript가 C로 작성 되었습니까? 증거를 검토합니다Apr 25, 2025 am 12:15 AM

예, JavaScript의 엔진 코어는 C로 작성되었습니다. 1) C 언어는 효율적인 성능과 기본 제어를 제공하며, 이는 JavaScript 엔진 개발에 적합합니다. 2) V8 엔진을 예를 들어, 핵심은 C로 작성되며 C의 효율성 및 객체 지향적 특성을 결합하여 C로 작성됩니다.

JavaScript의 역할 : 웹 대화식 및 역동적 인 웹Apr 24, 2025 am 12:12 AM

JavaScript는 웹 페이지의 상호 작용과 역학을 향상시키기 때문에 현대 웹 사이트의 핵심입니다. 1) 페이지를 새로 고치지 않고 콘텐츠를 변경할 수 있습니다. 2) Domapi를 통해 웹 페이지 조작, 3) 애니메이션 및 드래그 앤 드롭과 같은 복잡한 대화식 효과를 지원합니다. 4) 성능 및 모범 사례를 최적화하여 사용자 경험을 향상시킵니다.

C 및 JavaScript : 연결이 설명되었습니다Apr 23, 2025 am 12:07 AM

C 및 JavaScript는 WebAssembly를 통한 상호 운용성을 달성합니다. 1) C 코드는 WebAssembly 모듈로 컴파일되어 컴퓨팅 전력을 향상시키기 위해 JavaScript 환경에 도입됩니다. 2) 게임 개발에서 C는 물리 엔진 및 그래픽 렌더링을 처리하며 JavaScript는 게임 로직 및 사용자 인터페이스를 담당합니다.

See all articles