夏日博客

A-A+

图片上显示左右箭头的翻页js代码

2016年10月16日 前端设计 暂无评论 阅读 6 views 次

本文章来给各位朋友详细介绍一款关于图片上显示左右箭头的翻页js代码，有需要的朋友可进来参考参考。

本实例使用了javascript的onmousemove 事件。onmousemove 事件会在鼠标指针移动时发生。

语法:

onmousemove="SomeJavaScriptCode"

SomeJavaScriptCode是必需参数。规定该事件发生时执行的 JavaScript。

下面是核心代码,完整代码请在效果页面查看源代码,代码如下:

  1. <script type="text/javascript">  
  2. function KeleyiImgNext(bigimg) {  
  3. var lefturl = "01.html";  
  4. var righturl ="03.html";  
  5. var imgurl = righturl;  
  6. var width = bigimg.width;  
  7. var height = bigimg.height;  
  8. bigimg.onmousedown = bigimg.onmousemove = function () {  
  9. if (event.offsetX < width / 2) {  
  10. imgurl = lefturl;  
  11. if (imgurl != "#")  
  12. bigimg.style.cursor = 'url(images/arr_left.cur),auto';  
  13. else  
  14. bigimg.style.cursor = 'default';  
  15. } else {  
  16. imgurl = righturl;  
  17. if (imgurl != '#')  
  18. bigimg.style.cursor = 'url(images/arr_right.cur),auto';  
  19. else  
  20. bigimg.style.cursor = 'default';  
  21. }  
  22. }  
  23. bigimg.onmouseup = function () {  
  24. if (imgurl != '#')  
  25. top.location = imgurl;  
  26. }//xiariboke.net  
  27. }  
  28. </script>  
  29. <img onmouseover="KeleyiImgNext(this)" src="k02.jpg" alt="keleyi" />  
标签：

给我留言