jQuery的3D轮播效果，带底部图片按钮-洋葱先生-杨少通

洋葱先生-杨少通感谢您的到来

这是一个3D轮播的效果，希望大家喜欢！

预览效果                下载文档     

代码如下：

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

•             <li>
                  <img src="images/172141456_R.jpg" />
              </li>
              <li>
                  <img src="images/172141456_R.jpg" />
              </li>
              <li>
                  <img src="images/184449150_R.jpg" />
              </li>
              <li>
                  <img src="images/195001998_R.jpg" />
              </li>
          </ul>
          <a class="spread-ban-download" href="#" title="下载该推广">点击下载</a>
          <div class="spd-ban-mesh">
              <ul class="spread-ban-small">
                  <li>
                      <img src="images/092950120_R.jpg" />
                  </li>
                  <li>
                      <img src="images/105953334_R.jpg" />
                  </li>
                  <li>
                      <img src="images/112020805_R.jpg" />
                  </li>
                  <li>
                      <img src="images/121306920_R.jpg" />
                  </li>
                  <li>
                      <img src="images/151817631_R.jpg" />
                  </li>
                  <li>
                      <img src="images/171852304_R.jpg" />
                  </li>
  
                  <li class="img-focus">
                      <img src="images/172141456_R.jpg" />
                  </li>
                  <li>
                      <img src="images/172141456_R.jpg" />
                  </li>
                  <li>
                      <img src="images/184449150_R.jpg" />
                  </li>
                  <li>
                      <img src="images/195001998_R.jpg" />
                  </li>
                  <li>
                      <img src="images/092950120_R.jpg" />
                  </li>
                  <li>
                      <img src="images/105953334_R.jpg" />
                  </li>
                  <li>
                      <img src="images/112020805_R.jpg" />
                  </li>
                  <li>
                      <img src="images/121306920_R.jpg" />
                  </li>
                  <li>
                      <img src="images/151817631_R.jpg" />
                  </li>
                  <li>
                      <img src="images/171852304_R.jpg" />
                  </li>
  
                  <li>
                      <img src="images/172141456_R.jpg" />
                  </li>
                  <li>
                      <img src="images/172141456_R.jpg" />
                  </li>
                  <li>
                      <img src="images/184449150_R.jpg" />
                  </li>
                  <li>
                      <img src="images/195001998_R.jpg" />
                  </li>
              </ul>
              <b class="spd-btn spd-btn-lt">&lt;</b>
              <b class="spd-btn spd-btn-rt">&gt;</b>
          </div>
      </div>
  </div>
  <h3 class="go-back" ><a href="javascript:history.go(-1);" >返回上一页</a></h3>
  <script src="js/jquery.js"></script>
  <script type="text/javascript">
      //洋葱先生
      $(function () {
          var cloneIndex, imgFocus=6, imgSize, leftDistance = 0;
          imgSize = $(".spread-ban-big li").size();
          $(".spread-ban-big li,.spread-ban-small li").append("<p></p>");
          for (cloneIndex = 0; cloneIndex < 3; cloneIndex++) {
              $(".spread-ban-big").append($(".spread-ban-big li").eq(cloneIndex).clone().removeClass("img-focus-lt1 img-focus-lt2 img-focus-lt3"));
          }
          $(".spread-ban-big li").click(function () {
              imgFocus = $(this).index();
              fun3DBanner()
          })
          $(".spread-ban-small li").click(function () {
              imgFocus = $(this).index();
              fun3DBanner()
          })
          $(".spd-btn-lt").click(function () {
              imgFocus--;
              fun3DBanner()
          })
          $(".spd-btn-rt").click(function () {
              imgFocus++;
              fun3DBanner()
          })
          var bannerAuto=setInterval(function(){
              imgFocus++;
              fun3DBanner();
          }, 3000);
          $(".spread-banner").hover(function () {
              clearInterval(bannerAuto);
          }, function () {
              bannerAuto = setInterval(function () {
                  imgFocus++;
                  fun3DBanner();
              }, 3000);
          })
          function fun3DBanner() {
            //  var imgSrc = $(this).find("img").attr('src');
            //  $(".spread-ban-download").attr("href", "imgSrc");
              if (imgFocus >= imgSize) {
                  imgFocus -= imgSize;
              }
              if (imgFocus > 11) {
                  if (imgFocus == imgSize - 1)
                      $(".spread-ban-small li").css(" left", "auto");
                  else
                      $(".spread-ban-small li").animate({ left: -69 * (imgFocus - 11) }, 500);
              }
              if (imgFocus < 7) {
                  $(".spread-ban-small li").css("left", "auto");
              }
              if (imgFocus < 0) {
                  $(".spread-ban-small li").animate({ left: -69 * (imgSize - 13) }, 500);
                  imgFocus=imgSize-1;
              }
              $(".spread-ban-big li").eq(imgFocus).addClass("img-focus").siblings().removeClass("img-focus");
              $(".spread-ban-small li").eq(imgFocus).addClass("img-focus").siblings().removeClass("img-focus");
              for (var i = 1; i <= 3; i++) {
                  $(".spread-ban-big li").eq(imgFocus - i).addClass("img-focus-lt" + (4 - i)).siblings().removeClass("img-focus-lt" + (4 - i));
                  $(".spread-ban-big li").eq(imgFocus + i).addClass("img-focus-rt" + (4 - i)).siblings().removeClass("img-focus-rt" + (4 - i));
              }
          }
      })
  </script>
  

代码均为原创，存在不足还请见谅！

如有转载请注明来源： www.dreamload.cn/blog/?p=536&preview=true （洋葱先生-杨少通）