A. 求解淘宝店铺全屏海报图片轮播css代码
<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 这个是水平位置,图片插入进去没居中的,亲们就慢慢增加或者减少数字,就可以调到居中的哈。有什么问题再密我。
B. 免费全屏轮播代码 详细点!!!
你要天猫的还是淘宝的
我现在只有全屏的,不是轮播的,需要的话,我可以去找找
淘宝:
<divstyle="height:550px;">
<divclass="footer-more-trigger"style="width:1920px;height:550px;top:auto;padding:0px;border:none;left:50%;">
<divclass="footer-more-trigger"style="width:1920px;height:600px;padding:0px;border:none;left:-50%;">
<imgborder="0"height="550px"src="——————图片地址——————"width="1920px"/></div>
</div>
</div>
天猫:
<divstyle="height:【高:例600】px">
<divclass="sn-simple-logo"style="padding-bottom:0px;padding-left:0px;padding-right:0px;top:auto;padding-top:0px;left:50%">
<divclass="sn-simple-logo"style="padding-bottom:0px;padding-left:0px;padding-right:0px;top:auto;padding-top:0px;left:-960px">
<ahref="【产品链接】"style="width:1920px;display:block;height:866px"target="_blank"><imgalt="全屏海报"border="0"src="【图片链接】"/></a></div>
</div>
</div>
C. 图片全屏轮播 js代码不知道为什么只播一遍就不动了
不知道你的css是什么样的,所以你的div和span我这里都看不到,我只帮回你改了图的答轮播,
var total = $("#solid ul").children().length;
var now = 0;
var timer = null;
$("#solid ul li").css("display","none");
foo();
timer = setInterval(foo,1000);
function foo() {
$("#solid ul li").eq(now).siblings().css("display","none");
$("#solid ul li").eq(now).fadeIn(400);
now++;
if (now == total) {
now = 0;
}
}
D. 淘宝网装修图片轮播怎样铺满全屏
1.登录淘宝店。
登录到淘宝店,点击“卖家中心”,陆宴进入到店铺管理页面。
2.进入店铺装修。
点击左侧“店铺装修”进入店铺装修页面。
3.添加好自定义页面后,点击页面编辑,进入正式页面编辑框。点击右上角“编辑”按钮,可亏悉碰以进入到编辑区域。
4.进入编辑框后,点销谈击下图画圈的地方,导入以下代码:
<div class="layout grid-m0" data-componentid="231" data-context="bd" data-id="1041995155" data-prototypeid="231" data-widgetid="1041995155">
<div class="col-main">
<div class="main-wrap" data-moles="main" data-width="b950" style="overflow:visible;">
<div class="skin-box tb-mole">
<s class="skin-box-tp"></s>
<div class="skin-box-bd clear-fix">
<div class="J_TWidget" data-widget-config="{"effect": "fade", "circular": true ,"contentCls":"tanchudiv"}" data-widget-type="Tabs" style="height:490px;overflow:hidden;">
<div class="tanchudiv" style="height:500px;">
<div class="footer-more-trigger" style="border-bottom:medium none;border-left:medium none;padding-bottom:0px;padding-left:0px;width:1920px;padding-right:0px;height:500px;border-top:medium none;top:auto;border-right:medium none;padding-top:0px;left:50%;">
<div class="footer-more-trigger" style="border-bottom:medium none;border-left:medium none;padding-bottom:0px;padding-left:0px;width:1920px;padding-right:0px;height:500px;border-top:medium none;border-right:medium none;padding-top:0px;left:-50%;">
<div class="J_TWidget" data-widget-config="{"contentCls": "taobao-kaidian-com","navCls": "taobaokaidian-com","effect": "scrollx","easing": "easeOutStrong","prevBtnCls":"prev","nextBtnCls":"next","autoplay": true,"viewSize":[1920],"circular": true}" data-widget-type="Carousel">
<div class="J_TWidget" data-widget-config="{"trigger":".ux1920","align":{"node":".ux1920","offset":[-480,0],"points":["cc","cc"]}}" data-widget-type="Popup" style="display:none;">
<div class="prev" style="font-size:100px;cursor:pointer;opacity:0.5;">
<span><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/75979125/T2.nOlXbpcXXXXXXXX-75979125.png" title="上一屏" /></span>
</div>
</div>
<div class="J_TWidget" data-widget-config="{"trigger":".ux1920","align":{"node":".ux1920","offset":[480,0],"points":["cc","cc"]}}" data-widget-type="Popup" style="display:none;">
<div class="next" style="font-size:100px;cursor:pointer;opacity:0.5;">
<span><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/75979125/T2d8dTXetdXXXXXXXX-75979125.png" title="下一屏" /></span>
</div>
</div>
<div class="ux1920" style="padding-bottom:0px;margin:0px;padding-left:0px;width:1920px;padding-right:0px;height:500px;overflow:hidden;padding-top:0px;">
<ul class="taobao-kaidian-com" style="padding-bottom:0px;margin:0px;padding-left:0px;width:1920px;padding-right:0px;height:500px;padding-top:0px;">
<li style="padding-bottom:0px;margin:0px;padding-left:0px;width:1920px;padding-right:0px;height:500px;padding-top:0px;">
<span><a data-attr-replace="网络经验 网络经验 网络经验 网络经验" href="http://www.taobao.com/?scene=taobao_shop" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" target="_blank"><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/683164596/TB2fwioXVXXXXawXpXXXXXXXXXX-683164596.jpg" border="0" height="500" width="1920" /></a></span>
</li>
<li style="padding-bottom:0px;margin:0px;padding-left:0px;width:1920px;padding-right:0px;height:500px;padding-top:0px;">
<span><a data-attr-replace="网络经验 网络经验 网络经验 网络经验" href="http://www.taobao.com/?scene=taobao_shop" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" target="_blank"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/683164596/TB288WoXVXXXXXRXpXXXXXXXXXX-683164596.jpg" border="0" height="500" width="1920" /></a></span>
</li>
<li style="padding-bottom:0px;margin:0px;padding-left:0px;width:1920px;padding-right:0px;height:500px;padding-top:0px;">
<span><a data-attr-replace="网络经验 网络经验 网络经验 网络经验" href="http://www.taobao.com/?scene=taobao_shop" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" target="_blank"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/683164596/TB2OhSnXVXXXXaiXpXXXXXXXXXX-683164596.jpg" border="0" height="500" width="1920" /></a></span>
</li>
<li style="padding-bottom:0px;margin:0px;padding-left:0px;width:1920px;padding-right:0px;height:500px;padding-top:0px;">
<span><a data-attr-replace="网络经验 网络经验 网络经验 网络经验" href="http://www.taobao.com/?scene=taobao_shop" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" target="_blank"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/683164596/TB2CfypXVXXXXcvXXXXXXXXXXXX-683164596.jpg" border="0" height="500" width="1920" /></a></span>
</li>
</ul>
</div>
<div class="footer-more-trigger" style="border-bottom:medium none;border-left:medium none;padding-bottom:0px;padding-left:0px;padding-right:0px;border-top:medium none;border-right:medium none;padding-top:0px;left:50%;">
<div class="footer-more-trigger" style="border-bottom:medium none;border-left:medium none;padding-bottom:0px;padding-left:0px;width:1920px;padding-right:0px;height:45px;border-top:medium none;top:444px;border-right:medium none;padding-top:0px;left:-960px;">
<ul class="taobaokaidian-com" style="border-bottom:medium none;text-align:center;border-left:medium none;margin:0px auto;width:1920px;height:45px;border-top:medium none;border-right:medium none;">
<li style="line-height:45px;margin:0px 5px;display:inline;cursor:pointer;">
<span><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/683164596/TB2fwioXVXXXXawXpXXXXXXXXXX-683164596.jpg" style="border-bottom:#33CCFF 2px solid;border-left:#33CCFF 2px solid;margin:5px 0px;vertical-align:middle;border-top:#33CCFF 2px solid;border-right:#33CCFF 2px solid;" border="0" height="48" width="186" /></span>
</li>
<li style="line-height:45px;margin:0px 5px;display:inline;cursor:pointer;">
<span><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/683164596/TB288WoXVXXXXXRXpXXXXXXXXXX-683164596.jpg" style="border-bottom:#33CCFF 2px solid;border-left:#33CCFF 2px solid;margin:5px 0px;vertical-align:middle;border-top:#33CCFF 2px solid;border-right:#33CCFF 2px solid;" border="0" height="48" width="186" /></span>
</li>
<li style="line-height:45px;margin:0px 5px;display:inline;cursor:pointer;">
<span><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/683164596/TB2OhSnXVXXXXaiXpXXXXXXXXXX-683164596.jpg" style="border-bottom:#33CCFF 2px solid;border-left:#33CCFF 2px solid;margin:5px 0px;vertical-align:middle;border-top:#33CCFF 2px solid;border-right:#33CCFF 2px solid;" border="0" height="48" width="186" /></span>
</li>
<li style="line-height:45px;margin:0px 5px;display:inline;cursor:pointer;">
<span><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/683164596/TB2CfypXVXXXXcvXXXXXXXXXXXX-683164596.jpg" style="border-bottom:#33CCFF 2px solid;border-left:#33CCFF 2px solid;margin:5px 0px;vertical-align:middle;border-top:#33CCFF 2px solid;border-right:#33CCFF 2px solid;" border="0" height="48" width="186" /></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<ul class="ks-switchable-nav" style="display:none;">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
5.点击确定,点击右上角的“发布”马上观看轮播图。
E. 求专业版首页图片全屏轮播切换左右按钮控制全屏图片切换代码
<div style="height:590px;">
<div class="悔正footer-more-trigger" style="width:1920px;height:600px;padding:0;border:none;left:50%;top:auto;">
<div class="footer-more-trigger" style="width:100%;height:100%;padding:0;border:none;left:-50%;top:0;">
<div style="height:100%;position:relative;" class="J_TWidget" data-widget-type="Carousel" data-widget-config="{
'contentCls':'sc-co',
'navCls':'lb-na',
'activeTriggerCls': 'hidden',
'prevBtnCls':'lb-p',
'nextBtnCls':'lb-n',
'disableBtnCls':'disable',
'steps':1,
'effect':'scrollx',
'easing':'easeOutStrong',
'ration':'2.0',
'autoplay':true,
'triggerType':'mouse',
'circular':true,
'interval':'5'
}">
<div class="lb-sc" style="height:600px;overflow:hidden;position:relative;z-index:3;">
<ul class="sc-co">
<li style="width:1920px;height:600px;float:left;overflow:hidden;background:url(图片地址) no-repeat center;">
<a style="display:block;height:100%;" href="#" target="_blank"></a>
</li>
<li style="width:1920px;height:600px;float:left;overflow:hidden;background:url(图片地址) no-repeat center;">
<a style="display:block;height:100%;" href="#" target="_blank"></a>
</li>
</ul>
</div>
<div class="kz footer-more-trigger" style="width:100%;height:26px;padding:0;border:none;position:absolute;left:0;z-index:5;top:574px;">
<div class="bg" style="height:100%;background-color:#fff;opacity:0.5;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);"碧州悔>迹瞎</div>
<ul class="h-na1 na1 footer-more-trigger" style="width:auto;padding:0;border:none;float:left;position:absolute;left:50%;top:5px;">
<li class="na-li" style="display:block;width:16px;height:16px;margin:0 5px;float:left;overflow:hidden;line-height:16px;color:#fff;text-align:center;background-color:#c60;position:relative;right:50%;cursor:pointer;">
<span class="sz" style="display:block;width:100%;height:100%;padding:0;border:none;left:0;top:0;text-align:center;">1</span>
</li>
<li class="na-li" style="display:block;width:16px;height:16px;margin:0 5px;float:left;overflow:hidden;line-height:16px;color:#fff;text-align:center;background-color:#c60;position:relative;right:50%;cursor:pointer;">
<span class="sz" style="display:block;width:100%;height:100%;padding:0;border:none;left:0;top:0;text-align:center;">2</span>
</li>
<li class="na-li" style="display:block;width:16px;height:16px;margin:0 5px;float:left;overflow:hidden;line-height:16px;color:#fff;text-align:center;background-color:#c60;position:relative;right:50%;cursor:pointer;">
<span class="sz" style="display:block;width:100%;height:100%;padding:0;border:none;left:0;top:0;text-align:center;">3</span>
</li>
<li class="na-li" style="display:block;width:16px;height:16px;margin:0 5px;float:left;overflow:hidden;line-height:16px;color:#fff;text-align:center;background-color:#c60;position:relative;right:50%;cursor:pointer;">
<span class="sz" style="display:block;width:100%;height:100%;padding:0;border:none;left:0;top:0;text-align:center;">4</span>
</li>
</ul>
<ul class="lb-na na1 footer-more-trigger" style="width:auto;padding:0;border:none;float:left;position:absolute;left:50%;top:5px;">
<li class="na-li hidden" style="display:block;width:16px;height:16px;margin:0 5px;float:left;overflow:hidden;line-height:16px;color:#fff;text-align:center;background-color:#000;position:relative;right:50%;cursor:pointer;">
<span class="sz" style="display:block;width:100%;height:100%;padding:0;border:none;left:0;top:0;text-align:center;">1</span>
</li>
<li class="na-li" style="display:block;width:16px;height:16px;margin:0 5px;float:left;overflow:hidden;line-height:16px;color:#fff;text-align:center;background-color:#000;position:relative;right:50%;cursor:pointer;">
<span class="sz" style="display:block;width:100%;height:100%;padding:0;border:none;left:0;top:0;text-align:center;">2</span>
</li>
<li class="na-li" style="display:block;width:16px;height:16px;margin:0 5px;float:left;overflow:hidden;line-height:16px;color:#fff;text-align:center;background-color:#000;position:relative;right:50%;cursor:pointer;">
<span class="sz" style="display:block;width:100%;height:100%;padding:0;border:none;left:0;top:0;text-align:center;">3</span>
</li>
<li class="na-li" style="display:block;width:16px;height:16px;margin:0 5px;float:left;overflow:hidden;line-height:16px;color:#fff;text-align:center;background-color:#000;position:relative;right:50%;cursor:pointer;">
<span class="sz" style="display:block;width:100%;height:100%;padding:0;border:none;left:0;top:0;text-align:center;">4</span>
</li>
</ul>
</div>
<div style="width:50px;height:80px;top:260px;left:435px;padding:0;border:none;z-index:10;cursor:pointer;" class="lb-p footer-more-trigger" title="上一屏">
<div class="bg" style="height:100%;background-color:#000;opacity:0.5;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);text-align:center;color:#fff;font-size:40px;line-height:80px;font-family:微软雅黑;"><</div>
</div>
<div style="width:50px;height:80px;top:260px;left:1435px;padding:0;border:none;z-index:10;cursor:pointer;" class="lb-n footer-more-trigger" title="下一屏">
<div class="bg" style="height:100%;background-color:#000;opacity:0.5;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);text-align:center;color:#fff;font-size:40px;line-height:80px;font-family:微软雅黑;">></div>
</div>
</div>
</div>
</div>
</div>
把图片地址换成你空间的图片链接
F. 淘宝C店怎么设置轮播图片全屏的,要不要代码啊,请各位高手指教一下,
(一)新建一个自定义
(二)
<div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'contentCls': 'fullScreenPosters','navCls': 'bbs-nav','effect': 'fade','autoplay': false,'circular': false}">
<div style="width:1920px;height:550px;overflow:hidden;" class="fullScreenPosters">
<div style="width: 1920px;left: -485px;">
<!--这里放置你的图片-->
</div>
</div>
<div style="display:none;" class="bbs-nav"></div>
</div>
(三)如果你用的是基础模板 分左右侧装回修的 全屏答后 左侧会被遮盖 我个人觉得 添加些不需要展示的模块占下位置就行了 嘿嘿
G. 全屏轮播图片怎么用代码实现
我这里有案例,希望能帮到你,有问题私信或者留言。贺旁
已经上传纳拍好,自己调整尺洞铅寸即可!
H. 救急 求淘宝全屏海报轮播html代码
这是我用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_tran.png");
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 li.on
{
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/bing-1.jpg" /></li>
<li><img alt="Bing" src="images/bing-2.jpg" /></li>
<li><img alt="Bing" src="images/bing-3.jpg" /></li>
<li><img alt="Bing" src="images/bing-4.jpg" /></li>
<li><img alt="Bing" src="images/bing-5.jpg" /></li>
<li><img alt="Bing" src="images/bing-6.jpg" /></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.min.js"></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>
I. 请教淘宝基础版怎么把图片轮播设置成全屏的,还有宝贝推荐背景怎么用代码设置啊
首先把全屏轮播的海报弄宽度弄成1920或者1440的,然后用代码实现全屏轮播