js实现图片轮播效果

前端之家收集整理的这篇文章主要介绍了js实现图片轮播效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲解了js实现图片轮播效果代码分享给大家供大家参考,具体内容如下

运行代码如下

具体代码如下

插件是基于jQuery写的,主要实现的功能自动播放、鼠标悬停、左右箭头控制+禁止点击

CSS样式:

.cooperation-Box { position: relative; height: 91px; border-bottom: 1px solid #E0DED9; overflow: hidden; } .cooperation { position: relative; left: 0; height: 50px; padding: 20px 0; } .cooperation li { float: left; width: 205px; text-align: center; } .cooperation li a { display: block; } .cooperation li img { height: 100%; } .cooperation-Box>a { display: block; position: absolute; top: 0; z-index: 9; width: 22px; height: 100%; background: #f5f5f5; font-family: '宋体'; font-size: 18px; color: #aaa; font-weight: bold; text-align: center; line-height: 91px; } .cooperation-Box>a:hover { background: #e5e5e5; } .cooperation-Box .prev { left: 0; border-right: 1px solid #E0DED9; } .cooperation-Box .next { right: 0; border-left: 1px solid #E0DED9; } .cooperation-Box .prev.disabled,.cooperation-Box .next.disabled { background: #fbfbfb; color: #ddd; } .cooperation-Box .prev.disabled:hover,.cooperation-Box .next.disabled:hover { background: #fbfbfb; }

HTML布局( a标签最好加个title属性 ):

JS脚本插件

$.extend({ /* 图片轮播效果 效果: 1、自动滚动 2、鼠标悬停 3、左右控制+禁止点击 调用:$.scroll({Box: '父容器',scrollBox: 'ul',time: 1500}); */ scroll: function(options) { // 默认配置 var defaults = { Box: '.cooperation-Box',// 父容器 scrollBox: '.cooperation',// ul容器 time: 1500 // 切换时间 };
  1. // 扩展配置
  2. var conf = $.extend({},defaults,options);
  3. // <a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>li的个数
  4. var liSize = $(conf.<a href="/tag/Box/" target="_blank" class="keywords">Box</a>).find('li').size();
  5. // <a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>li的宽度
  6. var liWidth = $(conf.<a href="/tag/Box/" target="_blank" class="keywords">Box</a>).find('li:first').width();
  7. // 定义ul的宽度
  8. $(conf.scroll<a href="/tag/Box/" target="_blank" class="keywords">Box</a>).width(liWidth*liSize);
  9. // 右箭头初始化(不可点)
  10. $(conf.<a href="/tag/Box/" target="_blank" class="keywords">Box</a>).find('.next').addClass('disabled');
  11. // 定义一个<a href="/tag/quanjubianliang/" target="_blank" class="keywords">全局变量</a>index索引变量
  12. var index = 0;
  13. // 切换<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>
  14. function switchFunc() {
  15. index++;
  16. if(index > liSize-5) { // 必须有5个<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>在上面
  17. index=liSize-5;
  18. // 把滚动过的<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>到后面,初始left值为0 index值为0
  19. var scrolledLi = $(conf.<a href="/tag/Box/" target="_blank" class="keywords">Box</a>).find('li:lt('+index+')');
  20. $(conf.scroll<a href="/tag/Box/" target="_blank" class="keywords">Box</a>).append(scrolledLi);
  21. $(conf.scroll<a href="/tag/Box/" target="_blank" class="keywords">Box</a>).css('left',0);
  22. index = 0;
  23. }
  24. $(conf.scroll<a href="/tag/Box/" target="_blank" class="keywords">Box</a>).stop(true,true).animate(
  25. {'left': -liWidth*index},500,function() {
  26. $(conf.<a href="/tag/Box/" target="_blank" class="keywords">Box</a>).find('.next').removeClass('disabled');
  27. }
  28. );
  29. }
  30. // <a href="/tag/zidong/" target="_blank" class="keywords">自动</a>播放
  31. var autoPlay = setInterval(function() {switchFunc();},conf.time);
  32. // 鼠标浮上暂停
  33. $(conf.<a href="/tag/Box/" target="_blank" class="keywords">Box</a>).mou<a href="/tag/SEO/" title="SEO">SEO</a>ver(function() {
  34. clearInterval(autoPlay);
  35. });
  36. // 鼠标离开继续
  37. $(conf.<a href="/tag/Box/" target="_blank" class="keywords">Box</a>).mou<a href="/tag/SEO/" title="SEO">SEO</a>ut(function() {
  38. autoPlay = setInterval(function() {switchFunc();},conf.time);
  39. });
  40. // 点击左箭头
  41. $(conf.<a href="/tag/Box/" target="_blank" class="keywords">Box</a>).find('.prev').click(function() {
  42. index++;
  43. if(index >= liSize-5) {
  44. index=liSize-5;
  45. $(this).addClass('disabled');
  46. }
  47. $(conf.scroll<a href="/tag/Box/" target="_blank" class="keywords">Box</a>).stop(true,function() {
  48. $(conf.<a href="/tag/Box/" target="_blank" class="keywords">Box</a>).find('.next').removeClass('disabled');
  49. }
  50. );
  51. });
  52. // 点击右箭头
  53. $(conf.<a href="/tag/Box/" target="_blank" class="keywords">Box</a>).find('.next').click(function() {
  54. index--;
  55. if(index <= 0) {
  56. index = 0;
  57. $(this).addClass('disabled');
  58. }
  59. $(conf.scroll<a href="/tag/Box/" target="_blank" class="keywords">Box</a>).stop(true,function() {
  60. $(conf.<a href="/tag/Box/" target="_blank" class="keywords">Box</a>).find('.prev').removeClass('disabled');
  61. }
  62. );
  63. });
  64. }

});

页面调用

$(function() { $.scroll({time: 1500}); });

希望本文所述对大家学习javascript程序设计有所帮助。

猜你在找的JavaScript相关文章