web前端之圖片輪播特效

時間 2019-11-19

標籤 web 前端圖片特效欄目 HTML 简体版

原文原文鏈接

這周用jquery來實現網頁上常見的圖片輪播效果，下邊是效果圖：javascript

當咱們用鼠標點擊上圖中的向左以及向右按鈕時候，圖片會發生相應的切換效果，代碼以下：css

index.html源代碼：


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>圖片輪播</title>
  <link href='./index.css' type='text/css' rel='stylesheet'/>
  <script type="text/javascript" src="jquery-2.1.1.js"></script>
  <script type="text/javascript" src="index.js"></script>
 </head>
 
 <body>
 <div id="pox">
     
	 <img id='pre' src='./imgs/pre1.png'/>
	 
	 <div id='box'>
	 <ul id='ul1_1'>
	 <li><a href=''><img src='./imgs/1.png'></a></li>
	 <li><a href=''><img src='./imgs/2.png'></a></li>
	 <li><a href=''><img src='./imgs/3.png'></a></li>
	 <li><a href=''><img src='./imgs/4.png'></a></li>
	 <li><a href=''><img src='./imgs/5.png'></a></li>
	 <li><a href=''><img src='./imgs/6.png'></a></li>
	 <li><a href=''><img src='./imgs/7.png'></a></li>
	 <li><a href=''><img src='./imgs/8.png'></a></li>
	 <li><a href=''><img src='./imgs/9.png'></a></li>
	 <li><a href=''><img src='./imgs/10.png'></a></li>
	 </ul>
	 
	 </div>
	 <img id='next' src='./imgs/next1.png'/>
 </div>
 </body>
 </html>

inindex.css源代碼

*{
margin:0px;
padding:0px;
}

li{
list-style:none;
}

#pox{
width:1000px;
height:130px;
border-top:2px solid blue;
border-bottom:1px solid blue;
border-left:1px solid blue;
border-right:1px solid blue;
margin:0px auto;
}


#ul1_1{
width:1850px;
height:110px;
margin-left:0px;
}

#ul1_1 li{
float:left;
padding-left:12px;
padding-right:12px;
margin-top:5px;
}

#pre{
float:left;
margin-left:10px;
margin-top:60px;
}

#next{
float:right;
margin-right:10px;
margin-top:-115px;
}


#box{
width:920px;
height:160px;
margin-left:40px;
margin-top:15px;
overflow: hidden;
}
#box #ul1_2{
width:1850px;
height:20px;
float:left;
margin-top:10px;
}

#box #ul1_2 li{
float:left;
padding-left:15px;
line-height:20px;
}
#box #ul1_2 li a{
color:black;

}

#box #ul1_2 li a:hover{
text-decoration:underline;
}

index.js源代碼

$(function(){
	
$('#next').on('click',function(){
	var res=$('#ul1_1').css('margin-left');
	var leftNum=parseInt(res.substr(0,res.length-2));
	if(leftNum<=0&&leftNum>=-860)
    $('#ul1_1').css('margin-left',((leftNum-183)+'px'));
	});
	
$('#pre').on('click',function(){
	var res=$('#ul1_1').css('margin-left');
	var leftNum=parseInt(res.substr(0,res.length-2));
	if(leftNum<0){	
	   $('#ul1_1').css('margin-left',((leftNum+183)+'px'));
	}
});
});

　　特別說明：本實例採用jquery2.0之後的版本，若是是以前版本，可能部分函數沒法使用，請自行改爲以前對應函數。html

圖片輪播原理：首先設置一個大的div盒子，用來包括圖片（只須要包括呈現出來的圖片就好），就如之上圖片上顯示出圖片的那部分（還用邊框包括起來了），對應index.html代碼裏面id爲pox的那個div。以後呢，建立兩個<img>標籤來顯示那兩個向前向後的圖片（否則無法點擊怎麼切換啊？），將對應位置設置好就能夠。再而後就建立一個ul列表來存放須要展現的十張圖片（吐槽：上邊怎麼只顯示五張？？ me：拜託，只有五張圖片你切換你大頭貼啊？？），而後設置以前那個id爲pox的div的一個屬相爲溢出隱藏，也就是：overflow：hidden。這個屬性的意思就是當ul的圖片超出以前div時候就隱藏了，也就是說，其實十張圖片都是存在的，只是超出div盒子的部分被咱們隱藏了。當咱們點擊那兩個按鈕時候，只須要改變ul中呈如今盒子裏面的內容就能夠了，簡單來講，讓ul的margin-left對應增長減小就能夠了。java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。