多張圖片的左右切換特效，實現迴圈切換
阿新 • • 發佈：2019-01-30
一個頁面同時要顯示多個圖片，並且需要實現這多個圖片的迴圈切換。
貼程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> css檔案：
@charset "utf-8";
/**基本格式開始***************/
*{word-break:break-all;}
body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,p
{margin:0 auto;padding:0px;font-size:12px; font-family:微軟雅黑;width:100%;}
ul{list-style:none;}
img,a img {border:none;}
a{text-decoration:none;}
a{color:#000;}
a:hover{text-decoration:none;}
/**基本格式結束***************/
/*森科單頁頭部開始*/
.bodyCon08{background:url(../images/dy_pic11.jpg);}
.bodyCon08 .students{margin:0 auto;width:1100px;height:480px;position:relative;}
.bodyCon08 .students p.PP{width:510px;height:50px;font-size:16px;color:#333;text-align:center;position:absolute;top:60px; left:300px;}
#four_flash{position:relative;width:1100px;height:400px; margin:0 auto;position:absolute;bottom:40px;}
#four_flash .flashBg{width:998px;height:400px; margin:0 auto;position:relative;overflow:hidden;}
#four_flash .flashBg ul.mobile{width:200%;height:400px; position:absolute;top:15; left:0;}
#four_flash .flashBg ul.mobile li{border:10px solid #2E324B;float:left;width:280px;height:340px;margin-left:26px;padding-top:40px;color:#6C6E85;}
#four_flash .flashBg ul.mobile li:hover{border:10px solid #343851; color:#fff;}
#four_flash .flashBg ul.mobile li img{width:140px;height:140px;display:block; margin:0 auto;border:10px solid #343851; border-radius:82px;}
#four_flash .flashBg ul.mobile li dd{font-size:20px;width:250px;line-height:60px;text-align:center;border-bottom:1px solid #6C6E85;}
#four_flash .flashBg ul.mobile li p{font-size:16px; text-align:center;width:250px; line-height:24px;margin-top:10px;}
#four_flash .flashBg ul.mobile li a{display:block;background:url(../images/jiantou.png);width:31px;height:31px;border:0px;margin:8px auto;}
#four_flash .flashBg ul.mobile li a:hover{background:url(../images/jiantou2.png);}
#four_flash .but_left{width:50px;height:100px;position:absolute; top:136px; left:0px;}
#four_flash .but_right{width:50px;height:100px; position:absolute; top:136px; right:0px;}
#four_flash .but_left:hover{background:url(../images/qianxleft1.png) no-repeat;}
#four_flash .but_right:hover{background:url(../images/qianxr1.png) no-repeat;}接下來主要解釋一下js裡面的左右切換函式
$("#four_flash .but_right img").click(function(){//右切換
$self = $('.mobile');//選取ul物件
$self.stop().animate({"margin-left" : -326 +"px"},800 , function(){
//326是一個li元素的width，先將ul整體向左移出一個li
$self.css({"margin-left":"0px"}).find("li:first").appendTo($self);
//將移出的那個li**剪下**到ul的末尾，然後將ul的margin-left設為0。
});
});
$("#four_flash .but_left img").click(function(){//左切換
$self = $('.mobile');
$self.css({"margin-left" : -326 +"px"}).find("li:last").prependTo($self);
//將ul的最後一個li剪下到ul的第一個li，然後將其margin-left設為-326。
$self.stop().animate({"margin-left" : "0px"},800 , function(){});//顯示
});主要是appendTo和prependTo的妙用。