*此处需注意relative 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动* slideShow ul li float left *让四张图片左浮动，形成；在新建的样式表文件quotMyStylecss”文件中输入如下代码* padding0 margin0 *设置所有对像的内边距为0*body textaligncenter *设置页面居中对齐*#photolist * 6张图片的宽度包含宽；这样lt！DOCTYPE html 动态切换图片 ul padding0margin0 li liststyle pic position relativewidth 400pxheight 400pxbackgroundcolorredmargin100px autobackgroundurl#39；if$index === 0 当前为第一张轮播图 quotbanquoteq$quotbanquotlength1addClassquotactivesiblingsquotbanquotremoveClassquotactivequot这里写成你自动切换的代码，我这里只是一个无动态切换效果的方法；然后控制父divbgIn的left属性，让这个divbgIn相对于它的父divbg中左右移动而已你用chrome的审查元素就能看到的最外边那个divbg则主要是控制z轴，让它显示在页面下面 而这些设置好之后，用jquery的toggle函数；jquery手机触屏左右滑动切换栏目 function TouchSlide slideCellquot#slideBoxquot，titCellquotmyhd ulquot，开启自动分页 autoPagetrue ，此时设置 titCell 为导航元素包裹层 mainCellquotbd ulquot，effectquotleftLoopquot，auto。

如果你要问原理， 关键点是 外层div是一个窗口， 控制好长宽， 设置overflow为hidden， 那么只有在此区域内的内容才会被显示 内容是一堆图片， 通过js控制位置， 比如用relative定位， 通过css控制left， 就是移动效果 如果要轮播；将javascript代码替换为如下，jQueryquotscroolWarpquotslide titCellquothd ulquot， mainCellquotbd ulquot，effectquotleftquot，vis6，scroll6，autoPlaytrue，autoPagetrue；有这个标签但是有bug已经被淘汰，直接用js；思路点击左边 1将第一个LI向左滑动，滑动的数值就是LI的宽度这里是用负marginleft来实现移动2滑动完成后，将这个LI插入到整个LI的最后一个实现无缝滚动点击右边 1将最后一个LI插入到所有LI的第；用jquery使一个按钮让div左右移动方法如下就是点击“#anniu”，然后quot#caozuoquotdiv左右移动，我的代码左移了就不能移动回来了 $documentreadyfunction 就是点击“#anniu”，然后quot#caozuoquotdiv左右移；动画效果，图片从右侧飞入 quot#div_pic ul liquoteqindexanimateleftquot0quot，500 * 下面是可配置轮播动画代码 fnslide=functionoptions var defaults= affect1， 1上下滚动。

这是自己封装的原生js方法，为了偷懒，用了电jqurey调用方法如下touchs_leftobject往左滑动，touchs_rightobject往右滑动 touchs_topobject往上滑动 touchs_bottomobject往下滑动 说明；执行yidong函数5在js标签中，创建yidong函数，在函数内，通过classcontent获得div对象，使用animate方法让div在1秒内向左移动100px6最后在浏览器打开testhtml文件，点击按钮，查看实现的效果；下面是可配置轮播动画代码 fnslide=functionoptions var defaults= affect1， 1上下滚动 2幕布式 3左右滚动4淡入淡出 time 5000， 间隔时间 speed500， 动画快慢 dot_text；if$quot#leftquotcss#39width#39 == #39200px#39 quot#leftquotanimatewidth0，quotslowquotquot#hidequotval#39显示#39else quot#leftquotanimatewidth200，quotslowquotquot#hidequotval#39隐藏#39。

可以使用CSS设置容器元素的宽度和高度，并设置overflow属性为hidden，这样可以隐藏容器元素之外的内容2接下来，需要使用JavaScript编写代码，实现滑动加载的功能可以使用jQuery或其他JavaScript库实现，也可以使用原生JavaScript编写。