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

[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.