这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 javascript 实现图片自动和可控的轮播切换特效, 效果非常的棒,推荐给大家,有需要的小伙伴可以参考下。
演示图:
需要引入的文件
- <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 代码:
- <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 代码
- <div id="decoroll2" class="imgfocus">
- <div id="decoimg_a2" class="imgbox">
- <div class="decoimg_b2">
- <a href="http://www.phperz.com">
- <img src="/texiao/js/1/img/1.jpg">
- </a>
- </div>
- <div class="decoimg_b2">
- <a href="http://www.phperz.com">
- <img src="/texiao/js/1/img/2.jpg">
- </a>
- </div>
- <div class="decoimg_b2">
- <a href="http://www.phperz.com">
- <img src="/texiao/js/1/img/3.jpg">
- </a>
- </div>
- <div class="decoimg_b2">
- <a href="http://www.phperz.com">
- <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>
来源: http://www.phperz.com/article/17/0418/271845.html