jQuery实现图片简单轮播——div自适应图片img
2015-08-05 22:19
731 查看
今天在网上找图片轮播插件,发现大多功能丰富又跨浏览器。自己也利用jQuery实现了一个。
div自适应图片,图片不失真
循环播放
动态加载图片
只是没有实现动态交互。
这里,banner是图片展示的容器,<span><img/></span>用于实现右上角的关闭按钮
banner:
.pic-close与.pic-close img,我们需要使用绝对定位。并设置圆角,使它看起来像是圆形
li,为后面动态添加的,里面放着图片。当然你也可以直接在HTML中将其写死。
大功告成!代码不多,效果虽然没别人的好看,但是也挺不错的
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.效果图
贴几张图,看看效果相关文章推荐
- C#.net下填充jQuery.datatable犯的二
- struts2中ajax(jQuery)返回值data中文乱码问题
- jquery autocomplete 自动补全
- JQuery速记
- Jquery实现抖动效果
- (转)jQuery.on() 函数详解
- (转)jQuery.on() 函数详解
- 超炫酷的jQuery轮播焦点图 底部带切换缩略图
- jQuery/HTML5响应式焦点图动画应用
- jQuery 3D 女神图片墙 可旋转播放
- yii jquery折叠、弹对话框、拖拽、滑动条、ol和ul列表、局部内容切换
- jQuery UI dialog 参数说明
- jquery获取URL参数
- jquery中attr和prop的区别
- jQuery 实现图片滚动加载()
- jquery.cookie的使用
- jquery获取复选框checkbox的值
- 锋利的JQuery 学习笔记
- JQuery悬停控制图片轮播――代码简单
- 【jquery】jQuery Validate验证框架详解