jQuery仿途牛网站横幅宽屏图片轮播代码

以下是一个简单的 jQuery 仿途牛网站横幅宽屏图片轮播代码示例：

HTML 代码：

<div id="banner">
  <ul>
    <li><img src="img/banner1.jpg" alt=""></li>
    <li><img src="img/banner2.jpg" alt=""></li>
    <li><img src="img/banner3.jpg" alt=""></li>
  </ul>
</div>

CSS 代码：

#banner {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

#banner ul {
  position: absolute;
  width: 300%;
  height: 100%;
  left: 0;
  top: 0;
}

#banner ul li {
  position: relative;
  float: left;
  width: 33.3333%;
  height: 100%;
  list-style: none;
}

#banner ul li img {
  display: block;
  width: 100%;
  height: 100%;
}

JavaScript 代码：

$(function() {
  var banner = $('#banner');
  var ul = banner.find('ul');
  var li = ul.find('li');
  var width = banner.width();
  var currentIndex = 0;
  var timer;

  function move(offset) {
    ul.animate({
      left: -offset
    }, 500);
  }

  function play()    timer = setInterval(function() {
      currentIndex++;
      if (currentIndex === li.length) {
        currentIndex = 0;
      }
      move(currentIndex * width);
    }, 3000);
  }

  function stop() {
    clearInterval(timer);
  }

  li.eq(0).clone().appendTo(ul);
  li.eq(-1).clone().prependTo(ul);

  ul.css('left', -width);
  ul.css('width', width * (li.length + 2));

  banner.hover(stop, play);
  play();
});

此代码可实现图片自动轮播，鼠标移入停止轮播，移出继续轮播的效果。需要注意的是，代码中的图片路径需要根据实际情况进行修改。