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

<div class="skin-box-bd clear-fix">

<span><DIV class=J_TWidget data-widget-type="Tabs"

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

<DIV style="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_TWidget data-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

}">

<DIV style="DISPLAY: none" class=J_TWidget data-widget-type="Popup"

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

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

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

<DIV style="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

style="PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 570px; PADDING-TOP: 0px"><A

style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"

href="链接网站地址" target=_blank><IMG border=0

src="大图链接地址" width=1920

height=570></A></LI>

<LI

style="PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 570px; PADDING-TOP: 0px"><A

style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"

href="链接网站地址" target=_blank><IMG border=0

src="大图链接地址" width=1920

height=570></A></LI>

<LI

style="PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 570px; PADDING-TOP: 0px"><A

style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"

href="链接网站地址" target=_blank><IMG border=0

src="大图链接地址" width=1920

height=570></A></LI>

<LI

style="PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 570px; PADDING-TOP: 0px"><A

style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"

href="链接网站地址" target=_blank><IMG border=0

src="大图链接地址" width=1920

height=570></A></LI>

<LI

style="PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 570px; PADDING-TOP: 0px"><A

style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"

href="链接网站地址" target=_blank><IMG border=0

src="大图链接地址" width=1920

height=570></A></LI>

</UL></DIV>

</DIV></DIV></DIV>

</span>

</div>

<div class="J_TWidget mypoper" data-widget-config="{'effect': 'fade','circular': true ,'contentCls':'sj-t','navCls':'sj-n','autoplay':'true'}" data-widget-type="Tabs" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;height:600px;overflow:hidden;padding-top:0px;">

<div class="sj-t">

<div class="J_TWidget" data-widget-config="{'contentCls': 'sj-content','navCls': 'sj-n','triggerType': 'click','effect': 'fade','steps': 1,'autoplay': true,'circular': true ,'prevBtnCls':'prev','nextBtnCls':'next'}" data-widget-type="Carousel">

<div class="pa2">

<div class="J_TWidget" data-widget-config="{'trigger':'.sj-content', 'align':{'node':'.mypoper', 'offset':[0,0], 'points':['cl','cl'] } }" data-widget-type="Popup" style="width:950px;display:none;">

<div class="ks-contentbox" style="padding-bottom:0px;margin:0px;padding-left:0px;width:950px;padding-right:0px;padding-top:0px;left:0px;">

<div class="prev" style="float:left;margin-left:50px;">

<img class="J_TWidget" data-ks-lazyload="" data-widget-config="{'png':true,'png_tag':true}" data-widget-type="Compatible" style="height:1px;width:1px;" /></div>

<div class="next" style="float:right;margin-right:50px;">

<img class="J_TWidget" data-ks-lazyload="" data-widget-config="{'png':true,'png_tag':true}" data-widget-type="Compatible" style="height:1px;width:1px;" /></div>

</div>

</div>

<ul class="sj-content" style="padding-bottom:0px;margin:0px;padding-left:0px;width:1440px;padding-right:0px;height:600px;overflow:hidden;padding-top:0px;">

<li style="padding-bottom:0px;list-style-type:none;margin:0px;padding-left:0px;width:1440px;padding-right:0px;height:600px;padding-top:0px;left:-250px;">

<a target="_blank"><img data-ks-lazyload="

图片地址" /></a></li>

<li style="padding-bottom:0px;list-style-type:none;margin:0px;padding-left:0px;width:440px;padding-right:0px;height:600px;padding-top:0px;left:-250px;">

<a target="_blank"><img data-ks-lazyload="

图片地址" /></a></li>

</ul>

</div>

<div style="width:1920px;display:none;height:0px;overflow:hidden;">

<ul class="sj-t" style="padding-bottom:0px;margin:0px;padding-left:0px;width:1440px;padding-right:0px;height:50px;padding-top:0px;">

<li style="padding-bottom:0px;list-style-type:none;margin:0px;padding-left:0px;width:315px;padding-right:0px;background:black;float:left;height:600px;padding-top:0px;">

</li>

<li style="padding-bottom:0px;list-style-type:none;margin:0px;padding-left:0px;width:315px;padding-right:0px;background:#F8C;float:left;height:8600px;padding-top:0px;">

</li>

</ul>

</div>

<ul class="sj-n" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;display:none;height:1px;padding-top:0px;">

单词解释: width:1440px 这个是图片宽度,亲们可以自己设置多少。

height:600px 这个是图片高度,也是亲们自己设置。

left:-250px 这个是水平位置,图片插入进去没居中的,亲们就慢慢增加或者减少数字,就可以调到居中的哈。有什么问题再密我。

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

<!doctype>

<html>

<head>

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

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

<style type="text/css">

/** 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>

<div class="main">

<div id="container">

<ul class="image">

<li><img alt="Bing" src="images/" /></li>

<li><img alt="Bing" src="images/" /></li>

<li><img alt="Bing" src="images/" /></li>

<li><img alt="Bing" src="images/" /></li>

<li><img alt="Bing" src="images/" /></li>

<li><img alt="Bing" src="images/" /></li>

</ul>

<ul class="sign">

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

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

</ul>

</div>

</div>

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

<script type="text/javascript">

$(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>

希望对你能有所帮助。