第一种：只适应于可视区只有一个元素的时候，例如整屏切换效果。下面我写的是自适应屏幕宽度的轮播图
实现步骤：
1、屏幕自适应的处理：当屏幕大小大于1000的时候，让图片居中，解决办法是，用图片的宽度减去可视区的宽度，整体除以2，来实现图片的居中
2、图片的轮播切换（此处，主要需要解决的问题是想办法是改变第一个元素的定位）
当然我们都很清楚，实现图片的自动轮播切换，一定离不了的是定时器，下面我就写我的实现步骤
HTML：
<body>
<!--
[if lte IE 6]>
<div class="ie6-out"><div class="ie6-in">
<![endif]
-->//因为IE6下，没有min-width的属性，所以在body中添加头和尾实现兼容
<div id="div1">
<ul>
<li><img src="img/a.jpg"/></li>
<li><img src="img/b.jpg"/></li>
<li><img src="img/c.jpg"/></li>
</ul>
<div id="btn">//此处使用a标签作按钮，因为当给它加display：inline-block时它可以自适应居中，排成一排，如果不使用a标签，使用其他标签，IE6下它不是排成一排而是排成一列，所以此处建议使用a标签作为按钮
<a class="active"></a>
<a></a>
<a></a>
</div>
</div>
<!-- [if lte IE 6]>
</div>
</div>
<![endif]
-->
</body> <style>
*{padding:0; margin:0;}
li{list-style:none;}
#div1{min-width:1000px; height:396px; position:relative; overflow:hidden;}
#div1 ul{position:absolute; left:0;}
#div1 ul li{float:left;}
#div1 ul li img{position:relative; width:1920px; height:396px;}
#btn{position:absolute; width:100%; text-align:center; bottom:0;}
#btn a{cursor:pointer; display:inline-block;width:11px; height:11px; background:white; border-radius:50%;}
#btn .active{background:red;}
#btn a:hover{background:red;}
*html .ie6-out{margin-left:1000px; zoom:1;}//解决IE6不兼容的效果（min-width）
*html .ie6-in{position:relative; float:left; margin-left:-1000px;}
</style>JS代码
首先我们需要引入运动框架，有兴趣的点击运动框架
<script src="move.js"></script>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var aImg = oUl.getElementsByTagName('img');
var oBtn = document.getElementById('btn');
var aA = document.getElementsByTagName('a');
var imgWidth = 1920;
var iNow = 0;
var iNow2 = 0;
var iTimer = null;
oUl.style.width = imgWidth*aImg.length+'px';
function reSize(){
var veiwWidth = document.documentElement.clientWidth;//计算可视区的宽度
if(veiwWidth>1000){
for(var i=0; i<aImg.length;i++){
aImg[i].style.left = -(imgWidth-veiwWidth)/2 +'px';//让图片居中
}
}
}
reSize();
window.onresize = function(){
reSize()
};
iTimer = setInterval(function(){
if(iNow == aA.length-1){//当iNow等于图片的个数减一的时候，把第一个li设置为相对定位，并让其的left的值为图片的个数乘以图片的宽度，当下面的startMove函数执行完毕后，再将定位去除，并让oUl的left值为0，实现无缝切换
aLi[0].style.position = 'relative';
aLi[0].style.left=imgWidth*aLi.length+'px';
iNow = 0;
}else{
iNow++;
}
iNow2++;
for(var i=0; i<aA.length;i++){
aA[i].className='';
}
aA[iNow].className='active';
startMove(oUl,{left:-imgWidth*iNow2},function(){
if(iNow==0){
aLi[0].style.position = 'static';
oUl.style.left = 0;
iNow2 = 0;
}
})
},3000);
}
</script>原理：将oUl中的第一个li剪切掉然后追加到oUl的最后，不断重复实现图片的无缝切换
HTML和css代码和上面的一样，下面只写js代码
此处也需要首先引入运动框架，点击运动框架
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var aImg = oUl.getElementsByTagName('img');
var oBtn = document.getElementById('btn');
var aA = document.getElementsByTagName('a');
var imgWidth = 1920;
var iNow = 0;
var iTimer = null;
oUl.style.width = imgWidth*aImg.length+'px';
function reSize(){
var veiwWidth = document.documentElement.clientWidth;
if(veiwWidth>1000){
for(var i=0; i<aImg.length;i++){
aImg[i].style.left = -(imgWidth-veiwWidth)/2 +'px';
}
}
}
reSize();
window.onresize = function(){
reSize();
};
var onOff = true;
iTimer = setInterval(function(){
if(onOff){
onOff = false;
startMove(oUl,{left:-imgWidth});//要先运动再开始剪切复制节点，如果一开始就把运动和剪切复制节点在一起，那么不管运动是在前面还是后面，它都是后执行的，所以要先将运动单独放在一个作用域中，否则和剪切节点在一起造成先剪切和复制，后运动，导致第一次运动出错，后面的就没事了
}else{
oUl.appendChild(aLi[0]);
oUl.style.left = 0;
startMove(oUl,{left:-imgWidth});
}
if(iNow ==aA.length-1){
iNow = 0;
}else{
iNow++;
}
for(var i=0; i<aA.length;i++){
aA[i].className='';
}
aA[iNow].className='active';
},3000);
}
</script>上面的两种方法就是实现无缝切换的两种思路。第二种方法比较通用，并且好理解一点。但当可视区只有一个图片显示的时候，从性能优化的方向考虑使用第一种会好一点。但当可视区有多个图片的时候只能使用第二种方法
