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是图片展示的容器，用于实现右上角的关闭按钮

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();//隐藏播放面板
    });