jQuery實現(xiàn)圖片切換效果
更新時間：2020年10月19日 11:33:05 作者：willard_cui
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)圖片切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery實現(xiàn)圖片切換效果的具體代碼，供大家參考，具體內(nèi)容如下
動畫：點擊左右按鈕實現(xiàn)圖片切換
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向左移動一張圖片的寬度，顯示下一張圖片（此時第一張圖片已經(jīng)看不到）。動畫結束后將第一張圖片放到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向左移一張圖片的寬度（顯示的圖片不變）。然后執(zhí)行動畫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>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹EasyUI高度自適應的問題,比較實用，需要的朋友可以參考下。2016-06-06
我總是樂于嘗試新工具或利用節(jié)省開發(fā)時間的資源。由于市面上存在有許多Web開發(fā)工具，你可能很難縮小搜索范圍。2009-02-02
jQuery中attr()和prop()在修改checked屬性時的區(qū)別
使用語句$.attr('checked',true)，將復選框的屬性改為被選中，在chrome瀏覽器中第一次點擊有效后面就不行了，IE8倒是沒有問題2014-07-07
在網(wǎng)頁中我們經(jīng)常會用到無縫輪播左右循環(huán)效果，今天腳本之家小編給大家?guī)砹嘶趈Query實現(xiàn)無縫輪播與左右點擊效果 ，感興趣的朋友參考下吧2018-05-05
jQuery+canvas實現(xiàn)簡單的球體斜拋及顏色動態(tài)變換效果
這篇文章主要介紹了jQuery+canvas實現(xiàn)簡單的球體斜拋及顏色動態(tài)變換效果,通過jQuery+html5的canvas利用時間函數(shù)進行實時數(shù)學運算動態(tài)繪制拋物線圖形的技巧,需要的朋友可以參考下2016-01-01
我們經(jīng)常遇到要操作DOM元素，例如<select>，在Asp.net中Dropdownlist原型就是select。2010-05-05
jquery中各個事件執(zhí)行順序如下,使用jquery $.ajax的朋友可以參考下。2010-10-10
這篇文章給大家總結了使用jq獲取元素值的常見寫法,文中給大家介紹了詳細的代碼示例,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-12-12
讓jQuery Mobile不顯示討厭loading界面的方法
jQuery Mobile總是顯示討厭的loading界面，下面有個不錯的解決方法，大家可以參考下2014-02-02
這篇文章主要介紹了JQuery CheckBox（復選框）操作方法匯總,本文講解了獲取單個checkbox選中項、獲取多個checkbox選中項、設置第一個checkbox 為選中值、設置最后一個checkbox為選中值等內(nèi)容,需要的朋友可以參考下2015-04-04