如何制作JS+DIV左右滚动的切换图（手动+自动）

有些学员在学习制作网站时，想在自己的网站上添加一些左右滚动的切换图效果，这种效果可以实现自动切换和手动左右切换。如果要实现在网站上增加切换图的功能，可以通过DIV+CSS的模板制作出来。

如何在自己做网站时添加左右滚动的切换图的步骤：

1. 在自己网站需要添加切换图的位置放上以下的HTML代码（如果你对HTML不了解，请学习html5从入门教程）；图片可以是固定的几张图片，也可以使用动态调用代码来调用网站文章中的图片。
   <div class="anli8">
   <div class="infiniteCarousel">
   <div class="wrapper8" style="overflow: hidden;">
   <ul style="width: 9999px;">
       <li><a href="url1"><img alt="" src="图片1" /></a>
   文章标题1</li>
       <li><a href="url2"><img alt="" src="图片2" /></a>
   文章标题2</li>
       <li><a href="url3"><img alt="" src="图片3" /></a>
   文章标题3</li>
       <li><a href="url4"><img alt="" src="图片4" /></a>
   文章标题4</li>
       <li><a href="url5"><img alt="" src="图片5" /></a>
   文章标题5</li>
       <li><a href="url6"><img alt="" src="图片6" /></a>
   文章标题6</li>
       <li><a href="url7"><img alt="" src="图片7" /></a>
   文章标题7</li>
       <li><a href="url8"><img alt="" src="图片8" /></a>
   文章标题8</li>
   </ul>
   </div>
   <a class="arrow back" href="#">&lt;</a><a class="arrow forward" href="#">&gt;</a>
   </div>
   <div class="anli_fot"></div>
   </div>
2. 在网站的CSS文件的底部粘贴下面的CSS样式，用来控制版块的样式。可以对CSS进行适当的修改来符合自己做网站的尺寸的需要。
   /*
   *代码来源：学做网站论坛 https://www.xuewangzhan.com/
   *案例滚动图片样式
   */
   .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;
   }
3. 添加了DIV和CSS之后，只能将图片显示出来，但图片还不能动起来，还需要添加二个JS文件才能让它们自动切换起来。
   下载二个JS文件，然后上传到自己网站空间的根目录下。（js文件下载地址：http://pan.baidu.com/s/1eQENhJG）
   
4. 完成以上步骤之后，即可实现在自己网站上制作左右滚动的切换图的效果了。

以上就是制作JS+DIV左右滚动的切换图的方法，如果你想制作轮播图，可以参照这个方法：如何制作网站轮播图。也欢迎大家去使用更多的JS特效代码。

标签： isp 代码 制作网站

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。