Image carousel switching code based on jquery with timeline, jquery
Based on jquery, the image title is switched with dot enlargement. This is an image carousel switching code with a timeline. As follows:
Download Online Preview source code
Implementation code.
Html code:
<Div id = "decoroll2" class = "imgfocus"> <div id = "decoimg_a2" class = "imgbox"> <div class = "decoimg_b2"> <a href =" http://www.w2bc.com/ "> </a> </div> <div class = "decoimg_b2"> <a href =" http://www.w2bc.com/ "> </a> </div> <div class = "decoimg_b2"> <a href =" http://www.w2bc.com/ "> </a> </div> <div class = "decoimg_b2"> <a href =" http://www.w2bc.com/ "> </a> </div> <ul id = "deconum2" class = "num_a2"> <li> <a href = "javascript: void (0) "hidefocus =" true "target =" _ self "> Yang Mi </a> </li> <a href =" javascript: void (0) "hidefocus =" true "target =" _ self "> Fan Bingbing </a> </li> <a href =" javascript: void (0) "hidefocus =" true "target =" _ self "> high circle </a> </li> <a href =" javascript: void (0) "hidefocus =" true "target =" _ self "> Liu Shishi </a> </li> </ul> </div>
Js Code:
Qfast. add ('widgets', {path: "js/terminator2.2.min. js ", type:" js ", requires: ['fx ']}); Qfast (false, 'widgets', function () {K. tabs ({id: 'decoroll2', // The id conId of the focus chart package: "decoimg_a2", // The id tabId of the big image domain package: "deconum2 ", // The id tabTn: "a", conCn :'. decoimg_b2 ', // configure class auto: 1 in the big image field, // automatically play 1 or 0 effect: 'fade', // effect configuration eType: 'mouseover ', // mouse event pageBt: true, // whether a button exists to switch the page number. bns :['. prev ','. next '], // configure class interval: 3000 // pause time })})
Via: http://www.w2bc.com/Article/30333