淘宝店铺首页全屏轮播图制作
淘宝店铺首页全屏轮播图制作
- |
- 浏览:1081
- |
- 更新:2014-09-27 12:03
- |
- 标签: 淘宝
很多朋友都想要做全屏轮播图,接下来我来说说我的经验
工具/原料
- 美图秀秀
方法/步骤
1、首先要制作或者搜寻图片宽度1920高度610的高画质图片
2、上传到淘宝图片空间,并复制其连接
3、将复制的连接替换到如下图以“jpg”结尾的那个地方。(有3个地方,可用3张图替换)
4、复制代码,进入淘宝店铺装修页面,新建“自定义内容区”
5、将自定义内容区置于顶部,编辑,输入代码界面,黏贴代码,完成
图片可在网上搜索下载,亦或是可以用美图秀秀简单制作,如果大神会PS那就更好了。接下去就是上传图片,复制链接,替换下面代码中我加粗的地方。然后按照步骤即可完成。具体效果可看http://shop105578383.taobao.com/shop/view_shop.htm?spm=a1z0e.1.10010.5.V8uOXe
<div class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'bslide_cAFTq'}" data-widget-type="Tabs">
<div class="bslide_cAFTq" style="height:630px;">
<div class="J_TWidget" data-widget-config="{'navCls':'scroller-nav','contentCls':'scroller-content','steps':1,'prevBtnCls': 'prev','nextBtnCls': 'next','disableBtnCls': 'disable',
'circular':true,
'effect':'scrollx',
'easing':'easeOut',
'duration':1.0,
'interval':'4',
'autoplay':true}" data-widget-type="Carousel" style="height:640px;width:1920px;left:-485px;top:0;">
<div class="J_TWidget" data-widget-config="{'trigger':'.bslide_cAFTq','align':{'node':'.bslide_cAFTq','offset':[0,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;width:950px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);opacity:0.5;">
<span class="prev J_TWidget" style="cursor:pointer;float:left;display:block;width:59px;height:59px;background:url(http://img03.taobaocdn.com/imgextra/i3/60358248/T2zFRjXxxaXXXXXXXX-60358248.gif) no-repeat;"></span> <span class="next J_TWidget" style="cursor:pointer;float:right;display:block;width:59px;height:59px;background:url(http://img03.taobaocdn.com/imgextra/i3/60358248/T2zFRjXxxaXXXXXXXX-60358248.gif) no-repeat right 0;"></span></div>
<div class="scroller" style="width:1920px;height:610px;overflow:hidden;">
<ul class="scroller-content">
<li style="width:1920px;height:610px;overflow:hidden;border:none;background:#FFF;margin:0;">
<a href="http://shop105578383.taobao.com/ugo.htm?spm=a1z10.1.w5002-8741458642.3.Iya91p" style="display:block;cursor:pointer;width:1920px;height:610px;background:url(http://img01.taobaocdn.com/imgextra/i1/60358248/T2w_JWXcpeXXXXXXXX-60358248.jpg) no-repeat center 0;" target="_blank"></a></li>
<li style="width:1920px;height:610px;overflow:hidden;border:none;background:#FFF;margin:0;">
<a href="http://shop105578383.taobao.com/ugo.htm?spm=a1z10.1.w5002-8741458642.3.Iya91p" style="display:block;cursor:pointer;width:1920px;height:610px;background:url(http://img02.taobaocdn.com/imgextra/i2/60358248/T2tLhaXBhaXXXXXXXX-60358248.jpg) no-repeat center 0;" target="_blank"></a></li>
<li style="width:1920px;height:610px;overflow:hidden;border:none;background:#FFF;margin:0;">
<a href="http://shop105578383.taobao.com/ugo.htm?spm=a1z10.1.w5002-8741458642.3.Iya91p" style="display:block;cursor:pointer;width:1920px;height:610px;background:url(http://img02.taobaocdn.com/imgextra/i2/60358248/T2V2PTXbBbXXXXXXXX-60358248.jpg) no-repeat center 0;" target="_blank"></a></li>
</ul>
</div>
<ul class="scroller-nav" style="width:950px;color:#FA9090;font-size:20px;font-family:tahoma;margin-left:930px;">
<li style="width:20px;height:20px;line-height:20px;text-align:center;display:inline-block;*zoom:1;*display:inline;cursor:pointer;">
●</li>
<li style="width:20px;height:20px;line-height:20px;text-align:center;display:inline-block;*zoom:1;*display:inline;cursor:pointer;">
●</li>
<li style="width:20px;height:20px;line-height:20px;text-align:center;display:inline-block;*zoom:1;*display:inline;cursor:pointer;">
●</li>
</ul>
</div>
</div>
<ul class="ks-switchable-nav" style="display:none;">
<li class="ks-active">
1</li>
</ul>
</div>
<p>
<a name="sgmb"></a></p>
转载于:https://www.cnblogs.com/xiamicomeon/p/4244712.html
淘宝店铺首页全屏轮播图制作相关推荐
- jquery导航图片全屏滚动、首页全屏轮播图,各式相册
1.目录结构 源码 project css js image index1 index2 index3 index4 index.html index1到index4分为四个iframe标签引入的可单 ...
- jquery,js实现手机端全屏轮播图手动滑动+自动切换(autoplay)
jquery,js实现手机端全屏轮播图 使用了swiper插件,可手动滑动切换也可自动切换 效果图 css代码 只是作为参考,可以根据你自己的需求去改,这里我用的是上下两张背景图,图自行修改 html ...
- html全屏轮播图插件,jQuery全屏3D轮播图插件
jQuery.PageScroll3D是一款jQuery全屏3D轮播图插件.该jquery轮播图插件采用响应式设计,可以在垂直方向上制作出类似立方体滚动的3d轮播图效果. 使用方法 在页面中引入jqu ...
- 苹果cmsV10添加全屏幻灯图、全屏轮播图教程
使用全屏模板的小伙伴们很多都不会把首页的幻灯图片设置成全屏显示,今天就给大家讲解下幻灯图片全屏的设置教程. 1,设置全屏有2种途径:A是直接上传全屏的图片,B是通过苹果cms系统后台编辑视频的&quo ...
- 纯css自动全屏轮播图html代码,纯CSS3代码实现简单的图片轮播
以4张图片为例: 1.基本布局: 将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div, 相框设置1个图片的大小并设置溢出隐藏,以保证 ...
- 制作类似于淘宝点击简单的轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- slick.js基于jQuery全屏轮播插件
下载地址基于slick.js轮播插件实现的全屏轮播效果,支持图片和文字动画显示效果. dd:
- 一个功能较全的轮播图插件(含详细介绍)
今天给大家分享一个功能较全的轮播图插件,废话不多说,直接上插件 ;(function($){"use strict";$.fn.extend({banner:function(op ...
- 仿爱奇艺视频,腾讯视频,搜狐视频首页推荐位轮播图(二)之SuperIndicator源码分析
转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼:http://blog.csdn.net/hejjunlin/article/details/52510431 背景:仿爱奇艺视频,腾讯视频 ...
- 仿爱奇艺视频,腾讯视频,搜狐视频首页推荐位轮播图介绍(一)
请尊重分享成果,转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/52327435 前言:本篇只是一个介绍这个一个类库,具体实现思路代码会下 ...
最新文章
- 学习OpenCV(一)从Mat讲起
- python工具是什么-使用Python编写命令行工具有什么好的库?
- 第五章-分布式并行编程框架MapReduce
- Yii的Where条件
- Apache Flink 零基础入门(十三)Flink 计数器
- 神奇的事情,不同进程监听同一个端口,居然都成功
- 按下enter键禁止页面刷新
- http --- 公开密钥加密(非对称加密)的几个概念
- 马化腾生日当天 微信支付居然崩溃了//(ㄒoㄒ)//
- Redis master和slave是如何实现数据同步的
- 简单的中文分词系统httpcws
- ARM PWN基础教程
- macd底背离的python_Python量化交易之MACD'顶底背离'形态的实现,自动化交易!
- 如何禁用WordPress程序REST API功能且移除wp-json链接
- 网络系统管理 - C模块 - Centos7.9 - Iptables
- Linux服务器重启后crs,更改服务器名后CRS无法启动
- 基于单片机的秒表计时器系统设计(#0400)
- 在Centos 7 上 搭建 K8S --坑b)
- 黑猴子的家:Scala Case语句的中置(缀)表达式
- Python入门及技术指南