[JS + CSS3] sample code with preview image slides, css3 sample code

Source: Internet
Author: User

[JS + CSS3] sample code with preview image slides, css3 sample code

I. Preparations

1.1 Case Analysis

Use Cases: single-instance Layout
1.2 methodology

V view HTML + CSS + debugging
C. js Control Process
D. Optimized Data Expansion

Ii. Code

Structure

<Div class = "slider"> <! -- Special effect zone --> <div class = "main"> <! -- Main view area --> <div class = "main_ I"> <div class = "caption"> 

Style (CSS omitted)

Script Function Development

> Content output
Template transformation output slide & control button image position adjustment

> Switch Control
Switch slide. main_ I _active switch control button. ctrl_ I _active


0. Modify VIEW-> Template (keyword replacement) and add Template id.
Image Area
<Div class = "main" id = "template_main">
<H2 >{{ h2 }}<H3 >{{ h3 }}
Button Area
<Div class = "ctrl" id = "template_ctrl">
<A class = "ctrl_ I" id = "ctrl _ {index}" href = "javascript: switchSlider ({index }}); "> </a>


Below is the compilation of key JS scripts ~~

<Script type = "text/javascript"> // 1. data Definition (the actual production environment should be provided in the background) var data = [{img: 1, h2: "I'm Title 2, title", h3: "I'm Title 3, title" },{ img: 2, h2: "I'm Title 2, Title 2", h3: "I'm heading 3, heading 3" },{ img: 3, h2: "I'm heading 2, heading", h3: "I'm heading 3, heading "}, {img: 4, h2: "I am Title 2, title", h3: "I am Title 3, title" },{ img: 5, h2: "I'm Title 2, title", h3: "I'm Title 3, title" },{ img: 6, h2: "I'm Title 2, title", h3: "I'm heading 3, heading 3" },{ img: 7, h2: "I'm heading 2, heading", h3: "I'm heading 3, title "},]; // 2. General function var g = function (id) {if (id. substr (0, 1) = ". ") {return document. getElementsByClassName (id. substr (1);} return document. getElementById (id);} // 3. Operation for adding a slide (all slides & corresponding buttons) function addSliders () {// 3.1 obtain the template var tpl_main = g ("template_main "). innerHTML. replace (/^ \ s */,''). replace (/\ s * $/, ''); var tpl_ctrl = g (" template_ctrl "). innerHTML. replace (/^ \ s */,''). replace (/\ s * $/, ''); // 3.2 defines the final output HTML variable var out_main = []; var out_ctrl = []; // 3.3 traverse all data and construct the final output HTML for (I in data) {var _ html_main = tpl_main. replace (/{index}/g, data [I]. img ). replace (/{h2}/g, data [I]. h2 ). replace (/{h3}/g, data [I]. h3 ). replace (/{css}/g, ['', 'main _ I _right '] [I % 2]); var _ html_ctrl = tpl_ctrl. replace (/{index}/g, data [I]. img); out_main.push (_ html_main); out_ctrl.push (_ html_ctrl);} // 3.4 write HTML back to the corresponding DOM g ("template_main "). innerHTML = out_main.join (''); g (" template_ctrl "). innerHTML = out_ctrl.join (''); // 7. Add # main_background g ('template _ main '). innerHTML + = tpl_main. replace (/{index}/g, '{index }}'). replace (/{h2}/g, data [I]. h2 ). replace (/{h3}/g, data [I]. h3); g ('main _ {index }}'). id = 'main _ background ';} // 5. Slide switching function switchSliders (n) {// 5.1 obtain the slide to be displayed & control button DOM var main = g ("main _" + n); var ctrl = g ("ctrl _" + n ); // 5.2 get all slides & control button var clear_main = g ('. main_ I '); var clear_ctrl = g ('. ctrl_ I '); // 5.3 clear their active style for (var I = 0; I <clear_ctrl.length; I ++) {clear_main [I]. className = clear_main [I]. className. replace ('main _ I _active ', ''); clear_ctrl [I]. className = clear_ctrl [I]. className. replace ('ctrl _ I _active ', '');} // 5.4 for the current control button and slide appended style g (" main _ "+ n ). className + = 'main_ I _active '; g ("ctrl _" + n ). className + = 'ctrl_ I _active '; // when switching 7.2, copy the previous slide to setTimeout (function () {g ('main _ background') in main_background '). innerHTML = main. innerHTML ;}, 1000) ;}// 6. dynamically adjust the image's margin-top so that it is vertically centered function movePictures () {var pictures = g ('. picture '); for (I = 0; I <pictures. length; I ++) {pictures [I]. style. marginTop =-(pictures [I]. clientHeight/3) + 'px ';} // 4. Define when to process the slide output window. onload = function () {addSliders (); switchSliders (1); setTimeout (function () {movePictures () ;}, 100)} </script>

... = Mo tuao is the figure again ~~~

 

Problems:

1. Add top: 50% to the image directly. There will be bugs and this will not work, probably because the height is not fixed ~~ Just give a fixed height.

But the problem comes again. 2. After the fixed height is given, the button group cannot adapt to the width... Will be squeezed into the second row ......

The sample code for the above [JS + CSS3] to implement the effect of a preview image slide is all the content that I have shared with you. I hope to give you a reference and support for the help house.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.