图片切换效果，实现技术为jQ,代码简单易用，没有采用别的插件。可改参数调整；代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>图片切换</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<style>
.pic-wrap{position:relative;width:920px;overflow: hidden;height:200px;position: relative;}
.pic-inner{position:relative;left:0;height: 200px;padding:0 60px;}
.pic-inner .list{width:200px;height:200px;border:1px solid #ddd;float: left;}
.pic-wrap .left,.pic-wrap .right{height:40px;width:40px;position:absolute;top: 50%;margin-top:-20px;background: red;z-index: 10;}
.pic-wrap .left{left:0;}
.pic-wrap .right{right:0;}
</style>
</head>
<body>
<div class="pic-wrap">
<div class="left"></div>
<div class="pic-inner clearfix">
<div class="list">
</div>
<div class="list">
</div>
<div class="list">
</div>
<div class="list">
</div>
<div class="list">
01
</div>
<div class="list">
02
</div>
<div class="list">
03
</div>
<div class="list">
04
</div>
</div>
<div class="right"></div>
</div>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var imgScroll = {
wrap:$(\'.pic-wrap\'),
inner:$(\'.pic-inner\'),
leftBtn:$(\'.left\'),
rightBtn:$(\'.right\'),
elem:$(\'.list\'),
items:4,
width:200,
init:function(){
$(\'.pic-inner\').width(this.width*this.elem.length);
var _this=this;
this.rightBtn.click(function(){
_this.rightClick();
})
this.leftBtn.click(function(){
_this.leftClick();
})
},
rightClick:function(){
var _this=this;
var oAni=this.width*this.items;
var oLen=this.elem.length;
var oLeft=parseInt(this.inner.css(\'left\'));
if(oLeft+this.width*(oLen-this.items)<=oAni){
_this.inner.animate({left:oLeft-oAni},300,function(){
for(var i=0;i<_this.items;i++){
_this.inner.prepend($(\'.list\').last())
}
_this.inner.css(\'left\',0);
})
}else{
_this.inner.css(\'left\',oLeft-oAni);
}
},
leftClick:function(){
var _this=this;
var oAni=this.width*this.items;
var oLen=this.elem.length;
var oLeft=parseInt(this.inner.css(\'left\'));
if(oLeft+this.width*(oLen-this.items)>=0){
_this.inner.animate({left:oLeft+oAni},300,function(){
for(var i=0;i<_this.items;i++){
_this.inner.prepend($(\'.list\').last())
}
_this.inner.css(\'left\',0);
})
}else{
_this.inner.css(\'left\',oLeft+oAni);
}
},
}
imgScroll.init();
</script>
</body>
</html>