집 > 기사 > 웹 프론트엔드 > 휴대폰에서 Bootstrap 이미지 캐러셀 효과 구현

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

不言원래의: 2018-06-25 11:50:472527검색

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

제 개인 컴퓨터에는 휴대폰 보기에 적합한 사진이 많이 있습니다. 하지만 휴대폰으로 시청하려면 많은 리소스가 필요합니다. 집에 컴퓨터가 있어서 자주 켜서 홈 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>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;
}

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

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

관련 기사