Based on jQuery imitation thunder video official website slide effects, jquery imitation

Based on jQuery imitation thunder video official website slide effects, jquery imitation

Share a jQuery-based slide effect on the official website of Xunlei audio and video. The jQuery slide special effect on the Raytheon official website is a jQuery slide code with left and right arrows and an index button switch. As follows:

Download Online Preview source code

Implementation code.

Html code:

<Div class = "wrapper"> <div id = "content" class = "content"> <div class = "s_arr"> <a class = "s_left png"> </ a> <a class = "s_right png"> </a> </div> <div id = "color_list" class = "bg_colors"> <div class = "bgs_box bgs_1"> <div class = "wp"> <div class = "img_area"> <div class = "shadow png"> <div class = "s_img"> </div> </ div> </div> <div class = "footer"> </div> <div class = "bgs_box bgs_2"> <div class =" wp "> <d Iv class = "img_area"> <div class = "shadow png"> <div class = "s_img"> </div> <div class = "footer"> </div> <div class = "bgs_box bgs_3"> <div class = "wp"> <div class = "img_area"> <div class = "shadow png"> <div class = "s_img"> </div> <div class = "shadow01 png"> <div class =" s_img01 "> </div> <div class =" footer "> </div> <div class = "main"> <div I D = "txt_list" class = "item_txt_box"> <div class = "item_txt item_txt_1"> <div class = "txt_info png"> <strong class = "hd"> thunder video 5.1 </strong> 

Js Code:
(Function ($) {var initHeight = $ (window ). height ()-60, $ colorList = $ ('# color_list '). find ('. bgs_box '), $ txtList = $ (' # txt_list '). find ('. item_txt '), $ switchList = $ (' # switch_box '). find ('span '), timer = null, key = 1; // IE6 bug $ switchList. eq (0 ). addClass ('on'); $ txtList. eq (0 ). addClass ('on'); $ colorList. eq (0 ). addClass ('on'); // adjust the height ('{content'}.css ('min-height', initHeight + 'px ') // $ (window) when the window is changed ). resize (function () {initHeight = $ (window ). height ()-60; ('{content'}.css ('min-height', initHeight + 'px '); if ($ (window ). height ()> 866) {$ ('# ft_area '). addClass ('pst _ ft ');} else {$ (' # ft_area '). removeClass ('pst _ ft ') ;}}) loadFinish (); $ (' # switch_box '). on ('click', 'span ', function () {var stepIndex = $ switchList. index ($ (this); actFn (stepIndex );}). hover (function () {clearInterval (timer) ;}, function () {timer = setInterval (function () {actFn (key) ;}, 7000)}) $ ('. s_arr '). on ('click', 'A', function () {var step = $ ('. s_arr '). find ('A '). index ($ (this); $ ('# switch_box '). find ('span '). each (function (I) {var css = $ (this ). hasClass ("on"); if (css) {if (step = 0) {if (I = 0) {step = 2} else {step = I-1 ;}} else {if (I = 2) {step = 0 ;} else {step = I + 1 ;}}}); actFn (step );}). hover (function () {clearInterval (timer) ;}, function () {timer = setInterval (function () {actFn (key) ;}, 7000 )}) // adjust the bottom position if ($ (window ). height ()> 866) {$ ('# ft_area '). addClass ('pst _ ft ');} else {$ (' # ft_area '). removeClass ('pst _ ft ');} // carousel function actFn (stepIndex) {var stepIndex = stepIndex; $ switchList. eq (stepIndex ). addClass ('on '). siblings (). removeClass ('on'); $ colorList. stop (). eq (stepIndex ). animate ({opacity: 1}, 8002.16.css ({flter: "Alpha (Opacity = 100 )"}). siblings (). animate ({opacity: 0}, 800); $ txtList. eq (stepIndex ). addClass ('on '). siblings (). removeClass ('on'); key = stepIndex; $ ('. bgs_box '). eq (key ). find (". img_area "). addClass ('item _ img_css3 '); $ ('. bgs_box '). eq (key ). siblings (). find (". img_area "). removeClass ('item _ img_css3 '); $ ('. bgs_box '). eq (key ). find (". footer "). fadeIn (800); $ ('. bgs_box '). eq (key ). siblings (). find (". footer "). fadeOut (800); $ (". item_txt "). eq (key ). addClass ('item _ txt_css3 '). siblings (). removeClass ('item _ txt_css3 '); key ++; if (key = $ txtList. length) {key = 0 ;}/// pre-load the banner animation background image function preloadImages () {var arrImage = []; var parLen = arguments. length; var cur = 0; for (var I = 0; I <parLen; I ++) {arrImage [I] = new Image (); arrImage [I]. onload = function () {if (cur = parLen-1) {loadFinish () ;}cur ++ ;}; arrImage [I]. src = arguments [I] ;}} function loadFinish () {$ txtList. eq (0 ). addClass ('item _ txt_css3 '); $ colorList. eq (0 ). find (". img_area "). addClass ('item _ img_css3 '); // automatic carousel timer = setInterval (function () {actFn (key) ;}, 7000) ;}) (jQuery)
Via: http://www.w2bc.com/Article/36030