淘宝首页幻灯片（二）居中按钮源代码

今天的工作内容用到了淘宝店铺的首页幻灯片的，按钮居中的代码，代码的效果图如下

下面装修页面使用的代码：

<div class="slider-promo" style="position: static; height: 586px"><!-- 此处定义幻灯片的高586px-->
<div class="lst-trigger grid-s5m0" style="width: 1900px; height: 586px; top: 188px; left: 50%"><!--此处定义高宽和位置-->
<div class="lst-trigger col-sub" style="width: 100%; height: 100%; top: -39px; left: 50%">
<div class="J_TWidget" data-widget-config="{'effect':'fade','autoplay':'ture','activeTriggerCls': 'current','prevBtnCls':'prev','nextBtnCls':'next','navCls':'lst-trigger'}" data-widget-type="Carousel" style="width: 1900px; height: 586px; overflow: hidden"> <!--此处是幻灯片参数的设定-->
<div class="J_TWidget" data-widget-config="{'trigger':'.first-trigger2','align':{'node':'.first-trigger2','offset':[0,-10],'points':['bc','bc']}}" data-widget-type="Popup" style="display: none">
<!--此处定义幻灯片按钮2的位置和属性-->                    </div>
<div class="first-trigger2" style="width: 1900px; height: 586px">
<div class="ks-switchable-content" style="width: 1900px; float: left; height: 586px">
<div>
<a data-attr-replace="[{'type':'href','desc':'轮播图片O1 宝贝页面地址，注意不是图片地址'}]" href="http://taoquan.taobao.com/coupon/shopbonus/buyer_apply.htm?activityId=31604387&sellerId=397341302" target="_blank"><img alt="" data-attr-replace="[{'type':'src','desc':'轮播图片01的图片地址，尺寸为1920x586px'}]" src="http://img01.taobaocdn.com/imgextra/i1/397341302/T2SJjPXlNXXXXXXXXX_!!397341302.jpg" style="width: 1900px; height: 586px" /></a></div><!--此处定义幻灯片图片1-->
<div>
<a data-attr-replace="[{'type':'href','desc':'轮播图片O2 宝贝页面地址，注意不是图片地址'}]" href="http://semir.mall.taobao.com/view_page-660115763.htm" target="_blank"><img alt="" data-attr-replace="[{'type':'src','desc':'轮播图片02的图片地址，尺寸为1920x586px'}]" src="http://img02.taobaocdn.com/imgextra/i2/397341302/T22RPPXblXXXXXXXXX_!!397341302.jpg" style="width: 1900px; height: 586px" /></a></div><!--此处定义幻灯片图片2-->
</div>
<ul class="lst-trigger" style="z-index: 10000; width: 101px; bottom: 22px; left: 910px"><!--此处定义按钮的z轴（z-index）de属性和位置-->
<li class="current">
1</li>
<li>
2</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<p>
</p>

淘宝首页幻灯片（二）居中按钮源代码相关推荐

Android仿淘宝首页UI（附代源代码及示例图片）
Android仿淘宝首页UI(附代源代码及示例图片) 可以收获运行出来的效果部分代码源代码可以收获更改Layout中的文字和drawble中的图片即可生成适应于不同情景的APP,帮助开发者完 ...
批一批淘宝首页的源代码
[url=http://ued.taobao.com/blog/]淘宝UED[/url]团队经常写一些很棒的技术文章,令我印象深刻的有一句话,大意如下: [quote]虽然这种方法比较hack,但是可 ...
HTML+CSS零基础学习笔记（五）— 模拟淘宝首页（静态）
内容概览模拟淘宝首页(静态) 一.项目重难点二.效果图及源码模拟淘宝首页(静态) 一.项目重难点样式重置:在实际开发过程中,我们往往会新建一个单独的CSS文件(reset.css),用于对应H ...
js实现淘宝首页图片轮播效果
原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...
7.25 web前端-淘宝首页设计
hello everybody,许久不见,甚是想念,关于我为什么四天没更新博客的原因就是本次文章的标题,没错,我们老师布置了项目设计,而我这个大怨种选择了淘宝首页这个页面内容多的,以至于我这个小白敲了 ...
还原淘宝首页最顶部的导航栏（含下拉菜单，图标等）
还原了淘宝首页最顶部的导航栏,包括了各个导航的下拉列表等(位置对齐稍微有些偏差,毕竟没有原版设计图),用到了jquery,js,CSS3等知识.没有花时间去做录屏GIF,就几张效果图看下:如下原始导 ...
页面布局（1）：淘宝首页
大家好,我是梅巴哥er. 入职前端后,我相信有很多小伙伴都是从写简单页面或者简单的功能开始入手的.比如活动页面,活动详情页,活动某项交互等. 为了快速适应开发需求,在较短时间内完成手头工作,以便挤出更 ...
HTML+CSS简单的淘宝首页框架布局小练(一）
开的前端的课程,练习淘宝的前台页面的框架,就简单根据理解写了下,(小傻猫)记录学习的经历简单首先分析下淘宝首页的布局框架(小傻猫),自己理解的首先需要注意的是该部分的布局,是将该部分分成量大块布局 ...
基于Vue的淘宝首页跳转商品搜索页的最佳实现方式总结（包括v-model组件间使用技巧总结）
今天在练习淘宝项目的时候,做到一个最为常见的功能,就是从主页搜索框搜索内容,点击搜索后能跳转到详细商品页面,同时用户也能在该页面重新搜索,不必返回主页面再搜,大致意思看下图.其实这个功能很多都有,比如 ...
淘宝首页的搜索规律高级搜索页搜索规律淘宝商家应对的优化策略
探索淘宝掌柜们最关心的问题:淘宝搜索排名有规律可循吗?淘宝的关键词是自然而然的排名呢?还是有规律可循呢?我想这个答案是肯定的,正所谓无规不成方圆,任何事情都有他的规律可循,就看你是怎么去发现了,今天我 ...

淘宝首页幻灯片（二）居中按钮源代码

淘宝首页幻灯片（二）居中按钮源代码相关推荐

最新文章

热门文章

淘宝首页幻灯片（二） 居中按钮源代码

淘宝首页幻灯片（二） 居中按钮源代码相关推荐

最新文章

热门文章

淘宝首页幻灯片（二）居中按钮源代码

淘宝首页幻灯片（二）居中按钮源代码相关推荐