原生 JS 实现图片自动轮播缓冲切换特效,很实用流畅的图片轮播特效,在较现代的浏览器上展现的圆角效果,兼容差点的是直角效果,全部原生 JS 实现,还是很不错的值得大家学习并利用,推荐下载。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
使用方法:
分别引用 CSS 文件和 js 文件 如:
- <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css"
- />
- <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8">
- </script>
html:
- <li>
- <a href="/">
- <img src="img/1.jpg" />
- </a>
- </li>
- <li>
- <a href="/">
- <img src="img/2.jpg" />
- </a>
- </li>
- <li>
- <a href="/">
- <img src="img/3.jpg" />
- </a>
- </li>
javascript:
- window.onload = function() {
- photoSlide({
- wrap: document.getElementById('photo'),
- //最外层容器
- loop: true,
- //设置无缝循环
- autoPlay: true,
- //自动轮播
- autoTime: 4000,
- //轮播时间间隔
- pagination: true //点状态列表
- });
- }
完整示例:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
- />
- <title>
- photoSlider-纯js移动开发轮播图、相册滑动插件
- </title>
- <meta name="keywords" content="javascript移动端相册轮播图手指滑动插件" />
- <meta name="description" content="javascript移动端相册轮播图手指滑动插件,支持自定义轮播图滑动属性"
- />
- <meta name=apple-mobile-web-app-title content="photoSlider">
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <meta name="apple-mobile-web-app-status-bar-style" content="black" />
- <meta name=renderer content=webkit>
- <meta name="full-screen" content="yes">
- <meta name="browsermode" content="application">
- <meta name="x5-fullscreen" content="true">
- <meta name="x5-page-mode" content="app">
- <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css"
- />
- </head>
- <body>
- <div id="photo">
- <div id="loading" class="spinner">
- <div class="bounce1">
- </div>
- <div class="bounce2">
- </div>
- <div class="bounce3">
- </div>
- </div>
- <ul id="pic-view" class="pic-view">
- <li>
- <a href="/">
- <img src="img/1.jpg" />
- </a>
- </li>
- <li>
- <a href="/">
- <img src="img/2.jpg" />
- </a>
- </li>
- <li>
- <a href="/">
- <img src="img/3.jpg" />
- </a>
- </li>
- </ul>
- </div>
- </body>
- </html>
- <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8">
- </script>
- <script type="text/javascript">
- document.onreadystatechange = subSomething;
- function subSomething() {
- if (document.readyState == 'complete') {
- setTimeout(function() {
- var load = document.getElementById('loading');
- load.style.opacity = 0;
- document.getElementById('pic-view').setAttribute('class', 'pic-view show');
- load.remove();
- },
- 500);
- }
- }
- window.onload = function() {
- photoSlide({
- wrap: document.getElementById('photo'),
- loop: true,
- autoPlay: true,
- autoTime: 4000,
- pagination: true
- });
- }
- </script>
来源: