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

我就是我 2022-08-03 11:59 193阅读 0赞

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

贴几张图，看看效果

![Center][]

![Center 1][]

#  #

[Center]: /images/20220731/e3d24b3358f14d63ad2cdb21abb74605.png
[Center 1]: /images/20220731/4f09be4b578641b78b83cfb22b7670d8.png