1. html焦点图轮播
可以通过输入代码来操作。
这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进，先来贴一发代码：
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css">
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/test2.js"></script>
</head>
<body>
<div id="layout">
<header >
<div id="banner">
<ul id="banner_img">
<li><img src="./img/s1.jpg"></li>
<li><img src="./img/s2.jpg"></li>
<li><img src="./img/s3.jpg"></li>
</ul>
</div>
</header>
</div>
</body>
</html>
在这个html的目录下有三个同级的文件夹，img中放图片，css和js分别存放这个网页的css文件和js文件，这里用到了jquery，记得引入顺序，jquery一定要放在其他js前面。html代码很简单，不做过多解释。
看一下引入的css，init2.css
*{
margin: 0px ;
padding: 0px ;
}
#layout{
width: 960px ;
margin: 0 auto ;
}
#banner{
position: relative;
overflow: hidden;
width: 600px;
height: 200px;
border-radius: 10px ;
border: 2px solid black;
}
#banner_img li{
float: left;
list-style-type: none;
}
#index{
position: absolute;
right: 8px ;
bottom: 8px ;
}
#index li{
float: left;
width: 16px ;
height: 16px ;
text-align: center;
line-height: 16px ;
border-radius: 5px ;
border:1px solid #FF7300 ;
background: white;
list-style: none;
margin-left: 8px ;
cursor: pointer;
}
.clearfix:after{
content: "" ;
height: 0px ;
display: block;
clear:both ;
}
.on
{
background:#FF7300 ;
}
css基本上和前面的html中的类对应，claerfix来清除浮动，on是代表轮播图片的索引中当前的正播放的图片的索引，其实就改个背景，这里的索引是后面动态加上去的，索引在html中看不到。主要思路就是把装图片的容器设置成overfl;hidden;下面是一种比较简单的实现，利用jquery的fadeIn和fadeOut效果来实现。
//fadeIn and fadeOut
var time ;
var index = 1 ;
var tolnum = 3 ;
$(function(){
<span > </span>setInterval("showBanner("+tolnum+")",3000);
});
function showBanner(n)
{
<span > </span>var ul = $("#banner_img") ;
<span > </span>ul.children().fadeOut("slow") ;
<span > </span>ul.children().eq(index).fadeIn("slow") ;
<span > </span>index = index+1>n-1 ? 0 : index+1 ;
}
恩，不知道为什么到最后一张图片的时候会产生没有淡出的bug，不太懂，请大家指教。第二种方法是利用jquery的animation来实现margin属性的过渡。
init();
function init()
{
$(function(){
var index = 0 ;
var adTime ;
var len = $("#banner_img li").length ;
addIndex(len) ;
var bannerLi = $("#index li");
//handle index
$("#index li").mouseover(function() {
index = $("#index li").index(this) ;
showImgs(index) ;
});
//toggleInterval
$("#banner").hover(function(){
clearInterval(adTimer);
},function(){
adTimer=setInterval(function(){
//alert(index) ;
showImgs(index);
index++;
if(index==len){
index=0;
}
},2000)
}).trigger('mouseleave');
});
}
//auto add index
function addIndex(n)
{
var ul = $("<ul id=\"index\"></ul>") ;
for(var i=1;i<=n;i++)
{
var li = $("<li></li>") ;
li.append(function(num){
return num
}(i)) ;
ul.append(li) ;
}
ul.children().first().addClass('on') ;
$("#banner_img").append(ul);
}
function showImgs(index)
{
var adwidth=$("#banner_img>li:first").width();
$("#banner_img").stop(true, false) ;
//$("#banner_img").css('margin-left', -index*adwidth+"px");
$("#banner_img").animate({
"marginLeft":-adwidth*index+"px"
},1000);
$("#index li").removeClass('on').eq(index).addClass('on') ;
}
hover（）是一种代替mouseenter和mouseleave的方法，听说比较好用。trigger（）来触发当前对象的一个状态，这里要先触发一次mouseleave的状态来初始化计时器，因为这里的设定是当鼠标移到$("#banner")上就销毁定时器，锁定当前图片，移开鼠标就重新添加定时器。<pre name="code" > $("#banner_img").animate({
"marginLeft":-adwidth*index+"px"
},1000);
这了就是对jquery中animation方法的使用，通过传进来的index来改变banner_img的margin，这里是margin-left，所以图片就会从右往左刷（需要设置浮动），如果需要从下往上刷就设置margin-top就好了，还有我发现js中动态添加margin是不能触发css的transition的。
2. javascript焦点图轮播
在图片标签上添加链接属性，src=""。就可以了
3. html轮播图居中
拼多多需要的尺寸比较复杂，包括了主图+商品高清缩略图+轮播＋商品详情页。
一、主图尺寸
拼多多主图尺寸是750*352px，图片大小在100KB以内，如果大小超过100KB，就无法上传。在设计主图的时候，质量一定要好，高清，不能出现模糊，主图的质量直接影响用户点击。
二、活动主图尺寸
1.活动主图的尺寸是750*352px。
2.大小在100k以内，目前只支持两种格式。JPG和PNG格式
3.背景应以纯白为主，图案居中显示。
4.不能在活动主图上添加任何与品牌相关的文字或标记等信息。
三、商品轮播图尺寸
1.拼多多商品轮播图的宽度和高度都需要大于或等于480px，最好是正方形。
2.拼多多商品轮播图的大小要小于或等于1M。
3.数量限制在10张以内，10张也行。
4.图片只支持JPG、PNG格式。
5.批量上传时，图片的宽和高需相同并且不能小于480px，单独上传时只要宽高不小于480px就可以，也不能太大，会影响打开速度，也影响客户体验。
四、详情页图片尺寸
1.尺寸要求宽度大于480px，高度不限制，自己调节。
2.大小1M以内，单张图片的大小不能超过1M。
3.数量限制在20张以内。
4.图片格式仅支持JPG、PNG格式。
5.批量上传时，尺寸要求宽度处于480~1200px之间，高度0~1500px之间，详情页不建议做得太长，把要说的说清楚即可。
6.可以拖动图片改变图片的排列顺序。
4. html css轮播图
将box-shadow这个属性值设置为0。
5. html焦点图切换
Text 标签代表 HTML 表单中的文本输入域。
在 HTML 表单中 <input type="text"> 每出现一次，Text 对象就会被创建。
该元素可创建一个单行的文本输入字段。当用户编辑显示的文本并随后把输入焦点转移到其他元素的时候，会触发 onchange 事件句柄。
您可以使用 HTML <textarea> 标记来创建多行文本输入
6. 焦点图和轮播图的区别
1、淘宝首页上面的flash轮播图片，5个位置，是钻石展位来的；
2、中右方有个300*250大小的位置，也是钻石展位；
1、常规广告位淘宝硬广即淘宝的常规广告位置。常规广告分布在淘宝网首页、商城首页及各大频道页面，具有超高流量及点击率，是整体营销与主题活动推广的基础型资源。包括了淘宝网首页焦点图、banner、通栏、画中画等。展示位置如下：淘宝首页、淘宝商城首页。2、客户端广告阿里旺旺是卖家与买家即时沟通工具，拥有2亿多用户，每天登陆用户超过2000万。可按照不同时段、地域以及用户属性进行多维度定向，为商家实现精准营销。
7. HTML焦点图轮播和无缝滚动效果实验
1. 在轮播图项中添加div结构,用来存放图片的说明文字(注意这是自己添加的结构,因此类名啥的可以自定义)
2.修改类名为swiper-container的div的position为relative
3.修改 添加的文字标签 具体的css样式就好了,如top、left、font等，因为文字标签设置了position:absolute
8. 网页设计焦点轮播图
尺寸是640x200，大小要求在 150K 以内。
题主截图这个位置中轮播2和3是钻展资源位——手淘app_手淘焦点图，其他为官方活动流量入口。手淘首页展现量是亿级别的，通常商家投放钻展主要预算是消耗这个位置。
钻展是按展现收费，投放这个位置需要注意定向精准的人群，创意点击率高（可参考钻展后台创意cool优秀素材），合理出价。因展现量大，需要特别注意人群多的计划出价不宜过高，新计划或修改过出价的计划5分钟内要刷新看数据，避免预算一眨眼就花完了。
9. HTML中轮播图
首先第一步，下载好一个jquery库的插件，jquery.js 网上很多随处可以下载．下载的插件要放在目录下．然后在html文档中链接好<script type="text/javascript" src="jQuery.js"></script>
第二步，布局好一个DIV,如：
<div id="scroll">
<p class="subl">上一张<p/>
<p class="subr">下一张<p/>
<ul>
<li style="background:red;display:block;"></li>
//上面的ｌｉ要设定为显示，因为是第一张图片．
<li style="background:green;"></li>
<li style="background:gray;"></li>
<li style="background:orange;"></li>
</ul>
</div>
第三步，就到了写CSS的时候了．下面的CSS懂基础的人都看得懂．
#scroll{width:100%; height:180px; background-color:white; position:relative;border-bottom:1px solid gray;}//这里是给整个大的ＤＩＶ设定属性．
#scroll ul{height:180px; list-style:none;}//ＤＩＶ下的ＵＬ属性．
#scroll ul li{width:100%; height:180px;margin:0px; padding:0px; display:none;}//ＤＩＶ下的ＵＬ下的ＬＩ属性．注意：display:none;因为要将所有的ｌｉ隐藏了先．当点击的时候在显示出来．
.subl{position:absolute; bottom:20px; left:40%; width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold; cursor:pointer;}//上一张按钮的属性．注意一个绝对定位。
第四步，就是ｊｑｕｅｒｙ代码了！也很简单．先将代码看一遍，你就会用了！
<script type="text/javascript">
/*轮播*/
$(function(){
var i=0;
var len=$("#scroll ul li").length-1;
$(".subl").click(function(){
if(i==len){
i=-1;
}
i++;
$("#scroll ul li").eq(i).fadeIn().siblings().hide();
});
//到这里分开！上面的是上一张点击的效果代码，下面的是下一张点击的效果代码．
$(".subr").click(function(){//获取类名的点击事件．
if(i==0){
i=len+1;
}
i--;
$("#scroll ul li").eq(i).fadeIn().siblings().hide();
});
});
/*轮播*/
</script>
四步轻松搞定一个简单的轮！
10. 焦点轮播图代码
一. 在主页按左键，将焦点移动到最左边后，再按一次进入轮播频道。如何用雷鸟电视观看轮播频道，简单几步视频随意
相对应的，在轮播频道内按右键可以返回至主界面。在轮播频道内，按上、下键可以切换频道。
二. 按OK键可以调出频道列表，浏览并选择想看的频道观看。
在频道列表中，当红块选中某个频道时，按右键可以调出该频道的
三. 按菜单键，呼出选项菜单，可以选择收藏正在观看的频道，还可以调整清晰度。
