jQuery實現(xiàn)滾動效果

更新時間：2017年11月17日 14:26:56 作者：Dear_Mr

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)滾動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jQuery實現(xiàn)滾動效果展示的具體代碼，供大家參考，具體內(nèi)容如下

1. 圖片輪播：

原理如下：

假設有三張圖片，三張圖片實際上都是存在于頁面上的，但是由于設置的可視部分的大?。ㄟ@里主要考慮寬度）是小于等于一張圖片的大小的，想要看到其他圖片的話，最直接的想法就是將需要顯示的圖片放在可視區(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)導航 -->
 <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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: