新版淘宝宽屏轮播代码带缩略图

直接复制改下图片和地址就可以直接用了

<div class="J_TWidget" data-widget-config="{"effect": "fade", "circular": true ,"contentCls":"taobaoux"}" data-widget-type="Tabs" style="height:545px;overflow:hidden;">
	<div class="taobaoux" style="height:550px;">
		<div class="footer-more-trigger" style="width:1920px;height:550px;top:auto;padding:0px;border:none;left:50%;">
			<div class="footer-more-trigger" style="width:1920px;height:550px;padding:0px;border:none;left:-960px;">
				<div data-widget-config="{"contentCls": "taobaoux-com","navCls": "bbs-taobaoux-com","effect": "scrollx","easing": "easeOutStrong","prevBtnCls":"prev1920","nextBtnCls":"next1920","autoplay": true,"viewSize":[1920],"circular": true}" data-widget-type="Carousel" class="J_TWidget">
					<div class="J_TWidget" data-widget-config="{"trigger":".ux1920","align":{"node":".ux1920","offset":[-500,0],"points":["cc","cc"]}}" data-widget-type="Popup" style="display:none;">
						<div class="prev1920" style="font-size:100px;cursor:pointer;opacity:0.5;color:#F00;">
							<
						</div>
					</div>
					<div class="J_TWidget" data-widget-config="{"trigger":".ux1920","align":{"node":".ux1920","offset":[500,0],"points":["cc","cc"]}}" data-widget-type="Popup" style="display:none;">
						<div class="next1920" style="font-size:100px;cursor:pointer;opacity:0.5;color:#F00;">
							>
						</div>
					</div>
					<div style="height:550px;width:1920px;overflow:hidden;padding:0px;margin:0px;" class="ux1920">
						<ul class="taobaoux-com" style="height:550px;width:1920px;padding:0px;margin:0px;">
							<li style="width:1920px;height:550px;padding:0px;margin:0px;">
								 <a target="_blank" href="http://item.taobao.com/item.htm?spm=686.1000925.1000774.19.DJCq42&id=40754166786" style="padding:0px;margin:0px;">
								 <img src="http://img04.taobaocdn.com/imgextra/i4/815810282/TB2AvwcaXXXXXXWXpXXXXXXXXXX_!!815810282.jpg" width="1920px" height="550px" border="0px" /></a>
							</li>
							<li style="width:1920px;height:550px;padding:0px;margin:0px;">
								 <a target="_blank" href="http://item.taobao.com/item.htm?spm=686.1000925.1000774.25.DJCq42&id=40754250495" style="padding:0px;margin:0px;">
								 <img src="http://img02.taobaocdn.com/imgextra/i2/815810282/TB2OrAcaXXXXXaGXpXXXXXXXXXX_!!815810282.jpg" width="1920px" height="550px" border="0px" /></a>
							</li>

							<li style="width:1920px;height:550px;padding:0px;margin:0px;">
								 <a target="_blank" href="http://item.taobao.com/item.htm?spm=686.1000925.1000774.13.DJCq42&id=40776061767" style="padding:0px;margin:0px;">
								 <img src="http://img03.taobaocdn.com/imgextra/i3/815810282/TB2EggbaXXXXXa2XpXXXXXXXXXX_!!815810282.jpg" width="1920px" height="550px" border="0px" /></a>
							</li>
							<li style="width:1920px;height:550px;padding:0px;margin:0px;">
								 <a target="_blank" href="http://snegou.taobao.com/ugo.htm?spm=2013.1.w5002-8374628890.3.E6tJa5" style="padding:0px;margin:0px;">
								 <img src="http://img03.taobaocdn.com/imgextra/i3/815810282/TB2Z9oaaXXXXXafXXXXXXXXXXXX_!!815810282.jpg" width="1920px" height="550px" border="0px" /></a>
							</li>

						</ul>

					</div>
					<div class="footer-more-trigger" style="padding:0px;border:none;left:50%;">
						<div class="footer-more-trigger" style="width:1920px;height:50px;padding:0px;border:none;left:-960px;background:url() repeat;top:505px;">
							<ul class="bbs-taobaoux-com" style="width:950px;height:50px;margin:0 auto;text-align:center;">

								<li style="display:inline;margin:0 5px;cursor:pointer;line-height:50px;">
									 <img src="http://img01.taobaocdn.com/imgextra/i1/815810282/TB25pZhaXXXXXbXXXXXXXXXXXXX_!!815810282.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" />
								</li>
								<li style="display:inline;margin:0 5px;cursor:pointer;line-height:50px;">
									 <img src="http://img03.taobaocdn.com/imgextra/i3/815810282/TB2REZgaXXXXXbyXXXXXXXXXXXX_!!815810282.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" />
								</li>

								<li style="display:inline;margin:0 5px;cursor:pointer;line-height:50px;">
									 <img src="http://img03.taobaocdn.com/imgextra/i3/815810282/TB2xv3caXXXXXc7XXXXXXXXXXXX_!!815810282.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" />
								</li>
								<li style="display:inline;margin:0 5px;cursor:pointer;line-height:50px;">
									 <img src="http://img01.taobaocdn.com/imgextra/i1/815810282/TB2uoAaaXXXXXbjXXXXXXXXXXXX_!!815810282.png" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" />
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<ul class="ks-switchable-nav" style="display:none;">
	</ul>
</div>

我的小店:http://snegou.taobao.com/

时间: 2024-11-26 06:31:58

新版淘宝宽屏轮播代码带缩略图的相关文章

js实现淘宝首页图片轮播效果

原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>淘宝首页图片轮播效果</title> <style> <!-- * {margin: 0;padding:0;} body

淘宝店铺装修如何实现全屏轮播

淘宝店装移植有一个神秘的模块,那就是—全屏轮播,这个神奇的模块,能提高店铺的档次,给与顾客视觉冲击,提升顾客印象但是由于淘宝常规用户不支持CSS(用来定义网页样貌的能力),所以我们无法用简单的div+CSS来做出属于自己的全屏轮播强大的装修师们几经研究,终于摆脱了CSS的束绷,结合淘宝的轮播组件,单靠DIV代码就实现了全屏轮播(有缺点) 那么.不要CSS,我们怎么实现全屏轮播呢? 首先我要告诉大家全屏轮播的核心CSS属性—position:absolute 第一节:核心属性 position :

淘宝店如何加入全屏轮播图片

淘宝店如何加入全屏轮播图片? | 浏览:5779 | 更新:2014-06-11 11:31 | 标签: 淘宝 1 2 3 4 5 分步阅读 百度经验:jingyan.baidu.com 开淘宝店的朋友,看到很多店铺有各式各样的轮播大图,很高端大气,您是否也想拥有一款属于自己的轮播图呢?今天我就交给大家如何制作全屏轮播图. 百度经验:jingyan.baidu.com 工具/原料 电脑/网络 百度经验:jingyan.baidu.com 方法/步骤 1 登录淘宝店. 登录到您的淘宝店,点击“卖家

淘宝店铺首页全屏轮播图制作

淘宝店铺首页全屏轮播图制作 | 浏览:1081 | 更新:2014-09-27 12:03 | 标签: 淘宝 很多朋友都想要做全屏轮播图,接下来我来说说我的经验 工具/原料 美图秀秀 方法/步骤 1.首先要制作或者搜寻图片宽度1920高度610的高画质图片 2.上传到淘宝图片空间,并复制其连接 3.将复制的连接替换到如下图以“jpg”结尾的那个地方.(有3个地方,可用3张图替换) 4.复制代码,进入淘宝店铺装修页面,新建“自定义内容区” 5.将自定义内容区置于顶部,编辑,输入代码界面,黏贴代码,

基于jQuery带进度条全屏图片轮播代码

基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="pic"> <ul> <li style="background: url(images/bg1.jpg) center;"> <img src="images/con1.png"> <

jQuery五屏轮播手风琴切换代码

jQuery五屏轮播手风琴切换代码 在线演示本地下载 原文地址:https://www.cnblogs.com/wwhhq/p/8338166.html

关于最近在做的一个js全屏轮播插件

最近去面试了,对方要求我在一个星期内用原生的js代码写一个全屏轮播的插件,第一想法就是跟照片轮播很相似,只是照片轮播是有定义一个宽高度大小已经确定了的容器用来存储所有照片,然后将照片全部左浮动,利用margin-left的值不断变化,来改变显示哪张照片,当达到最后一张的时候,将第一张照片appendChild到最后一张照片的后面,如果有左右移动的话,当到达第一张照片时,还要继续左移动的话,就将最后一张照片利用insertBefore,将最后一张照片放在第一张照片的前面,这两个方法都只是改变子元素

基于jQuery可悬停控制图片轮播代码

基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览   源码下载 实现的代码: <!-- 轮播广告 --> <div id="banner_tabs" class="flexslider"> <ul class="slides"> <li> <a title="" target="_blank"

js最简单焦点图片轮播代码

将下面代码保存为banner.js,在需要显示焦点图的地方调用该js即可. <script type="text/javascript" src="banner.js"></script> 注意:代码中图片路径修改为你自己的图片地址 var widths=725; //焦点图片宽 var w=0; var widthss=widths+w; var heights=295; //焦点图片高 var heightss=heightss+w; v