jQuery怎么實現(xiàn)圖片滾動效果

發(fā)布時間：2022-03-31 09:49:13 來源：億速云閱讀：305 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹“jQuery怎么實現(xiàn)圖片滾動效果”，在日常操作中，相信很多人在jQuery怎么實現(xiàn)圖片滾動效果問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”jQuery怎么實現(xiàn)圖片滾動效果”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習吧！

1. 圖片輪播：

原理如下：

假設(shè)有三張圖片，三張圖片實際上都是存在于頁面上的，但是由于設(shè)置的可視部分的大?。ㄟ@里主要考慮寬度）是小于等于一張圖片的大小的，想要看到其他圖片的話，最直接的想法就是將需要顯示的圖片放在可視區(qū)域，也就是說需要改變的是整個圖片區(qū)域的偏移值（left/right）

具體實現(xiàn)：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <script type="text/javascript" src="jquery.min.js"></script>
 <link rel="stylesheet" type="text/css" href="./style.css" rel="external nofollow" >
</head>
<body>
 <div class="carousel">
 <div class="Con">
 <!-- 輪播(carousel)項目 -->
  <div class="scroll">
  <img src="./pic/1.jpg">
  <img src="./pic/2.jpg">
  <img src="./pic/3.jpg">
  <img src="./pic/4.jpg">
  <img src="./pic/5.jpg">
  <img src="./pic/6.jpg">
  <img src="./pic/7.jpg">  
  </div>

  <!-- 輪播(carousel)指標 -->
  <div class="But">
  <span class="active"></span> <!-- 0 * img.width -->
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </div> 
 </div>

 <!-- 輪播(carousel)導(dǎo)航 -->
 <a href="javascript:void(0)" class="prev" data-slide="prev"> << </a>
 <a href="javascript:void(0)" class="next" data-slide="next"> >> </a>
 </div>
</body>
</html>

$(function() {
 var _index = 0;
 var time = 0;
 $(".But span").click(function() {
 _index = $(this).index();
 play(_index);
 });

 function play(index) {
 $(".But span").eq(index).addClass('active').siblings('span').removeClass('active');
 $('.scroll').animate({left: -(_index*1024)}, 500);
 }

 function autoPlay() {
 time = setInterval(function() {
 _index++;
 if(_index > 6) {
 $('.scroll').css("left", 0);
 _index = 0;
 }
 play(_index);
 }, 3000);
 }
 autoPlay();
 $('.prev').click(function() {
 if(_index <= 0) {
 return;
 }
 clearInterval(time);

 play(--_index);
 autoPlay();
 });
 $('.next').click(function() {
 if(_index >= 6) {
 return;
 }
 clearInterval(time);
 play(++_index);
 autoPlay();
 });  
});

2. 上下滾動

這里以文字滾動為示例：就是利用定時器，在一定的時間間隔后不斷的將ul中的最后一個li元素插入到ul的第一個li元素中

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <script type="text/javascript" src="jquery.min.js"></script>
 <style type="text/css">
 .ul-list li {
 text-decoration: none;
 list-style: none;
 }
 </style>
</head>
<body>
 <ul class="ul-list">
 <li><a href="#">本地數(shù)據(jù)正反查詢的實現(xiàn)例子</a></li>
 <li><a href="#">A-star尋路算法</a></li>
 <li><a href="#">node.js的querystring.stringify的使用</a></li>
 <li><a href="#">利用事件委托寫一個簡易掃雷游戲</a></li>
 <li><a href="#">懶加載（延遲加載）</a></li>
 <li><a href="#">JS中XML的解析</a></li>
 </ul>
 <script type="text/javascript">
 setInterval(function() {
 $('.ul-list li:last').css({'height':'0px', 'opacity':"0"}).insertBefore(".ul-list li:first").animate({'height':'25px', 'opacity': '1'}, 'slow', function() {
 $(this).removeAttr('style');
 })
 }, 3000);
 </script>
</body>
</html>

到此，關(guān)于“jQuery怎么實現(xiàn)圖片滾動效果”的學(xué)習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習，快去試試吧！若想繼續(xù)學(xué)習更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

向AI問一下細節(jié)

jQuery怎么實現(xiàn)圖片滾動效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽