救急 求淘宝全屏海报轮播html代码

html-css011

救急 求淘宝全屏海报轮播html代码,第1张

淘宝的没有，不过类似有的，可以根据自己的需要稍作修改

<!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>

1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。

2、这里是html文件，引入css和html代码文件，如图所示。

3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。

4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。

5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。

你要天猫的还是淘宝的

我现在只有全屏的，不是轮播的，需要的话，我可以去找找

淘宝：

<div style="height:550px">

<div class="footer-more-trigger" style="width:1920pxheight:550pxtop:autopadding:0pxborder:noneleft:50%">

<div class="footer-more-trigger" style="width:1920pxheight:600pxpadding:0pxborder:noneleft:-50%">

<img border="0" height="550px" src="——————图片地址——————" width="1920px" /></div>

</div>

</div>

天猫：

<div style="height: 【高：例600】px">

<div class="sn-simple-logo" style="padding-bottom: 0px padding-left: 0px padding-right: 0px top: auto padding-top: 0px left: 50%">

<div class="sn-simple-logo" style="padding-bottom: 0px padding-left: 0px padding-right: 0px top: auto padding-top: 0px left: -960px">

<a href="【产品链接】" style="width: 1920px display: block height: 866px" target="_blank"><img alt="全屏海报" border="0" src="【图片链接】" /></a></div>

</div>

</div>