jQuery104滑動教學

jQuery104是一款非常實用的jQuery插件，可以幫助用戶實現各種滑動效果。下面就為大家介紹一下如何使用jQuery104實現滑動效果。

第一步：引入jQuery104庫文件

<script src="jquery-1.4.min.js"></script>
<script src="jquery104.js"></script>

第二步：HTML頁面設置

<div class="slider">
<div class="slider-container">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</div>

注意：slider是包裹整個滑動效果的盒子，slider-container是用來包裹所有滑動元素的盒子，slide是所有滑動元素。

第三步：CSS樣式設置

.slider {
position: relative;
width: 600px;
height: 300px;
overflow: hidden;
}
.slider-container {
position: absolute;
width: 2400px;
height: 300px;
}
.slide {
width: 600px;
height: 300px;
float: left;
}

注意：slider設置了寬高和overflow屬性，slider-container寬度設置為所有slide寬度之和，然后通過絕對定位實現滑動效果；slide設置寬高和浮動屬性。

第四步：jQuery104代碼實現

$('.slider').slider({
autoPlay: true,
interval: 4000
});

注意：autoPlay參數設置為true，表示自動播放；interval參數設置為4000ms，表示每隔4秒切換一張幻燈片。

通過以上步驟，就可以輕松使用jQuery104實現滑動效果。