Mobile phone to achieve bootstrap simple picture carousel effect _javascript Skills

There are many pictures of the personal computer that are suitable for the mobile phone, but it is a very resource to let go of the machine. In view of the home has a computer often open, just used to do the home LAN sharing, so I think through a relatively simple idea of environmental protection. Access your computer's pictures through your phone.

The first is the local site build: Win+r input MMC Opens the console, files-Add/Remove snap-in, Internet Information Services. Add OK, right basic information, new site-Change the path. Set a port number, the mobile browser can enter the computer LAN IP: Port number can be connected up.

The next question comes, one click to view and then close the picture is a more environmentally friendly thing. why not make a Web visit? The simplest is the tab-the mode of the carousel graph. Given the Isi of bootstrap, use it directly.

I. Initialization settings:

Button Group (Ul-li-button) (too long, all overflow hidden, need to slide the display), the button group is based on the actual situation with the DOM generated, enter the page default display first page red highlighted.
Jump button: A text input box, a button-style input
Beauty Map Display Area

Two. The main implementation of the Page three features, each feature to achieve three types of similar effects:

1. The finger clicks the page can automatically switch

The left and right areas are clicked
Train of thought, do two transparent absolutely positioned DIV one left and right, covering the IMG layer above. Events can be triggered when clicked:
(1) button Group Color change
(2) button Group slide
(3) Picture switching
There is a problem who controls who, you need to select the red button click for a moment, then turn blue, the next (prev) red.
(Ul-li-button) system, the sliding distance of the button group should be the current base on which to advance or back the width of an Li unit. However, the adaptive button single-digit and 10-digit widths are different. It needs to be sorted out and discussed.
The picture changes according to the serial number in the red button after the change.
So the sequence button controls all the features

2. Click the button page to toggle

Event--The sequence button is clicked
(1) Click on the button color changes-the button is clicked Red, other blue-not difficult
(2) The button group slide target position--use is the current button's left value, coupled with the less ul-lipadding 15--even if out of the current button relative to the UL offset. Then, take this offset as the offset value of UL relative to the display area. (If you want, you can add a value to make the button look centered.)
(3) Picture switching, according to the change in the red button after the number of changes to display the picture.
This process 1 is still a sequence button that controls all features.

3. Input jump
Event--The Jump button is clicked
(1) button discoloration, according to the value of the input box, with the original JS to the button containing the number selected. Turn red
(2) button group slide--same as front face
(2) picture switch, same as before.
This procedure is an input box that controls all the features of the page.

Based on this idea, the general function is realized.

Three. There are several principles:
(1) Animation control: The characteristics of the handheld device allows users to quickly click on the screen, frequently triggered events caused the button can not stop. You can use the Judge animation function to block the run. But doing so makes the page stiff. You can consider fading--changing the image path (delay execution)-fade in, and solve the problem of speed users, but also to a certain extent to enhance the feeling of softness,
(2) Limit control, when the first and last page, you should prevent users to operate.
(3) The picture for the webpage should make certain modification, this example uses the picture named XXX (1), XXX (2) .... The way, because there is a serial number so DOM is very convenient to operate.

Four. Further application

Write so many code, only used in a set of map page, it is too green. So encapsulate them as functions. Pass in two parameters: the URL and imgnum represent the picture path and the number of nested graphs, respectively.
The URL is a string that must meet the following requirements:
Picture file name must be mixed with "(serial number)", the folder name, such as no requirements, such as "Quiet/wenjing (). Jjpg" series serial number from JS generated. So don't write.
The implementation means is the slice () method.

Five. The question

Animation shows lag on first load because it takes time to download and can be extended by appropriate animation time. In a home sharing environment, this problem can be ignored.
There may be a number of custom styles that do not conform to the design specification because of the bootstrap attribute.

Effect Chart: (Fit IP6)

Demo Address: (recommended mobile Watch) http://djtao.top/ugirl/

Code Listing HTML

<! DOCTYPE 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*) + ' px ');
 var Str=url;
 var index=0;
  for (i=0;i<str.length;i++) {if (Str.slice (i-1,i) = = ' (') {index=i;
 } var a=str.slice (0,index);
 var b=str.slice (index); Split URL string for (j=1;j<=imgnum;j++) {var $btn = $ (' <li><button class= ' btn btn-primary ' > ' +j+ ' </button&
  Gt;</li> ');
 $btn. Appendto ($ (' #list '));
 } abtn[0].classname= ' btn Btn-danger '; Button initialization set//Finger Click event $ (' #box div '). Click (function () {if ($ (this). attr (' id ') = = ' Next ') {//Next if ($ ('. Btn-danger '). HT
    ML () ==imgnum) {alert (' The end of Oh ');
   return false;
   } liwidth=44;
    
   liwidth2=52; $ ('. Btn-danger '). Removeclass (). addclass (' btn btn-primary '). Parent (). Next (). Children (). Removeclass (). addclass ('
  
  BTN Btn-danger ');
    }else if ($ (this). attr (' id ') = = ' last ') {//previous if ($ ('. Btn-danger '). html () ==1) {alert (' top Oh ');
   return false; }else{$ ('. Btn-danger '). REmoveclass (). addclass (' btn btn-primary '). Parent (). Prev (). Children (). Removeclass (). addclass (' btn Btn-danger ');
    liwidth=-44;
   liwidth2=-52;
  }}else{return false;
  }; The single digit button and the 10 digit button width are different.
    
  So set two if ($ ('. Btn-danger '). html () <=10) {$ (' #list '). Animate ({left: ' = ' +liwidth+ ' px '},400);
  }else if ($ ('. Btn-danger '). html () >10) {$ (' #list '). Animate ({left: ' = ' +liwidth2+ ' px '},400);
  //Large map Toggle $ (' img '). fadeout (200);
  settimeout (function () {$ (' img '). attr (' src ', a+$ ('. Btn-danger '). html () +b);
 },220) $ (' img '). FadeIn (300);
 });
  option button click $ (' button '). Click (function () {$ (' button '). attr (' class ', ' btn btn-primary ');
  $ (this). attr (' class ', ' btn Btn-danger ');
  var movelength=-$ (this). Parent (). Position (). left+15;
  $ (' #list '). Animate ({left:movelength+ ' px '},400); 
   
 $ (' img '). attr (' src ', a+$ ('. Btn-danger '). html () +b);
 });
  Jump button click $ ('. Btn-default '). Click (function () {var s=$ (' #num '). Val (); if (s<1| |
   S>imgnum) {return false; Alert' Not so much oh ')}//limit set var pagenum=$ ('. Btn-danger '). html ();
  $ (' img '). attr (' src ', a+s+b);
  $ (' #list '). Children (). Children (). Removeclass (). addclass (' btn btn-primary ');
  $ (abtn[s-1]). Removeclass (). addclass (' btn Btn-danger ');
  var movelength=-$ (Abtn[s-1]). Parent (). Position (). left+15;
 $ (' #list '). Animate ({left:movelength+ ' px '},400); } $ (function () {Ugirl (' img/wenjing/wenjing (). jpg ', 65);})
 After other pages have introduced the Ugirl function, you can directly call the

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.