"淘宝新旺铺2013年采用了一种全屏轮播1920像素大图的代码实现,旨在提升店铺视觉效果和用户体验。这种轮播功能是基于网页前端技术构建的,主要涉及到HTML、CSS以及JavaScript,特别是jQuery库中的组件或插件。" 淘宝新旺铺2013年的设计趋势之一是全屏大图轮播,它能够充分利用网页空间,展示高清商品图片,吸引消费者的注意力。这段代码中提到了两个关键的前端组件:Tabs(选项卡)和Carousel(轮播图)。 1. **Tabs组件**:用于切换不同内容区域,常用于展示多个相关的但可以独立展示的信息板块。在这个例子中,`<div class="J_TWidget"` 标签带有 `data-widget-config` 属性,配置了如 `effect`(效果)、`circular`(是否循环)等参数,定义了选项卡的行为。`contentCls` 指定了内容区域的类名,这里是 `piao1363757193747fu`,而 `data-widget-type` 指定这是个Tabs组件。 2. **Carousel组件**:是实现轮播效果的核心部分。同样使用了 `J_TWidget` 类,但配置的参数更加详细,包括 `effect`(动画效果,此处为水平滚动 'scrollx'),`triggerType`(触发方式,此处为鼠标 'mouse'),` autoplay`(自动播放),`viewSize`(视口宽度,1920px匹配全屏),以及`circular`(循环播放)。这些参数确保了轮播图能够按照预设方式进行工作,提供无缝的浏览体验。 这段代码可能使用了类似于jQuery UI或者Bootstrap等前端框架的组件,或者自定义了类似的JavaScript插件。`data-widget-config` 里的JSON字符串用于设置组件的行为,这是一种常见的数据绑定方式,使得HTML元素能够与JavaScript逻辑紧密关联。 在实际应用中,开发者需要确保图片尺寸适应1920像素的宽度,并且考虑在不同分辨率和设备上的适配性,可能还需要加入响应式设计以确保在移动设备上的良好显示。此外,为了优化用户体验,可能还需要添加额外的功能,如导航指示器、暂停/播放按钮,以及触控设备的支持。 淘宝新旺铺2013年的全屏轮播1920大图代码是前端开发中一个典型的交互设计案例,它结合了HTML布局、CSS样式和JavaScript动态效果,为电商店铺提供了吸引眼球的视觉展示手段。
<div class="piao1363757193747fu" style="height: 480px">
<div class="J_TWidget" data-widget-config="{ 'contentCls': 'slide-kun1363757193747content', 'triggerCls': 'slide-kun1363757193747triggers', 'navCls': 'slide-kun1363757193747triggers', 'triggerType': 'mouse', 'effect': 'scrollx', 			'prevBtnCls':'prev', 			'nextBtnCls':'next', 'steps': 1, 'autoplay': true, 			'viewSize':[1920], 'circular': true }" data-widget-type="Carousel" style="z-index: 10; padding-bottom: 0px; margin: 0px; padding-left: 0px; width: 1920px; padding-right: 0px; top: 0px; padding-top: 0px; left: -485px">
<div class="J_TWidget" data-widget-config="{'trigger':'.first1363757193747trigger','align':{'node':'.first1363757193747trigger','offset':[0,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display: none">
<div class="prev" style="width: 90px; float: left; height: 90px">
<img src="http://img03.taobaocdn.com/imgextra/i3/75979125/T2.nOlXbpcXXXXXXXX-75979125.png" /></div>
<div class="next" style="width: 90px; height: 90px; margin-left: 950px">
<img src="http://img04.taobaocdn.com/imgextra/i4/75979125/T2d8dTXetdXXXXXXXX-75979125.png" /></div>
</div>
<div class="first1363757193747trigger" style="padding-bottom: 0px; margin: 0px; padding-left: 0px; width: 1920px; padding-right: 0px; height: 500px; overflow: hidden; padding-top: 0px">
<ul class="slide-kun1363757193747content" style="padding-bottom: 0px; margin: 0px; padding-left: 0px; width: 1920px; padding-right: 0px; height: 550px; padding-top: 0px">
<li style="padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; width: 1920px; padding-right: 0px; height: 550px; padding-top: 0px">
<a href="http://favorite.taobao.com/popup/add_collection.htm?spm=a1z10.1.0.124.dBfoAG&id=64947640&itemid=64947640&itemtype=0&sellerid=216855201&scjjc=2&_tb_token_=fee67715837e3" style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px" target="_blank"><img border="0" height="550" src="http://img04.taobaocdn.com/imgextra/i4/216855201/T2TL2zXblaXXXXXXXX_!!216855201.jpg" style="margin: 0px; float: none" width="1920" /></a></li>
<li style="padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; width: 1920px; padding-right: 0px; height: 550px; padding-top: 0px">
<a href="http://item.taobao.com/item.htm?spm=a1z10.1.w924820815.1.1pSm2K&id=22669928755" style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px" target="_blank"><img border="0" height="550" src="http://img03.taobaocdn.com/imgextra/i3/216855201/T27BtXXitOXXXXXXXX_!!216855201.jpg" width="1920" /></a></li>
<li style="padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; width: 1920px; padding-right: 0px; height: 550px; padding-top: 0px">
<a href="http://item.taobao.com/item.htm?spm=a1z10.1.w924820815.2.1pSm2K&id=22228424996" style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px" target="_blank"><img border="0" height="550" src="http://img02.taobaocdn.com/imgextra/i2/216855201/T2D7TzXXtaXXXXXXXX_!!216855201.jpg" width="1920" /></a></li>
<li style="padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; width: 1920px; padding-right: 0px; height: 550px; padding-top: 0px">
<a href="http://item.taobao.com/item.htm?spm=a1z10.1.w915277327.2.1pSm2K&id=19073123438" style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px" target="_blank"><img border="0" height="550" src="http://img01.taobaocdn.com/imgextra/i1/216855201/T2elCbXoJcXXXXXXXX_!!216855201.jpg" width="1920" /></a></li>
</ul>
</div>
<ul class="slide-kun1363757193747triggers" style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: none; padding-top: 0px">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
下载后可阅读完整内容,剩余1页未读,立即下载
- 粉丝: 0
- 资源: 2
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 深入理解23种设计模式
- 制作与调试:声控开关电路详解
- 腾讯2008年软件开发笔试题解析
- WebService开发指南:从入门到精通
- 栈数据结构实现的密码设置算法
- 提升逻辑与英语能力:揭秘IBM笔试核心词汇及题型
- SOPC技术探索:理论与实践
- 计算图中节点介数中心性的函数
- 电子元器件详解:电阻、电容、电感与传感器
- MIT经典:统计自然语言处理基础
- CMD命令大全详解与实用指南
- 数据结构复习重点:逻辑结构与存储结构
- ACM算法必读书籍推荐:权威指南与实战解析
- Ubuntu命令行与终端:从Shell到rxvt-unicode
- 深入理解VC_MFC编程:窗口、类、消息处理与绘图
- AT89S52单片机实现的温湿度智能检测与控制系统