溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用jQuery實現圖片切換效果的示例？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
動畫：點擊左右按鈕實現圖片切換
jQuery方法：animate(), stop(), first(), last(), siblings(), appendTo(), prependTo(), attr(), addClass(), removeClass(), eq()
動畫效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片切換</title>
<script src="../jquery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.main{
margin: 50px auto;
width: 538px;
height: 405px;
overflow: hidden;
position: relative;
}
img{
width: 538px;
height: 405px;
}
.main .big{
width: 3766px;
height: 405px;
}
.big li{
float: left;
width: 538px;
height: 405px;
}
.icon div{
position: absolute;
top: 180px;
width: 40px;
height: 35px;
line-height: 35px;
background: rgb(114,275,200);
font-size:30px;
font-weight: bold;
text-align: center;
color: #fff;
}
.left{
left: 10px;
border: 1px solid #003eff;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.right{
right: 10px;
border: 1px solid #003eff;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.small{
position:absolute;
bottom:10px;
width: 538px;
height:52px;
}
.small li{
float: left;
margin-left:4px;
padding: 4px;
width: 64px;
height: 45px;
}
.small li.active{
background: orange;
}
.small li img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="main">
<ul class="big">
<li title="0"><img src="images/1.jpg" alt="圖片1"></li>
<li title="1"><img src="images/2.jpg" alt="圖片1"></li>
<li title="2"><img src="images/3.jpg" alt="圖片1"></li>
<li title="3"><img src="images/4.jpg" alt="圖片1"></li>
<li title="4"><img src="images/5.jpg" alt="圖片1"></li>
<li title="5"><img src="images/6.jpg" alt="圖片1"></li>
<li title="6"><img src="images/7.jpg" alt="圖片1"></li>
</ul>
<ul class="small">
<li class="active"><img src="images/1.jpg" alt="圖片1"></li>
<li><img src="images/2.jpg" alt="圖片1"></li>
<li><img src="images/3.jpg" alt="圖片1"></li>
<li><img src="images/4.jpg" alt="圖片1"></li>
<li><img src="images/5.jpg" alt="圖片1"></li>
<li><img src="images/6.jpg" alt="圖片1"></li>
<li><img src="images/7.jpg" alt="圖片1"></li>
</ul>
<div class="icon">
<div class="left"><</div>
<div class="right">> </div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var li_width=$(".big li").first().innerWidth();
var index;
//改變預覽圖片的類名
function changeClass(){
var index=$(".big li").attr("title");
$(".small li").eq(index).addClass("active").siblings().removeClass("active");
}
//點擊向右按鈕，ul.big向左移動一張圖片的寬度，顯示下一張圖片（此時第一張圖片已經看不到）。動畫結束后將第一張圖片放到ul的最后，同時將ul.big的marginLeft設為0
$(".right").click(function () {
$(".big").stop(true).animate({"marginLeft":-li_width},1000,function () {
$(".big li").first().appendTo($(".big"));
$(".big").css("marginLeft", 0);
changeClass();
});
});
點擊向右按鈕,瞬間將最后一張圖片移至最前端同時使ul.big向左移一張圖片的寬度（顯示的圖片不變）。然后執行動畫ul.big向右移動將剛移至前面的圖片顯示出來
$(".left").click(function () {
$(".big").css("marginLeft",-li_width);
$(".big li").last().prependTo($(".big"));
$(".big").stop(true).animate({"marginLeft":0},1000,function(){
changeClass();
}) ;
});
});
</script>
</body>
</html>看完上述內容，你們掌握使用jQuery實現圖片切換效果的示例的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
