Question

如何制作JS+DIV左右滚动的切换图

Answer 1

　　在自己网站需要添加切换图的位置放上以下的HTML代码（用来显示切换的8张图片）；图片可以是固定的几张图片，也可以使用动态调用代码来调用网站文章中的图片。
　　在网站的CSS文件的底部粘贴下面的CSS文件，用来控制版块的样式。可以对CSS进行适当的修改来符合自己做网站的尺寸的需要。
　　http://www.free-web.cn/*案例滚动图片样式*/
　　.anli8{width:980px; margin:0px auto;}
　　.anli_fot{width:980px; height:7px; background:url(../images/net2_07.jpg) no-repeat; margin-bottom:15px;}
　　.infiniteCarousel {
　　border-left:1px solid #ccc; border-right:1px solid #ccc; background-color:#F6F5F5; width:978px; position: relative; height:190px;
　　}
　　.infiniteCarousel .wrapper8 {
　　width:865px; height:198px; position:absolute; top:0; margin-left:53px;
　　}
　　.infiniteCarousel ul a img {
　　border:4px solid #E5E5E5; width:190px; height:130px; overflow:hidden;
　　}
　　.infiniteCarousel li{
　　text-align:center; font-weight:normal; font-size:12px; color:#333; line-height:26px;
　　}
　　.infiniteCarousel .wrapper8 ul{
　　width:865px; margin:0; position:absolute; padding-top:10px;
　　}
　　.infiniteCarousel .wrapper8 ul li {
　　display:block; float:left; padding:10px;
　　}
　　.infiniteCarousel .arrow {
　　display: block; text-indent: -999px; position:absolute; top:65px; cursor:pointer;
　　}
　　.infiniteCarousel .forward {
　　width:46px; height:45px; background:url(../images/net_05.jpg) no-repeat; right:5px; overflow:hidden;
　　}
　　.infiniteCarousel .back {
　　width:46px; height:45px; background:url(../images/net_03.jpg) no-repeat;left:5px;
　　}
　　.infiniteCarousel .forward:hover {
　　width:46px; height:45px; background:url(../images/net_05.jpg) no-repeat; right:5px;
　　}
　　.infiniteCarousel .back:hover {
　　width:46px; height:45px; background:url(../images/net_03.jpg) no-repeat; left:5px;
　　}
　　添加了DIV和CSS之后，只能将图片显示出来，但图片还不能动起来，还需要添加二个JS文件才能让它们自动切换起来。
　　下载二个JS文件，然后上传到自己网站空间的根目录下。
　　完成以上步骤之后，即可实现在自己网站上制作左右滚动的切换图的效果了。