Implement the effect of Bootstrap image carousel on the mobile phone

This article mainly introduces in detail the mobile phone implementation of a simple carousel image based on Bootstrap. It has a certain reference value. Interested friends can refer to

whether it is saved in the personal computer. There are few pictures suitable for viewing on mobile phones, but viewing them on a mobile phone takes up a lot of resources. Since there is a computer at home that is often turned on and is used for home LAN sharing, the author imagined a relatively simple and environmentally friendly idea. Access pictures on your computer via your phone.

The first is to build the local site: win R and enter mmc to open the console, file-add/delete snap-in unit, Internet information service. Add OK, basic information on the right, create a new website - change the path. Set a port number, and the mobile browser can enter the computer LAN IP: port number to connect.

The next problem comes. Clicking to view and then close the pictures one by one is even less environmentally friendly. Why not do a web visit? The simplest is the tab-carousel mode. Given the ease of adaptability of bootstrap, just use it.

1. Initialization settings:

Button group (ul-li-button) (too long, all overflow hidden, needs to be displayed by sliding) , the button group is generated using DOM according to the actual situation, and the first page is highlighted in red by default when entering the page.
Jump button: a text input box, a button-style input
Beautiful picture display area

## 2. The page mainly implements three functions, and each function must be implemented Three types of similar effects:

1. Click the page with your finger to automatically switch between the left and right areas

Click on the

idea and make two transparent absolute positioning p's, one on the left and one on the right, covering the top of the img layer. Events can be triggered when clicked:
(1) Button group color change
(2) Button group sliding
(3) Image switching
There is a question of who controls whom, and you need to select the click moment The red button then turns blue and the next (previous) one turns red.
(ul-li-button) In the system, the sliding distance of the button group should be one li width unit forward or backward based on the current situation. However, the adaptive button widths for single digits and tens digits are different. It needs to be classified and discussed.
The picture changes the displayed picture according to the serial number in the red button after the change.
So the sequence button controls all functions

2. Click the button to switch the page

Event - Sequence The button is clicked

(1) The color of the clicked button changes - the clicked button turns red, and the others turn blue - not difficult
(2) The sliding target position of the button group - the left value of the current button is used , plus 15 less ul-lipadding - calculate the offset of the current button relative to ul. Then, use this offset as the offset value of ul relative to the display area. (If you like, you can add a value to make the button appear centered)
(3) Image switching, change the displayed image according to the changed serial number in the red button.
This process 1 still uses the sequence buttons to control all functions.

3. Input jump
event - the jump button is clicked (1) The button changes color, and based on the value in the input box, use native js selects the button containing the serial number. Turn red
(2) Button group sliding - same as before
(2) Picture switching, same as before.
This process is to control all functions of the input box page.

Based on this idea, the general function is realized.

3. There are several principles:
(1) Animation control: The characteristics of handheld devices allow users to tap the screen at a very fast hand speed and trigger events frequently. The button cannot be stopped. You can use the judgment animation function to prevent running. But doing so makes the page stiff. You can consider using the method of fade out - change the picture path (delayed execution) - fade in, which solves the problem of fast users and can also improve the softness to a certain extent. (2) Extreme control, when the first page and the last page, the user should be prevented from further operations.
(3) The pictures should be modified for the web page. The pictures used in this example are named xxx (1), xxx (2). . . . way, because there is a serial number, it is very convenient to operate DOM.

4. Further application

Writing so much code and only using it on one picture page is not environmentally friendly. So encapsulate them as functions. Pass in two parameters: url and imgNum respectively represent the image path and the number of images in the set.

url is a string that must meet the following requirements:
The image file name must be mixed with "(serial number)", and there are no requirements for folder names, such as "Wenjing/wenjing().jjpg" series of serial numbers Generated by js. So no need to write.
The implementation method is the slice() method.

5. Problem

The animation display lags when loading for the first time because it takes time to download. You can extend the animation time appropriately. In a home sharing environment, this issue can be ignored.

There may be some custom styles that do not meet the design specifications due to the bootstrap feature.

Rendering: (Adapted to ip6)

Demo address: (recommended to watch on mobile phone) http://djtao.top/ugirl/

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

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use the bootstrap time control daterangepicker

Analysis on how to use form and navbar in Bootstrap

The above is the detailed content of Implement the effect of Bootstrap image carousel on the mobile phone. For more information, please follow other related articles on the PHP Chinese website!