您的位置：首页 > 百科管理 > 详情

全屏海报轮番代码-求淘宝全屏海报轮播html代码

原创：找图网 2023-06-24 14:59:51

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<title>pic player</title>

"></script>

</head>

img{border:0;}

</style>

<body>

there is a pic-player

</div>

var p = $('#picplayer');

var pics1 = [{url:'

',link:'

',time:5000},{url:'

',link:'

',time:4000},{url:'

',link:'

',time:6000},{url:'

',link:'

',time:6000},{url:'

',link:'

',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=0;i<;i++)

{

//添加图片到容器中

c.append('<a href="'+pics[i].link+'" target="_blank"><img id="picitem'+i+'" style="display: none;z-index:'+i+'" src="'+pics[i].url+'" /></a>');

}

//按钮容器,绝对定位在右下角

p.append('<div id="picbtnHolder" style="position:absolute;top:'+(h-25)+'px;width:'+w+'px;height:20px;z-index:10000;"></div>');

var btnHolder = $('#picbtnHolder');

('<div id="picbtns" style="float:right; padding-right:1px;"></div>');

var btns = $('#picbtns');

for(var i=0;i<;i++)

{

//增加图片对应的按钮

('<span id="picbtn'+i+'" style="cursor:pointer; border:solid 1px #ccc;background-color:#eee; display:inline-block;"> '+(i+1)+' </span> ');

$('#picbtn'+i).data('index',i);

$('#picbtn'+i).click(

function(event)

{

if(('src') == $('#picitem'+$(this).data('index')).attr('src'))

{

return;

}

setSelectedItem($(this).data('index'));

}

);

}

(' ');

///

setSelectedItem(0);

//显示指定的图片index

function setSelectedItem(index)

{

selectedIndex = index;

clearInterval(playID);

//alert(index);

if(selectedItem)('fast');

selectedItem = $('#picitem'+index);

('slow');

if(selectedBtn)

{

('backgroundColor','#eee');

('color','#000');

}

selectedBtn = $('#picbtn'+index);

('backgroundColor','#000');

('color','#fff');

//自动播放

playID = setInterval(function()

{

var index = selectedIndex+1;

if(index > -1)index=0;

setSelectedItem(index);

},pics[index].time);

}

</script>

</body>

</html>

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

这是我用JQuery写的,图片自己添加

<!doctype>

<html>

<head>

<title>图片平滑切换</title>

/** css Reset **/

body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, p, th, td {

padding: 0;

margin: 0;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

fieldset, img {

border: 0;

}

ul,li{list-style:none;}

h1, h2, h3, h4, h5, h6 {

font-weight: normal;

font-size: 100%;

}

/** css Reset end **/

/** Page **/

body

{

background-color:#ccc;

margin:0 auto;

text-align:center;

}

.main

{

font-size:12px;

margin:80px auto;

width:900px;

height:600px;

}

#container

{

width:800px;

height:449px;

position:relative;

overflow:hidden;

}

#container .image

{

position:absolute;

height:449px;

width:4800px;

}

#container .image li

{

float:left;

width:800px;

height:449px;

position:relative;

overflow:hidden;

background:#000;

}

#container .sign

{

bottom:0px;

position:absolute;

background:url("images/bg_");

width:800px;

padding-left:600px;

}

#container .sign li

{

float:left;

color:Gray;

text-align:center;

line-height:16px;

width:16px;

height:16px;

font-family:Arial;

cursor:pointer;

overflow:hidden;

margin:6px 8px;

background-color:#fff;

}

#container .sign

{

color:White;

background-color:Maroon;

}

/** Page end **/

</style>

</head>

<body>

</ul>

</ul>

</div>

$(function () {

var len = $(".image > li").length;

var i = 0;

function turn() {

i = $(".sign > li").index($(".on"))

i < len - 1 ? i++ : i = 0

$(".sign > li").eq(i).addClass("on").siblings("li").removeClass("on");

showImg(i);

}

$(".sign > li").click(function () {

clearInterval(set);

var index = $(this).index();

$(this).addClass("on").siblings("li").removeClass("on");

showImg(index);

set = setInterval(turn, 5000);

});

set = setInterval(turn, 5000);

});

function showImg(index) {

var width = $("#container").width();

$(".image").stop(true, false).animate({ "left": -index * width }, 500);

}

</script>

</body>

</html>

希望对你能有所帮助。

阿里巴巴全屏轮播的代码放哪里，怎么放

首先你要有阿里店铺的全屏轮播代码,其他平台的代码比如淘宝天猫的不支持用在阿里店铺的,然后你换成你的图片,把代码粘贴到952宽的自定义内容区即可,先点源码按钮再粘贴代码,如下图所示,如果你没有代码,那你可以去疯狂的美工阿里巴巴在线装修助手那生成阿里店铺专用的代码。全屏轮播代码或全屏海报代码都有的,没有高度宽度限制~也不用模板,你可以去试试~