这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
具有自动播放功能, 图片显示不但具有渐隐渐现, 自动伸缩的效果, 还能像放电影一样的感觉!
[Ctrl+A 全选 注: 如需引入外部 Js 需刷新才能执行]
- <script type="text/javascript" src="http://img.jb51.net/online/slide/slide.js">
- </script>
- <script defer="defer" type="text/javascript">
- < !--
- var viewer = new PhotoViewer();
- viewer.add('http://img.jb51.net/online/slide/011.jpg');
- viewer.add('http://img.jb51.net/online/slide/021.jpg');
- viewer.add('http://img.jb51.net/online/slide/03.jpg');
- viewer.add('http://img.jb51.net/online/slide/061.jpg');
- viewer.add('http://img.jb51.net/online/slide/051.jpg');
- //-->
- </script>
- <style type="text/CSS">
- <!-- .Slideshow a { margin-right: 5px; margin-left: 5px; text-decoration:
- none; } -->
- </style>
- <center>
- <div>
- <img width="70" height="70" src="http://img.phperz.com/data/img/20170322_2/1490193337_9976.jpg"
- data-src="" />
- <img width="70" height="70" src="http://img.phperz.com/data/img/20170322_1/1490193338_1862.jpg"
- data-src="" />
- <img width="70" height="70" src="http://img.phperz.com/data/img/20170322_20/1490193339_6918.jpg"
- data-src="" />
- <img width="70" height="70" src="http://img.phperz.com/data/img/20170322_20/1490193341_8538.jpg"
- data-src="" />
- <img width="70" height="70" src="http://img.phperz.com/data/img/20170322_10/1490193342_7070.jpg"
- data-src="" />
- </div>
- </center>
可控制渐隐渐现:
- <html>
- <body>
- <div>
- </div>
- <div>
- <button onclick="prevPhoto()">
- Previous
- </button>
- <button onclick="nextPhoto()">
- Next
- </button>
- <button onclick="autoPlay()" id="pp">
- Play
- </button>
- <button onclick="stopPlay()">
- Stop
- </button>
- </div>
- <div>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_3/1490193343_1596.gif"
- data-src="">
- </div>
- </body>
- </html>
- <script>
- function tM(Message) {
- $("testMessage").innerHTML = Message
- }
- function dR(topr) {
- document.write(topr)
- }
- function $(eleId) {
- return document.getElementById(eleId)
- }
- //预载图片
- var imasrc = new Array("http://img.jb51.net/online/slide/10254068.jpg", "http://img.jb51.net/online/slide/10254629.jpg", "http://img.jb51.net/online/slide/10255187.jpg", "http://img.jb51.net/online/slide/10255626.jpg", "http://img.jb51.net/online/slide/10260076.jpg", "http://img.jb51.net/online/slide/10260471.jpg", "http://img.jb51.net/online/slide/10261022.jpg", "http://img.jb51.net/online/slide/10261479.jpg") //图片路径写入数组
- var preIma = new Array() var dB = new Date() for (i = 0; i < imasrc.length; i++) //预载所有图片
- {
- preLoadImg(i)
- }
- function preLoadImg(imgIndex) //预载指定图片图片
- {
- preIma[imgIndex] = new Image() preIma[imgIndex].imgReadyStatus = false preIma[imgIndex].imgIndex = imgIndex preIma[imgIndex].onload = imgLoad preIma[imgIndex].onerror = imgError preIma[imgIndex].onabort = imgAbort preIma[imgIndex].src = imasrc[imgIndex]
- }
- function imgLoad() //预载完成
- {
- this.imgReadyStatus = true
- }
- function imgError() //预载失败
- {
- preLoadImg(this.imgIndex)
- }
- function imgAbort() //预载取消
- {
- preIma.splice(this.imgIndex, 1)
- }
- var checkAgain
- function checkImgReadyStatus() //检索加载状态
- {
- var imgReadyStatus = true
- var persent = 0
- var dE = new Date() for (i = 0; i < preIma.length; i++) {
- if (!preIma[i].imgReadyStatus) {
- imgReadyStatus = false
- } else {
- persent++
- }
- }
- tM("完成:" + (persent / preIma.length * 100).toFixed(2) + "%<br>载入:" + persent + "张图片<br>消耗时间:" + ((dE - dB) / 1000).toFixed(0) + "秒") //显示进度
- if (imgReadyStatus) {
- $("photoContrl").style.display = "block"autoPlay() clearTimeout(checkAgain)
- } else {
- checkAgain = setTimeout(checkImgReadyStatus, 1000) //检索频率
- }
- }
- checkImgReadyStatus()
- //幻灯片效果
- var photoIndex = 0 //初始化图片索引
- var opacity = 10 //初始化透明度
- var direct = "--" //初始化透明度矢量
- var doPlay //定义播放
- var doAutoPlay //定义自动播放
- function prevPhoto() {
- play( - 1)
- } //前翻
- function nextPhoto() {
- play(1)
- } //后翻
- function autoPlay() //自动播放
- {
- if (doAutoPlay) {
- clearInterval(doAutoPlay) doAutoPlay = null $("pp").innerHTML = "Play"
- } else {
- play(1) doAutoPlay = setInterval("play(1)", 3000) //定义自动播放频率
- $("pp").innerHTML = "Pause"
- }
- }
- function stopPlay() //停止播放
- {
- clearInterval(doAutoPlay) doAutoPlay = null photoIndex = 0 play(0) $("pp").innerHTML = "Play"
- }
- function play(act) //执行动作
- {
- if (preIma.length != 0) {
- if (doPlay) {
- clearInterval(doPlay)
- }
- doPlay = setInterval(switchPhoto, 10) photoIndex = (photoIndex + act + preIma.length) % preIma.length
- }
- }
- function switchPhoto() //切换照片
- {
- eval("opacity" + direct) setOpa(opacity) if (opacity <= 1) {
- direct = "++"$("photo").src = preIma[photoIndex].src
- } else if (opacity >= 10) {
- direct = "--"clearInterval(doPlay)
- }
- }
- function setOpa(opacity) //改变透明度
- {
- if ($("photo").style.filter != null) {
- $("photo").style.filter = "alpha(opacity=" + opacity * 10 + ")"
- } else {
- $("photo").style.opacity = opacity / 10
- }
- }
- </script>
来源: http://www.phperz.com/article/17/0715/287656.html