jQuery實現圖片簡單輪播——div自適應圖片img

今天在網上找圖片輪播插件，發現大多功能豐富又跨瀏覽器。自己也利用jQuery實現了一個。

1.實現的功能：

• 利用jQuery，也是跨平臺了嘛
• div自適應圖片，圖片不失真
• 循環播放
• 動態加載圖片
• 只是沒有實現動態交互。

2.代碼實現

2.1 HTML部分

<pre name="code" class="html"><pre name="code" class="html"><div class="banner">
    <span class="pic-close" title="關閉">
        <img src="images/pic-close.png"/>
    </span>
</div>

這裏，banner是圖片展示的容器，<span><img/></span>用於實現右上角的關閉按鈕

2.2 CSS控制

爲了效果更好看，需要對上述的HTML元素進行css樣式設定。

banner：

.banner { 
	position: absolute;
	border:solid 5px #fff;
	top:20%;
	left:20%;
	padding:0;
	background-color:black;
	height:auto !important;
}

.pic-close與.pic-close img,我們需要使用絕對定位。並設置圓角，使它看起來像是圓形

 .pic-close{
	position:absolute;
	width:20px;
	height:20px;
	top:-15px;
	right:-15px;
	border:solid 2px #fff;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
	background-color:#fff;
	cursor:pointer;
}
.pic-close img{
	width:100%;
	height:100%;
}

 li，爲後面動態添加的，裏面放着圖片。當然你也可以直接在HTML中將其寫死。

.banner li{
	list-style: none;
}

2.3 jQuery部分

動態添加圖片。

for(var i=0; i<photo_count;i++){
	    var setphoto="<li style='display:none'><img src='./photos/"+photo_path+"/"+i+".jpg'></li>";//動態添加圖片，例如1.jpg,2.jpg,3.jpg等等
	    $(setphoto)
	        .appendTo(".banner");
	}
	var $li=$(".banner li:first").show();//選擇第一張圖片進行展示
	var time=setInterval(function(){
			$li.hide();		//該圖片隱藏
			$li=$li.next("li");	//移動到下一張圖片
			if($li.length==0)	//若是到最後一張，則定位到第一張
				$li=$(".banner li:first").show();
			else
			    $li.show();        //展示
		},2000);                       //每隔2秒換一張
									
	$(".pic-close").click(function(){
		clearInterval(time);	//刪除定時器
	        $(".banner li").remove();//清空播放列表
		$(".banner").hide();//隱藏播放面板
	});

大功告成！代碼不多，效果雖然沒別人的好看，但是也挺不錯的

3.效果圖

貼幾張圖，看看效果