Javascript Enables automatic and controllable rotation switching effects for images, and javascript controls
Demo diagram:
Files to be introduced
Copy codeThe Code is as follows: <link rel = "stylesheet" type = "text/css" href = "http://hovertree.com/texiao/js/1/css/style.css"> <script type = "text/javascript" src = "http://hovertree.com/texiao/js/1/js/koala.min.1.5.js"> </script>
Js Code:
<Script type = "text/javascript"> Qfast. add ('widgets', {path: "http://hovertree.com/texiao/js/1/js/terminator2.2.min.js", type: "js", requires: ['fx ']}); Qfast (false, 'widgets', function () {K. tabs ({id: 'decoroll2', // idconId: "decoimg_a2", // idtabId: "deconum2" for a large image domain package, // idtabId: "deconum2" for a small dot number indicates idtabTn: "a", conCn :'. decoimg_b2 ', // configure classauto: 1 for the big image domain, // 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 classinterval: 3000 // pause time}) </script>
Html code
<Div id = "decoroll2" class = "imgfocus"> <div id = "decoimg_a2" class = "imgbox"> <div class = "decoimg_b2"> <a href = "http://www.bkjia.com "> </a> </div> <div class = "decoimg_b2"> <a href = "http://www.bkjia.com "> </a> </div> <div class = "decoimg_b2"> <a href = "http://www.bkjia.com "> </a> </div> <div class = "decoimg_b2"> <a href = "http://www.bkjia.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>
The above is all the content of this article. I hope you will like it.