javascript实现图片自动和可控的轮播切换特效
内容摘要
演示图:
需要引入的文件
复制代码 代码如下: <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/js/1/css/style.css"> <script type="text/jav
需要引入的文件
复制代码 代码如下: <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/js/1/css/style.css"> <script type="text/jav
文章正文
演示图:
需要引入的文件
复制代码 代码如下:
<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代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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' , //焦点图包裹id conId: "decoimg_a2" , //大图域包裹id tabId: "deconum2" , //小圆点数字提示id tabTn: "a" , conCn: '.decoimg_b2' , //大图域配置class auto: 1, //自动播放 1或0 effect: 'fade' , //效果配置 eType: 'mouseover' , // 鼠标事件 pageBt: true, //是否有按钮切换页码 bns: [ '.prev' , '.next' ], //前后按钮配置class interval: 3000 // 停顿时间 }) }) </script> |
html代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <div id= "decoroll2" class = "imgfocus" > <div id= "decoimg_a2" class = "imgbox" > <div class = "decoimg_b2" > <a href= "http://www.phpstudy.net" > <img src= "/texiao/js/1/img/1.jpg" > </a> </div> <div class = "decoimg_b2" > <a href= "http://www.phpstudy.net" > <img src= "/texiao/js/1/img/2.jpg" > </a> </div> <div class = "decoimg_b2" > <a href= "http://www.phpstudy.net" > <img src= "/texiao/js/1/img/3.jpg" > </a> </div> <div class = "decoimg_b2" > <a href= "http://www.phpstudy.net" > <img src= "/texiao/js/1/img/4.jpg" > </a> </div> </div> <ul id= "deconum2" class = "num_a2" > <li><a href= "javascript:void(0)" hidefocus= "true" target= "_self" >杨幂</a></li> <li><a href= "javascript:void(0)" hidefocus= "true" target= "_self" >范冰冰</a></li> <li><a href= "javascript:void(0)" hidefocus= "true" target= "_self" >高圆圆</a></li> <li><a href= "javascript:void(0)" hidefocus= "true" target= "_self" >刘诗诗</a></li> </ul> </div> |
以上所述就是本文的全部内容了,希望大家能够喜欢。
代码注释