在网站的CSS文件的底部粘贴下面的CSS文件，用来控制版块的样式。可以对CSS进行适当的修改来符合自己做网站的尺寸的需要。
http://www.free-web.cn/*案例滚动图片样式*/
.anli8{width:980pxmargin:0px auto}
.anli_fot{width:980pxheight:7pxbackground:url(../images/net2_07.jpg) no-repeatmargin-bottom:15px}
.infiniteCarousel {
border-left:1px solid #cccborder-right:1px solid #cccbackground-color:#F6F5F5width:978pxposition: relativeheight:190px
}
.infiniteCarousel .wrapper8 {
width:865pxheight:198pxposition:absolutetop:0margin-left:53px
}
.infiniteCarousel ul a img {
border:4px solid #E5E5E5width:190pxheight:130pxoverflow:hidden
}
.infiniteCarousel li{
text-align:centerfont-weight:normalfont-size:12pxcolor:#333line-height:26px
}
.infiniteCarousel .wrapper8 ul{
width:865pxmargin:0position:absolutepadding-top:10px
}
.infiniteCarousel .wrapper8 ul li {
display:blockfloat:leftpadding:10px
}
.infiniteCarousel .arrow {
display: blocktext-indent: -999pxposition:absolutetop:65pxcursor:pointer
}
.infiniteCarousel .forward {
width:46pxheight:45pxbackground:url(../images/net_05.jpg) no-repeatright:5pxoverflow:hidden
}
.infiniteCarousel .back {
width:46pxheight:45pxbackground:url(../images/net_03.jpg) no-repeatleft:5px
}
.infiniteCarousel .forward:hover {
width:46pxheight:45pxbackground:url(../images/net_05.jpg) no-repeatright:5px
}
.infiniteCarousel .back:hover {
width:46pxheight:45pxbackground:url(../images/net_03.jpg) no-repeatleft:5px
}
添加了DIV和CSS之后，只能将图片显示出来，但图片还不能动起来，还需要添加二个JS文件才能让它们自动切换起来。
下载二个JS文件，然后上传到自己网站空间的根目录下。
完成以上步骤之后，即可实现在自己网站上制作左右滚动的切换图的效果了。
1：使用js的插件 目前主流的js库 比如jq 也有手势的插件，2：还有移动端的zepto库 也有手势插件，
3：另外还有个叫QuoJS的手势插件 这个插件不依赖任何的库，
4：早期的应该是用wml语言支持的WMLScript实现。
5：举例：使用iscroll.js实现
1）下载iScroll.js，百度搜索iScroll.js下载即可
2）引入iScroll.js，在要使用滑动效果的地方，引入iScroll.js文件
3）编写规范的html格式
只有如下格式才能实现滑动效果
<div id="wrapper">
<div class="scroll">
这个区域可以滑动
</div>
</div>
如下格式不能滑动
<div id="wrapper">
<div class="other">这个区域可以滑动</div>
<div class="scroll">
这个区域不可以滑动了
</div>
</div>
只有wrapper的第一个子元素才能实现滑动效果。
4）编写js调用代码
var Scroll = new iScroll('wrapper',{hScrollbar:false, vScrollbar:false})
第一参数必需是滑动元素的父元素的id。
主要参数一览：
hScroll: true, 左右滑动，默认为true
vScroll: true,上下滑动
hScrollbar: true, 是否显示y轴滚动条，默认为显示
vScrollbar: true,是否显示X轴滚动条，默认为显示
<html><head>
<title>jquery或JS拖动DIV左右移动</title>
<script src="jquery-1.7.1.min.js"></script>
<style type="text/css">
body {background-color: #fff }
.win {position: absolute top: 0px left: 0pxwidth: 300pxheight: 222px}
.title {height: 20pxwidth: 300px position: absolutebackground-color: #0094ff float: inherit top: 0px left: 0px }
.winCon { height: 200pxwidth: 298px position: absolute border: solid
border-width: 1px border-color: #0094ff border-top: none float: inherit left: 0px top: 20px }
</style>
</head>
<body onload="showDiv(this,'test1')">
</body>
<script type="text/javascript">
function showDiv(element, str) {
$(document.body).append("<div class='win' id='win" + str + "'><div class='title' id='" + str + "'></div><div class='winCon'> 清新自在</div></div>")
$("#" + str).mousedown(function (event) {
var offset = $(this).offset()
_x = event.clientX - offset.left
_y = event.clientY + 20 - offset.top
$("#win" + str).css({ "top": offset.top - 20 + "px" })
$("#win" + str).mousemove(function (event) {
_xx = event.clientX - _x
_yy = event.clientY - _y
this.style.left = _xx + "px"
this.style.top = _yy + "px"
this.style.zIndex = "100"
return false
})
return false
})
$("#win" + str).mouseup(function () {
$(this).unbind("mousemove")
$(this).css({ "z-index": "-1" })
return false
})
}
</script>
</html>
