<script type="text/javascript"> window.onload = function () { setInterval(step, 1000); } var num = 1; function step() { if (num < 5) { num++; } else { num = 1; } var dom = document.getElementById("imgId"); //更改它images的src属性 dom.src = 'images/' + num + '.jpg'; } </script> </head> <body> <img src="https://www.jb51.net/images/1.jpg"/> </body> </html>
跑马灯：
包含的知识点：计时器的使用，document对象的方法的使用，系统函数的使用，鼠标事件的使用，节点操作的使用，循环语句，判断语句
<script src="https://www.jb51.net/js/jquery-1.8.3.min.js"></script> <script type="text/JavaScript"> ( function ($) { $.fn.extend({ RollTitle: function (opt, callback) { if (!opt) var opt = {}; var _this = this; _this.timer = null; _this.lineH = _this.find("li:first").height(); _this.line = opt.line ? parseInt(opt.line, 15) : parseInt(_this.height() / _this.lineH, 10); _this.speed = opt.speed ? parseInt(opt.speed, 10) : 3000, _this.timespan = opt.timespan ? parseInt(opt.timespan, 13) : 5000; if (_this.line == 0) this.line = 1; _this.upHeight = 0 - _this.line * _this.lineH; _this.scrollUp = function () { _this.animate({ marginTop: _this.upHeight }, _this.speed, function () { for (i = 1; i <= _this.line; i++) { _this.find("li:first").appendTo(_this); } _this.css({ marginTop: 0 }); }); } _this.hover(function () { clearInterval(_this.timer); }, function () { _this.timer = setInterval(function () { _this.scrollUp(); }, _this.timespan); }).mouseout(); } })})(jQuery); </script> </head> <body> <ul > <li>i love you</li> <li>I LOVE YOU</li> <li>I LOVE you</li> <li>i LOVE YOU</li> <li>I love YOU</li> </ul> <br/> <input type="button" value="跑马灯" > <script type="text/javascript"> function test() { $("#RunTopic").find("li:first").appendTo($("#RunTopic")); } </script> </body> </html>
javascript的一番理解，就到这了，以后有关于js的案例会放到这里。希望能帮到大家！！！
以上这篇javascript的理解及经典案例分析就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: