關於圖片輪播

時間 2019-11-09

標籤關於圖片简体版

原文原文鏈接

開通了很久的博客，直到如今纔開始寫博客，很慚愧。之後爭取每兩天更新一篇博文。其實寫博文不只是爲了可以鞏固本身學到的東西，也是爲了可以和你們分享，只有分享纔可以不斷的進步，只直到學不知道總結，無異於閉門造車。javascript

好了，開始進入正題了。css

圖片輪播算是一個網站不可缺乏的效果了，並且應該也算是前端工程師學的第一個網站效果了，印象都比較深入。我還記得我剛開始作輪播的時候是跟着網站視頻教程一個個代碼敲出來，第一遍不是很明白，返回去再看一遍基本就明白了。html

圖片輪播由好多實現原理，例如改變opacity屬性，改變offsetLeft屬性，利用JQERY作動畫效果等，先來講說第一種改變opacity屬性。前端

opacity屬性java

opacity是CSS3中設置元素的透明度屬性，取值爲0.0~1.0，0.0表示徹底透明，1.0表示徹底不透明。主流瀏覽器基本都支持這個屬性，除了萬惡的IE8及如下版本須要使用filter:Alpha(opacity=10)，該取值範圍是0~100，從徹底透明到徹底不透明。jquery

看到這裏有些人以爲那不是很簡單嗎，只須要設置屬性就行了，真的嗎？瀏覽器

通常說輪播就須要好幾張圖片吧，無論你用div嵌套仍是用li嵌套，他們都是塊元素，單獨佔一行，使用了opacity也只是改變透明度，你還須要將圖片放在一塊重疊起來，這就是用到posiiton:absolute前端工程師

以上就是大概的思路了，如今貼上個人代碼：ide

<div class="slidebanner">
	<ul class="wrap">
		<li>
			<a href="#"><img src="img/01.jpg" /></a>
		</li>
		<li>
			<a href="#"><img src="img/02.jpg" /></a>
		</li>
		<li>
			<a href="#"><img src="img/03.jpg" /></a>
		</li>
	</ul>
</div>
<script type="text/javascript">
　　var items = document.querySelectorAll('.wrap li');
　　var len = items.length;
　　var index = 0;

    function showItem(){
	/*格式化透明度和背景*/
	for(var i=0;i<len;i++){
		items[i].style.opacity = 0;
	}
        /*設置透明度和背景*/
	items[index].style.opacity = 1;
	if(index > len-2){
		index = 0;
	}else{
		index++;
	}
	setTimeout(showItem,3000);
    }
</script>

這是大概的html結構和js代碼，建議本身手動敲，沒有寫上css樣式，因此複製粘貼上後不會有效果。學習

offsetLeft屬性

offsetLeft能夠理解成該盒模結構的左邊離定義好的外盒模左邊的距離，在網上找到一個特別全的圖片，各類距離示意

仍是很清晰的。

使用offsetLeft作輪播的原理就是將全部包裹img的li在一行內顯示，利用overflow：hidden的裁剪功能將超出div容器的內容減掉，最後就是利用定時器變化offseLeft的數值，顯示出來輪播的效果（記得判斷offsetLeft的數值，由於他不是無限寬的，到達必定數值後須要將其清零，進行新一輪的播放）。

下面是部分的代碼，最好仍是本身根據思路敲一遍，這樣理解的透徹一點。

<body>
　　<div id="div1">
	<ul>
		<li><img src="img/1.jpg"/></li>
		<li><img src="img/2.jpg"/></li>
		<li><img src="img/3.jpg"/></li>
		<li><img src="img/4.jpg"/></li>
	</ul>
　　</div>
　　<input type="button" value="left" />
　　<input type="button" value="right" />
</body>

<script>
	var oDiv = document.getElementById('div1');
	var oUl = oDiv.getElementsByTagName('ul')[0];
	var aLi = oUl.getElementsByTagName('li');
	var aInput = document.getElementsByTagName('input');
	var timer = null;
	var speed = 2;
		
	oUl.innerHTML += oUl.innerHTML;
	oUl.style.width = aLi[0].offsetWidth*aLi.length+'px';
		
	timer = setInterval(move,30);
		
	aInput[0].onclick = function(){
		speed = -2;
		move();
	}
	aInput[1].onclick = function(){
		speed =2;
		move();
	}
	function move(){
		if(oUl.offsetLeft<-oUl.offsetWidth/2){
			oUl.style.left = '0';
		}
		if(oUl.offsetLeft>0){
			oUl.style.left = -oUl.offsetWidth/2+'px';
		}
		oUl.style.left = oUl.offsetLeft + speed +'px';
	}
	oUl.onmouseover = function(){
		clearInterval(timer);
	}
	oUl.onmouseout = function(){
		timer = setInterval(move,30);
	}
</script>

建議：

　　一、在使用定時器的時候將運動條件和清除定時器條件分開寫，避免出錯；

　　二、使用定時器以前先清除定時器；

　　三、多元素使用定時器的時候注意屬性的私有化，避免出錯。

下面是CSS樣式

<style>
	*{margin: 0;padding: 0;}
	#div1{width: 712px;height: 108px;margin: 100px auto;position: relative;background: red;overflow: hidden;}
	#div1 ul{position: absolute;left: 0;top: 0;}
	#div1 ul li{width: 178px;height: 108px; float: left;list-style: none;}
</style>

JQUERY的animate（）方法

最後一個就是使用JQUERY的animate來作輪播，這是w3school上的解釋：

animate() 方法執行 CSS 屬性集的自定義動畫。

該方法經過CSS樣式將元素從一個狀態改變爲另外一個狀態。CSS屬性值是逐漸改變的，這樣就能夠建立動畫效果。

只有數字值可建立動畫（好比 "margin:30px"）。字符串值沒法建立動畫（好比 "background-color:red"）。

註釋：使用 "+=" 或 "-=" 來建立相對動畫（relative animations）。

這是我本身寫的一個方法：

/**
 *  圖片輪播
 * @param {Object} elem   運動元素
* @param {Object} size	     運動距離
*/
function toMove(elem,size){
	$(elem).animate({left:'-='+size},2000).delay(2000)
			.animate({left:'-='+size},2000).delay(2000)
			.animate({left:'-='+size},2000,function(){
				$(elem).css('left',0);
				toMove(elem,size);
			}).delay(2000);
}

這個方法不算好，由於我學習的時間不長，各位大神有好的思路或者方法，還請不吝賜教！！

謝謝閱讀，能夠在評論區交流

相關標籤/搜索

每日一句

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