HTML和JQuery是我們在編寫Web頁面時經常使用的工具。其中，左右滑動效果被廣泛應用于圖庫、輪播圖等場合，今天，我來介紹一下使用HTML和JQuery實現左右滑動效果的代碼。
<html>
<head>
<title>左右滑動效果</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
.slider{
width:600px;
overflow:hidden;
margin:0 auto;
}
.slider ul{
list-style:none;
width:3000px;
padding:0;
margin:0;
}
.slider ul li{
float:left;
width:600px;
height:400px;
}
.btn{
position:relative;
top:-200px;
left:-30px;
z-index:99;
}
</style>
</head>
<body>
<div class="slider">
<ul>
<li><img src="img1.jpg" alt=""></li>
<li><img src="img2.jpg" alt=""></li>
<li><img src="img3.jpg" alt=""></li>
<li><img src="img4.jpg" alt=""></li>
<li><img src="img5.jpg" alt=""></li>
</ul>
</div>
<div class="btn">
<button class="prev">prev</button>
<button class="next">next</button>
</div>
</body>
<script>
$(document).ready(function(){
var index = 0;
var len = $('.slider li').length;
var page = len/5 + 1;
$('.prev').click(function(){
index--;
if(index<0){
index = page-1;
$('.slider ul').css('left',-(page-1)*600+'px');
}
$('.slider ul').animate({'left':-index*600+'px'},
{duration:1000, easing:'swing'});
})
$('.next').click(function(){
index++;
if(index>=page){
index=0;
$('.slider ul').css('left',0);
}
$('.slider ul').animate({'left':-index*600+'px'},
{duration:1000, easing:'swing'});
})
})
</script>
</html>上面的代碼實現了一組包含五張圖片的輪播圖，并為其添加了左右切換按鈕。其中，slider類用來定義整個輪播圖的樣式，ul和li標簽用來構建圖片列表，btn類用來定義左右切換按鈕的樣式。這里使用了JQuery中的animate方法來實現切換效果，duration參數指定動畫持續時間，easing參數指定動畫的緩動效果。
以上就是使用HTML和JQuery實現左右滑動效果的代碼，希望對大家有所幫助。
上一篇html js 代碼