Swipe. js 2.0 Lightweight Framework for mobile web sliding left and right, swipe. jsmobile

Swipe. js 2.0 Lightweight Framework for mobile web sliding left and right, swipe. jsmobile

Property summary notes are as follows:

<Style>. swipe {overflow: hidden; // hide overflow clear floating visibility: hidden; // specifies that the element is invisible (it can be set, when the event is triggered, the element is visible) position: relative; // relative to the browser positioning, the application is similar to the previous container positioning} </style>
<Script type = "html/javascript">
$ ("# BannerControl li: first "). addClass ("active"); // Add a class active to the first li element. You can use ". to call this active class (AddClass method in jQuery)
$ ("# BannerList li" ).css ("width", $ (window). width () + "px"); // you can specify one or more style attributes of the li element. In the form of <name, value> (((Selector).css (name, value)) $ (Window). width () visible width of the browser
　　
$ (". Banner"). on ("swipeleft", function () {// on the element banner, bind the swipeleft event. When the event is triggered, run the function {}

// See the myInner = setInterval (function () {}) method later to disable the automatic carousel effect.
ClearInterval (myInner );

// Obtain the index value of the current image
Var num = $ ("# bannerControl li. active "). index (); // In jQuery. index () searches for matching elements and returns the index value of the elements. returns the <li> element of class = "active" In its peer Element Set (<li> tag set) the index value in.

// Based on the current index, determine the next index when sliding to the left
Var count = num = (countPicNum-1 )? 0: num + 1;

// In jQuery, the ": eq () selector" (subscript starts from 0); defines the <li> label of next index, and adds class = "active", "In jQuery ". siblings () ", find the class =" active "tag in the tag <li> set, and remove the class =" active "from the tag
$ ("# BannerControl li: eq (" + count + ")"). addClass ("active "). siblings ($ ("# bannerControl li: eq (" + count + ")")). removeClass ("active ");

// In jQuery, "translate ()" implements the transition effect: translate (Xpx, Ypx); X is right, and Y is bottom ." + "Yes connector,"-($ (window). width () * count) px "indicates moving the specified pixel units to the left. translateZ defines 3D conversion (attributes in CSS3)
$ ("# BannerList" ).css ("transform", "translate (" +-($ (window ). width () * count) + "px, 0px) translateZ (0px )");

// The function defines the automatic carousel effect. The next image is rotated every 3000 milliseconds.
MyInner = setInterval (function (){
Var num = $ ("# bannerControl li. active"). index ();
Var count = num = (countPicNum-1 )? 0: num + 1;
$ ("# BannerControl li: eq (" + count + ")"). addClass ("active "). siblings ($ ("# bannerControl li: eq (" + count + ")")). removeClass ("active ");
$ ("# BannerList" ).css ("transform", "translate (" +-($ (window ). width () * count) + "px, 0px) translateZ (0px )");
},3000 );
});

　　　
Success: function (data ){

// We try to add alert (data ["data"]); [object, Object], [object, Object], [object, Object]

// ResponseCode indicates normal logon status
If (0000 = data ["responseCode"]) {

// Add all the <li> labels for this for Loop
For (var I = 0; I <data ["data"]. length; I ++ ){

// In jQuery, add the <li> </li> label to the <ul id = "bannerList"> </ul> label. Image attributes are defined in each tag.
$ ("# BannerList "). append ('<li> <a href = "' + data [" data "] [I] [" linkUrl "] + '" target = "_ self">  </a> </li> ');
$ ("# BannerControl"). append ('<li> </li> ');
}

// Defines the total number of pictures in countPicNum.
Var countPicNum = data ["data"]. length;

　　　　　　　　　　　　
$ (". Control" ).css ({"width" :( countPicNum * 15) + "px "});
$ ("# BannerControl" ).css ("margin-left",-countPicNum * 15*0.5 + "px ");
$ ("# BannerControl li: first"). addClass ("active ");
$ ("# BannerList li" ).css ("width", $ (window). width () + "px ");
$ ("# BannerList" ).css ("width", ($ (window). width () * countPicNum) + "px ");

// Defines the default automatic carousel Effect
$ ("# BannerControl li"). on ("click", function (){
ClearInterval (myInner );
Var num = $ (this). index ();
$ (This). addClass ("active"). siblings (this). removeClass ("active ");
$ ("# BannerList" ).css ("transform", "translate (" +-($ (window ). width () * num) + "px, 0px) translateZ (0px )");
MyInner = setInterval (function (){
Var num = $ ("# bannerControl li. active"). index ();
Var count = num = (countPicNum-1 )? 0: num + 1;
$ ("# BannerControl li: eq (" + count + ")"). addClass ("active "). siblings ($ ("# bannerControl li: eq (" + count + ")")). removeClass ("active ");
$ ("# BannerList" ).css ("transform", "translate (" +-($ (window ). width () * count) + "px, 0px) translateZ (0px )");
},3000 );
});
Var myInner = setInterval (function (){
Var num = $ ("# bannerControl li. active"). index ();
Var count = num = (countPicNum-1 )? 0: num + 1;
$ ("# BannerControl li: eq (" + count + ")"). addClass ("active "). siblings ($ ("# bannerControl li: eq (" + count + ")")). removeClass ("active ");
$ ("# BannerList" ).css ("transform", "translate (" +-($ (window ). width () * count) + "px, 0px) translateZ (0px )");
// $ ("# BannerList"). animate ({"margin-left":-($ (window). width () * count) + "px "});
},3000 );
</Script>

Then we found a perfect lightweight alternative, swipe. js 2. 0. Details are as follows:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
// Introduce the css style<Link rel = "stylesheet" type = "text/css" href = "css/swipe.css"> <body> <div class = "addWrap"> <div class = "swipe" id = "mySwipe"> <divClass = "swipe-wrap">

// <A> the href attribute of a tag is used to specify the URL of the hyperlink target. The href attribute value can be any valid relative or absolute URL, including the fragment identifier and JavaScript code segment.
// Javascript: indicates that a piece of JavaScript code is executed when the <a> default action is triggered, while javascript:; indicates that nothing is executed, in this way, no response is made when you click <a>. When there is a lot of page content and there is a scroll bar, the page will not jump in disorder, and the user experience is better.<Div> <a href = "javascript :; ">  </a> </div> <a href = "javascript :; ">  </a> </div> <a href = "javascript :; ">  </a> </div>

// <Ul id = "position"> <li class = "cur"> </li> <li class = ""> </li> <li class = ""> </li> </ul> </div> <script src = "js/swipe. js "> </script> <script type =" text/javascript ">

// The Element Object in the <ul id = "position"> DOM in the previous article, indicating the HTML Element.Var bullets = document. getElementById ('position'). getElementsByTagName ('lil'); var banner = Swipe (document. getElementById ('myswip '),{
　　
　　 // Start automatic slides (in milliseconds)Auto: 2000,

// Continuous Boolean (default: true) create a wireless loop (whether to slide cyclically when all animations are finished)Continuous: true,

　　// DisableScroll Boolean (default: false) whether to stop slide scrolling when the scroll bar is rolledDisableScroll: false,

　　 // Callback function in slide runningCallback: function (pos) {var I = bullets. length; while (I --) {bullets [I]. className = '';} bullets [pos]. className = 'cur' ;}}); </script> </body> 
Two references in the above Code: callback (because of the conflict between the mobile web page and the source code, swipe.css is analyzed as follows)
// The tag selector that sets the total <body> label's outer margin and inner margin to 0.
Body {margin: 0; padding: 0}

// For the class = "addWrap" label, position: relative indicates positioning relative to the previous container. Background: # fff indicates that the background is white;. AddWrap {position: relative; width: 100%; background: # fff; margin: 0; padding: 0 ;}

// For the class = "swipe" label in the class = "addWrap" subnode, overflow: hidden; specifies what will happen when the content overflows the element box (hidden indicates that the overflow content will be trimmed and the excess content will be invisible ;)
// Visibility: hidden; this attribute specifies whether the element is visible. That is, the label of class = "swipe" is not visible. The same position: relative; indicates relative overflow.. AddWrap. swipe {overflow: hidden; visibility: hidden; position: relative ;}
. AddWrap. swipe-wrap {overflow: hidden; position: relative ;}

// Where. swip-wrap> div indicates all sub-div elements of the swipe-wrap element. If you do not add the ">" symbol, it will include all the child nodes and child nodes of the child node.
// Float: left is a key attribute, which indicates float to the left. For example, if multiple divs are on one page, one div is displayed in one row by default, but you only need to use float: left in the css of the div,
// You can make a row have multiple Divs. This way, you can divide the webpage into multiple parts, but using this attribute will affect the subsequent elements. If the following divs do not want to be affected, clear: both;
// It can be understood that the effects of float: left and float: right are cleared and returned to the default status. Like <ul> <li> </ul>, the navigation menu basically has this element and uses float: left to display it horizontally.. AddWrap. swipe-wrap> div {float: left; width: 100%; position: relative ;}
// Position: absolute; indicates absolute positioning, which is fixed to the position you want to fix. When absolute positioning is used, the specific location parameters are followed. For example, bottom: 0. It indicates that the bottom edge of the image is set to a 5 pixel high position above the bottom edge of the contained element.
// The unit of the position attribute is pixel px. Background: #000; indicates that the color is black.
//Opacity: 0.4; used to set the opacity level of tag elements. 0.0 indicates completely transparent; 1.0 indicates completely opaque.
// Similarly, in CSS3Width: 100%; indicates the adaptive width.Width: 100% is directly based on the width of the parent DIV (the width must be specified ).
// Filter: alpha (opacity = 50 );Alpha is used to set transparency. opacity indicates transparency. 0 indicates full transparency, and 100 indicates full opacity.
// The text-align: right attribute in CSS3 indicates the horizontal alignment of the text in the element.# Position {position: absolute; bottom: 0; right: 0; padding-right: 8px; margin: 0; background: #000; opacity: 0.4; width: 100%; filter: alpha (opacity = 50); text-align: right ;}

// Display: inline-block; submits an object as an inline object. -Webkit-border-radius: 5px. For the webkit kernel browser, set the rounded Corner Effect of five pixels at the four corners of the <li> element. Set the rounded corner of a small rectangle.
// Border-radius: 5px in CSS3; add a border with rounded corners and set the border with four corners to 5px pixels.# Position li {width: 10px; height: 10px; margin: 0 2px; display: inline-block;-webkit-border-radius: 5px; border-radius: 5px; background-color: # AFAFAF;} # position li. cur {background-color: # FF0000 ;}

// This class = img-responsive attribute indicates the future img tag, that is, the Image Tag becomes a block. Let the image element be displayed as a block-level element, so that you can operate the image like a block.
// Max-width: 100%; maximum width attribute, used to define the maximum value of the width display. Img-responsive {display: block; max-width: 100%; height: auto ;}
Next, we need to use Chrome's F12 debugger to debug the original page according to the swipe. js reference demo to achieve the same page layout and style effect. The following are my own summary notes:
　　What is the pattern for modifying bugs? One by one, and then refresh again in the browser? However, as experience grows, I feel that the modified mode is annoying and inefficient. Is there a way to quickly modify the mode? what you see, what you get, and the answer is yes?!
Chrome
 
 
Summary:
1. Comparison of overflow: hidden and visibility: hidden attributes: overflow: hidden indicates hidden overflow, clear floating, and visibility: hidden indicates invisible properties.