Mobile website content touch slide, content touch slide

Mobile website content touch slide, content touch slide

Project Description:

Some time ago, mobile websites required a "content touch slide" function. The requirements are as follows:

1. Click a thumbnail to display a large image;

2. Click the larger image to return to the original small image;

3. Slide switching of images;

4. display the index of the current image (which image is currently being viewed ).

I wrote some functions and completed the 1st and 2 requirements. However, due to the poor js Foundation, I used the swiper plug-in to complete the remaining two requirements.

Swiper is often used for mobile website content touch slide. Swiper can achieve common effects such as touch screen focus, touch screen Tab switching, and touch screen multi-map switching. The official website of swiper, http://www.swiper.com.cn/, contains detailed api documentation and comprehensive Online demos.

The following figure shows my demo structure:

This is an activity silhouette classification. Three Projects (li) are displayed in this activity silhouette. Each project contains multiple list items to wrap the img display pictures.

Solution:

1. Because each project only requires a maximum of nine images, the redundant images are deleted (this function is also implemented in this article );

2. because there are multiple silhouette-items, when we click one of the images in this project, you can create a container temporarily at the end of each silhouette-item to store a large image to be displayed;

Solution:

1. For html, the code is somewhat long. From the demo structure above, we can see my html code,

2. for css, the code is somewhat long, but there are no special points to point out. The final display effect of one of the following list items is enough:

3. js code:

/* = Restrict the number of images in the active silhouette. the maximum size is 9 = */for (var I = 0, listLen = $ (". silhouette-img-list "). length; I <listLen; I ++) {var $ lis = $ (". silhouette-img-list "). find ("li"); var liLen = $ (". silhouette-img-list "). eq (I ). find ("li "). length; if (liLen> 9) {for (var j = 9; j <liLen; j ++) {$ ($ lis [j]). remove (); // The value of listLen changes after each deletion }}}

Code details:

1. because every list item contains ul elements whose class is silhouette-img-list, therefore, the outer layer defines a for loop to find the ul element in the specific list item;

2. The purpose of. eq (I) in the third row is to locate the specific ul.

3.After each deletion, the value of listLen is changed. Therefore, you must first determine the value of listLen, which cannot be placed in the inner loop for judgment.For example, if we have 14 images, five images need to be deleted. If listLen is not determined as a value but is compared later in each inner loop, the number of comparisons will decrease, the first comparison is 9 <14, the second comparison is 10 <13, and the third comparison is 11 <12. only three cycles are executed. In this way, two images are deleted, which is inconsistent with our expectation.

/* = Activity silhouette, click the full screen display of the image, and you can slide to switch = */$ (". silhouette-img-list li img "). click (function () {// obtain the number of images in an activity silhouette list var img =$ (this ). parents (". silhouette-img-list "). find ("img"); var imgLen = img. length; // The width of the pop-up layer is the valid width available for the browser, and the height is the valid height available for the browser var w = window. innerWidth; var h = window. innerHeight; // obtain the distance from the current position of the page to the top of the window var top = document. body. scrollTop | document.doc umentElement. scrollTop; // create a swiper-container box var $ container =$ ('<div class = "swiper-container"> </div> '); // pagination sets the page sharer var $ pagination =$ ('<div class = "swiper-pagination"> </div> '); var $ wrapper = $ ('<ul class = "swiper-wrapper"> </ul>'); // item is used to store the image list and simulate html dom, use the string connection method var item = ""; // use the for loop to implement the structure of the silhouette-img-list part in html, set the same src and alt attribute values as the corresponding small graph for each big image (var I = 0; I // <Strong class = "tips"> click the big chart again to return </strong> to add it to the back end. This is not required (generally we all know it !) Item + = "<li class = 'swiper-slide'>  <strong class = 'tids'> click the big chart again to return </strong> </li> ";} // Insert the child element to the parent element $ ($ wrapper ). append (item); $ ($ container ). prepend ($ wrapper); $ ($ container ). append ($ pagination); $ (this ). parents (". silhouette-item "). append ($ container); // reference var mySwiper = new swiper (". swiper-container ", {direction:" horizontal ", // slide grabCursor horizontally: true, // when the mouse overwrites Swiper, the pointer changes to the palm shape, when dragging, the pointer changes to the starting point shape. // loop: true, // if it is true, sliding to the first and last parts can still slide observer: true, // when swiper itself or sub-elements are modified, swiper observeParents: true is automatically initialized. // when swiper's parent element is modified, swiper initialSlide is automatically initialized: $ (this ). parent (). index (), // set the index pagination of slide during initialization :". swiper-pagination "// page sharer}); // set the style for the image in the mask layer and the mask layer $ (". swiper-container ").css ({position:" absolute ", top: top, // locate top so that the background of the large image can appear in the correct position, not always at the top of the page left: 0, width: w, height: h}); $ (". swiper-slide ").css ({zIndex: 99, backgroundColor:" #000 "// This is the background of the li package in the big picture}); $ (". swiper-img ").css ({// set a style for the image so that it is displayed in the center, and the width must not exceed the valid width that the browser can display. The height is adaptive to zIndex: 100, display: "block", position: "absolute", top: 0, right: 0, bottom: 0, left: 0, margin: "auto", maxWidth: "100%", height: "auto"}); $ (". tips ").css ({// This is the style of the prompt text. It is optional. zIndex: 200, display:" block ", position:" absolute ", bottom: "23px", margin: "auto", width: "100%", textAlign: "center", paddingTop: "5px", paddingBottom: "5px", fontSize: "12px ", backgroundColor: "rgba (0, 0, 0 ,. 5) ", color:" # fff "}); // click the mask layer to delete the previously created node $ (". swiper-container: not ('. swiper-pagination ')"). click (function () {$ (this ). remove ();});});

After the node is inserted, the result displayed in firefox is the same as expected, but it is ugly.

Finally, in chrome, the test results are as follows: