<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>每次移1px的案例</title>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<style type="text/css">
body{
background: pink;
}
.d1{
margin-top: 20px;
width: 100px;
overflow: hidden;
position: relative;
height: 80px;
background: #fff;
}
.d2{
width: 1880px;
position: absolute;
}
.d2>p{
margin-top: 0px;
float: left;
width: 100px;
}
.p1{
background: red;
}
.p2{
background: yellow;
}
.p3{
background: green;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var num=0;
var pWidth = $('.d2>p').innerWidth()*$('.d2>p').length;
var d2content =$('.d2').html();
$('.d2').append(d2content)
var time = setInterval(function(){
num++
if(num>3){
num=0;
}
$('.d2').animate({'left':'-'+num*100+'px'});
},1000)
</script>
<!--
1、做轮播图如果是每次移动1px就用css({'left':'-'+num+'px'}),不要用animate({'left':'-'+num+'px'})因为animate其实是css({'left':'-'+num+'px'})+css的transition组合，每次会有一卡一卡的效果（这里的num所有要偏移图片集合的宽度）。
2、做轮播图如果是一次性移动一整张图片用css({'left':'-'+num*100+'px'})无动画效果直接切换到下一张，用animate({'left':'-'+num*100+'px'})有动画效果，会看到是一整张图从右边到左边一个滑动的效果（这里的num是图片的张数，100px是每张图片的完度）。
-->
讲解
<div class="d1">
<div class="d2">
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>
</div>
</div>
//最外层 一定要设置需要显示的宽度、隐藏宽度以外的部分、相对定位。
.d1{
width: 300px;
overflow: hidden;
position: relative;
}
//第二层 宽度设置到最大、绝对定位。这是被移动的部分。
.d2{
width: 1880px;
position: absolute;
}
//第三层 浮动及可。
.d2>p{
float:left;
}
//为了能把d2里的内容无缝的轮播,需要把d2的内容复制一份.滚动的宽度不大于所有p集合的宽度(没有复制前)
var num=0;
var pWidth = $('.d2>p').innerWidth()*$('.d2>p').length;
var d2content =$('.d2').html();
$('.d2').append(d2content)
var time = setInterval(function(){
num++
if(num>pWidth){
num=0;
}
$('.d2').css('left','-'+num+'px');
},30)