<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>pic player</title>
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.2.6.js"></script>
</head>
<style type="text/css">
img{border:0}
</style>
<body>
<div id="picplayer" style="position:relativeoverflow:hiddenwidth:300pxheight:300pxclear:noneborder:solid 1px #ccc">
there is a pic-player
</div>
<script>
var p = $('#picplayer')
var pics1 = [{url:'http://img.jb51.net/online/picPlayer/1.jpg',link:'http://www.jb51.net/#',time:5000},{url:'http://img.jb51.net/online/picPlayer/2.jpg',link:'http://www.jb51.net/#',time:4000},{url:'http://img.jb51.net/online/picPlayer/3.jpg',link:'http://www.jb51.net',time:6000},{url:'http://img.jb51.net/online/picPlayer/2.jpg',link:'http://www.jb51.net',time:6000},{url:'http://img.jb51.net/online/picPlayer/1.jpg',link:'http://www.jb51.net',time:6000}]
initPicPlayer(pics1,p.css('width').split('px')[0],p.css('height').split('px')[0])
//
//
function initPicPlayer(pics,w,h)
{
//选中的图片
var selectedItem
//选中的按钮
var selectedBtn
//自动播放的id
var playID
//选中图片的索引
var selectedIndex
//容器
var p = $('#picplayer')
p.text('')
p.append('<div id="piccontent"></div>')
var c = $('#piccontent')
for(var i=0i<pics.lengthi++)
{
//添加图片到容器中
c.append('<a href="'+pics[i].link+'" target="_blank"><img id="picitem'+i+'" style="display: nonez-index:'+i+'" src="'+pics[i].url+'" /></a>')
}
//按钮容器，绝对定位在右下角
p.append('<div id="picbtnHolder" style="position:absolutetop:'+(h-25)+'pxwidth:'+w+'pxheight:20pxz-index:10000"></div>')
//
var btnHolder = $('#picbtnHolder')
btnHolder.append('<div id="picbtns" style="float:rightpadding-right:1px"></div>')
var btns = $('#picbtns')
//
for(var i=0i<pics.lengthi++)
{
//增加图片对应的按钮
btns.append('<span id="picbtn'+i+'" style="cursor:pointerborder:solid 1px #cccbackground-color:#eeedisplay:inline-block">'+(i+1)+' </span>')
$('#picbtn'+i).data('index',i)
$('#picbtn'+i).click(
function(event)
{
if(selectedItem.attr('src') == $('#picitem'+$(this).data('index')).attr('src'))
{
return
}
setSelectedItem($(this).data('index'))
}
)
}
btns.append(' ')
///
setSelectedItem(0)
//显示指定的图片index
function setSelectedItem(index)
{
selectedIndex = index
clearInterval(playID)
//alert(index)
if(selectedItem)selectedItem.fadeOut('fast')
selectedItem = $('#picitem'+index)
selectedItem.fadeIn('slow')
//
if(selectedBtn)
{
selectedBtn.css('backgroundColor','#eee')
selectedBtn.css('color','#000')
}
selectedBtn = $('#picbtn'+index)
selectedBtn.css('backgroundColor','#000')
selectedBtn.css('color','#fff')
//自动播放
playID = setInterval(function()
{
var index = selectedIndex+1
if(index >pics.length-1)index=0
setSelectedItem(index)
},pics[index].time)
}
}
</script>
</body>
</html>
H5海报是一种带有交互性质的海报。这类作品可将H5页面上的多个元素，包括图片、幻灯、序列帧等合成在一张图片上，进而形成一份专属的定制海报。用户可长按手机屏幕将海报保存到手机相册，以便分享给朋友或发送到朋友圈。扩展资料H5这个词，来自“HTML5”，且是国内的专门称呼，所以老外是完全不知道“H5”是什么的。
所谓“HTML5”，是指“HTML”的第5个版本，而“HTML”，则是指描述网页的`标准语言。因此，HTML5，是第5个版本的“描述网页的标准语言”。
HTML5，或者“H5”， 其实就是一种新的网页形式，是在浏览器中打开的网页应用，也是未来大多数软件存在的形式。
海报这一名称，最早起源于上海，是一种宣传方式。旧时，海报是用于戏剧、电影等演出，活动的招帖。上海的人通常把职业性的戏剧演出称为“海”，而把从事职业性戏剧的表演称为“下海”。作为剧目演出信息的具有宣传性的招来顾客性的张贴物，也许是因为这个，人们便把它叫做“海报”。正规的海报中通常包括活动的性质、主办单位、时间、地点等内容，多用于影视剧和新品宣传中，利用图片、文字、色彩、空间等要素进行完整的结合。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）