淘宝全屏轮播代码(淘宝全屏的轮播代码是怎么做的)

中国机械与配件网2024年01月19日 22:591780

大家好，今天小编来为大家解答淘宝全屏轮播代码这个问题，淘宝全屏的轮播代码是怎么做的很多人还不知道，现在让我们一起来看看吧！

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

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

<!doctype>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

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

<styletype="text/css">

/**cssReset**/

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%;

}

/**cssResetend**/

/**Page**/

body

{

background-color:#ccc;

margin:0auto;

text-align:center;

}

.main

{

font-size:12px;

margin:80pxauto;

width:900px;

height:600px;

}

#container

{

width:800px;

height:449px;

position:relative;

overflow:hidden;

}

#container.image

{

position:absolute;

height:449px;

width:4800px;

}

#container.imageli

{

float:left;

width:800px;

height:449px;

position:relative;

overflow:hidden;

background:#000;

}

#container.sign

{

bottom:0px;

position:absolute;

background:url("images/bg_tran.png");

width:800px;

padding-left:600px;

}

#container.signli

{

float:left;

color:Gray;

text-align:center;

line-height:16px;

width:16px;

height:16px;

font-family:Arial;

cursor:pointer;

overflow:hidden;

margin:6px8px;

background-color:#fff;

}

#container.signli.on

{

color:White;

background-color:Maroon;

}

/**Pageend**/

</style>

</head>

<body>

<divclass="main">

<divid="container">

<ulclass="image">

</ul>

<ulclass="sign">

<liclass="on">1</li>

</ul>

</div>

<scripttype="text/javascript"src="js/jquery-1.4.2.min.js"></script>

<scripttype="text/javascript">

$(function(){

varlen=$(".image>li").length;

vari=0;

functionturn(){

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);

varindex=$(this).index();

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

showImg(index);

set=setInterval(turn,5000);

});

set=setInterval(turn,5000);

});

functionshowImg(index){

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

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

}

</script>

</body>

</html>

希望对你能有所帮助。

淘宝全屏的轮播代码是怎么做的

<divclass="skin-box-bdclear-fix">

<span><DIVclass=J_TWidgetdata-widget-type="Tabs"

data-widget-config="{'effect':'fade','circular':true,'navCls':'toseise','activeTriggerCls':'odslos','contentCls':'piaofu'}">

<DIVstyle="HEIGHT:550px"class=piaofu>

<DIV

style="Z-INDEX:0;PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;WIDTH:1920px;PADDING-RIGHT:0px;TOP:0px;PADDING-TOP:0px;LEFT:-485px"

class=J_TWidgetdata-widget-type="Carousel"

data-widget-config="{ 'contentCls':'slide-kun1362899830209content', 'triggerCls':'slide-kun1362899830209triggers', 'navCls':'slide-kun1362899830209triggers', 'triggerType':'mouse', 'effect':'scrollx', 'prevBtnCls':'prev', 'nextBtnCls':'next', 'steps':1, 'autoplay':true, 'viewSize':[1920], 'circular':true }">

<DIVstyle="DISPLAY:none"class=J_TWidgetdata-widget-type="Popup"

data-widget-config="{'trigger':'.first-trigger2','align':{'node':'.first-trigger2','offset':[0,0],'points':['cc','cc']}}">

<DIVstyle="WIDTH:90px;FLOAT:left;HEIGHT:90px"class=prev><IMG

src="左点击"></DIV>

<DIVstyle="WIDTH:90px;HEIGHT:90px;MARGIN-LEFT:950px"class=next><IMG

src="右点击"></DIV></DIV>

<DIV

style="PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;WIDTH:1920px;PADDING-RIGHT:0px;HEIGHT:570px;OVERFLOW:hidden;PADDING-TOP:0px"

class=first-trigger2>

<UL

style="PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;WIDTH:1920px;PADDING-RIGHT:0px;HEIGHT:570px;PADDING-TOP:0px"

class=slide-kun1362899830209content>

<LI