jQuery实现图片简单轮播——div自适应图片img

时间:2022-11-16 15:56:42

今天在网上找图片轮播插件,发现大多功能丰富又跨浏览器。自己也利用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.效果图

贴几张图,看看效果
jQuery实现图片简单轮播——div自适应图片img


jQuery实现图片简单轮播——div自适应图片img