jquery实现轮播图并点击轮播图跳转到指定页面

好的，以下是一个简单的实现方式：

HTML部分：

<div class="slider">
  <ul class="slider-list">
    <li><a href="page1.html"><img src="img1.jpg"></a></li>
    <li><a href="page2.html"><img src="img2.jpg"></a></li>
    <li><a href="page3.html"><img src="img3.jpg"></a></li>
  </ul>
</div>

CSS部分：

.slider {
  position: relative;
  overflow: hidden;
}
.slider-list {
  position: absolute;
  left: 0;
  top: 0;
  width: 300%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.slider-list li {
  float: left;
  width: 33.33%;
}
.slider-list img {
  display: block;
  width: 100%;
  height: auto;
}

JavaScript部分：

$(function() {
  var $slider = $('.slider');
  var $sliderList = $('.slider-list');
  var $sliderItems = $sliderList.find('li');
  var $sliderNav = $('<div class="slider-nav"></div>').appendTo($slider);
  
  // 创建导航按钮
  $sliderItems.each(function(index) {
    var $navItem = $('<span class="slider-nav-item"></span>').appendTo($sliderNav);
    $navItem.on('click', function() {
      $sliderList.stop().animate({ left: '-' + (index*100) + '%' }, 500);
    });
  });
  
  // 自动轮播
  setInterval(function() {
    var $activeItem = $sliderNav.find('.active');
    var activeIndex = $activeItem.index();
    var nextIndex = (activeIndex + 1) % $sliderItems.length;
    var $nextItem = $sliderNav.find('.slider-nav-item').eq(nextIndex);
    $nextItem.trigger('click');
  }, 3000);
});

解释一下：

1. HTML部分创建了一个包含图片的轮播图，每个图片都有一个链接指向不同的页面。
2. CSS部分定义了轮播图的样式，包括容器、列表、列表项和图片等。
3. JavaScript部分使用jQuery实现了轮播图的自动播放和导航按钮的点击切换。其中，导航按钮的点击事件会触发列表的动画效果，切换到相应的图片位置。自动轮播使用了setInterval函数实现，每隔一段时间自动切换到下一张图片。

注意：以上代码仅供参考，具体实现方式可以根据实际需要进行调整。