轮播+滑动+返回顶部效果，插件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
*{
border: 0;
margin: 0;
padding: 0;
outline: 0;
}
ul{
font-size: 0;
list-style: none;
position: relative;
}
li{
display: inline-block;
}
li img{
width: 210px;
}
.left,.right{
cursor: pointer;
position: absolute;
top: 20px;
}
.sld{
position: relative;
overflow: hidden;
width: 840px;
margin: auto;
}
</style>
<div class="sld">
<ul>
<li><img src="img/img_14.jpg"/></li>
<li><img src="img/img_14.jpg"/></li>
<li><img src="img/img_14.jpg"/></li>
<li><img src="img/img_14.jpg"/></li>
<li><img src="img/img_14.jpg"/></li>
<li><img src="img/img_14.jpg"/></li>
<li><img src="img/img_14.jpg"/></li>
<li><img src="img/img_14.jpg"/></li>
</ul>
</div>
<div class="left">
左
</div>
<div class="right" style="right: 20px;">
右
</div>
<script type="text/javascript">
$(function(){
$("ul").jslider("li",4,2,$(".left"),$(".right"));
$("#arrow").jscroll();
});
$.fn.extend({
jslider:function(dom,num,queue,leftEle,rightEle){
var $ul = this;
var wd = parseInt($(dom).width());
// 定义主框宽度 - -.！可以在css中设置很大就能不定义了。
$ul.width(wd*num*(queue+1))
// 将最后一个队列复制到最前面
$li = $ul.children(dom+":gt("+(num*queue-num-1)+")").clone().prependTo($ul);
// 开始点击事件
leftEle.on("click",function(){
if(!$ul.is(":animated")){
// 到达到最右边再点击按钮直接跳到第一队列。
if(parseInt($ul.css("left"))==(-wd*num*queue)){
$ul.css("left","0");
}
// 正常执行动画
// 判断剩余个数，如果少于4个就只滚动剩余数目
var lf = parseInt($ul.css("left"));
var surplus = (wd*num*queue + lf)/wd;
var actualNum = num < surplus ? num : surplus;
$ul.animate({"left":"-="+wd*actualNum},"low");
}
});
rightEle.on("click",function(){
if(!$ul.is(":animated")){
if(parseInt($ul.css("left"))==0){
$ul.css("left","-"+wd*num*queue+"px");
}
var lf = parseInt($ul.css("left"));
var surplus = -lf/wd;
var actualNum = num < surplus ? num : surplus;
$ul.animate({"left":"+="+wd*actualNum},"low");
}
})
// 循环和终止循环
// var sr = setInterval(function(){
// rightEle.click();
// },2000);
// eh($ul);
// eh(leftEle);
// eh(rightEle);
// function eh(ele){
// ele.hover(function(){
// clearInterval(sr);
// },function(){
// sr = setInterval(function(){
// rightEle.click();
// },2000);
// })
// };
// touch事件
var xStart,xEnd,xM,mr,lf,unApex,mv;
$ul.on("mousedown",function(e){
// 获取x坐标，阻止默认事件
xStart = e.pageX;
e.preventDefault();
mr = true;
lf = parseInt($ul.css("left"));
}).on("mousemove",function(e){
if(mr){
xM = e.pageX-xStart;
// 判断是否到达顶点，滚动距离为鼠标滑动距离的 1.8倍
unApex = (lf+xM*1.8)>=(-wd*num*queue)&&(lf+xM*1.8)<0;
if(unApex){
$ul.css("left",lf+xM*1.8);
}
mv = true;
}
}).on("mouseleave mouseup",function(e){
xEnd = e.pageX;
// 舍入，显示完整产品
var abs = Math.round((lf+xM*1.8)/wd)*wd;
// 如果要执行 moseup动画必须要有mousemove事件
if(unApex&&mv){
$ul.animate({"left":abs},"fast");
}
mv = mr = false;
})
}
// 滚动到最顶部
,jscroll:function(){
var $arrow = this;
$(window).on("scroll",function(){
var windH = $(window).height();
var scollH = $(window).scrollTop();
var $body = $("body");
if(scollH>windH){
$arrow.css("display","block");
}else{
$arrow.css("display","none");
}
if(scollH==0){
$body.animate().stop(true,true);
}
$arrow.on("click",function(){
$body.animate({scrollTop:0}, 'slow');
})
})
}
})
</script>
</body>
</html>