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脚本插件：

页面调用：

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