(function($){
创新互联于2013年创立，先为隆化等服务建站，隆化等地企业，进行企业商务咨询服务。为隆化企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
})(jQuery)
用这个包起来。
原因如下：
1 首先(function(){})()这种写法 是创建了一个匿名的方法并立即执行（function(){})这个是匿名方法后面的括号就是立即调用了这个方法）。
这样做可以创建一个作用域以保证内部变量与外部变量不发生冲突，比如$ jQuery 等jquery内部定义的变量。
2 (function($){})(jQuery) 这个写法主要的作用还是保证jquery不与其他类库或变量有冲突 首先是要保证jQuery这个变量名与外部没有冲突（jquery内部$与jQuery是同一个东西 有两个名字的原因就是怕$与其他变量名有冲突二jQuery与其他变量冲突的几率非常小）并传入匿名对象，匿名对象给参数起名叫做$(其实和jquery内部是一样的) 然后你就可以自由的在(function($){})(jQuery)里写你的插件而不需要考虑与外界变量是否存在冲突
这种插件非常多, 你可以挑一个用
如果你要问原理, 关键点是
外层div是一个窗口, 控制好长宽, 设置overflow为hidden, 那么只有在此区域内的内容才会被显示
内容是一堆图片, 通过js控制位置, 比如用relative定位, 通过css控制left, 就是移动效果
如果要轮播, 注意控制边界图片次序
'position':absolute 里的 absolute要加单引号， 因为它不是变量。
然后能实现跟随鼠标了 但不是不是太精确 因为你的top和left 都是e.pageY，left应该是e.pageX
然后mouseover是鼠标移入触发，不是实时触发，要实时跟随鼠标，换成mousemove即可
$("body").mousemove(function(e){
if($("#mouseXY").html() == null){
var MouseXY = "div id='mouseXY'img src='未标题-1.png'//div" ;
$("body").append(MouseXY);
}
$("#mouseXY").css({'top':e.pageY,'left':e.pageX,'position':'absolute','z-index':1});
});
全部图片使用绝对定位，页面加载的时候，用程序按顺序算出他们的位置定位好
当拖拽完成，如果下面没有图片，这张图片就返回他原来的坐标
如果有，就两个图片兑换坐标，用animate很简单，你懂的
你要考虑坐标记录的问题，可以每次拖拽用全局标量记录
也可以直接记录在图片的属性上
还有一个可能会遇到的问题就是事件起泡
应该是你的图片层写的有问题吧，图片层开始时默认显示图片1，其他不显示，之后随数字的切换而变化。我看你代码上图片的部分直接什么都没有处理啊。
script
$(function(){
$(".num li").hover(function(){
var id='#d'+$(this).attr('id').substring(1);
$(id).attr('style','display:;');
},function(){
var id='#d'+$(this).attr('id').substring(1);
$(id).attr('style','display:none;');
});
});
/script
/head
body
div class="container"
ul class="picture" style='display:;'
li class="focus" id=d1img src="images/01.gif"//li
li class="focus" id=d2 style='display:;'img src="images/02.gif"//li
li class="focus" id=d3 style='display:;' img src="images/03.gif"//li
/ul
ul class="num"
li id=i11/li
li id=i22/li
li id=i33/li
/ul
把所有图片都列出来，这个用CSS实现，然后给图片赋一个点击事件，这个事件连一个图片滑动器，然后这里需要传一个参数，就是当前是第几张图片，然后图片滑动器通过这个参数就可以从你的图片中获取到第几张图片了，然后你在让滑动器向上向下切换图片就行了，原理也是一样的向上的时候就在你当前传递的参数中加1，然后向下的时候就减1就可以了~
