有些學員在學習制作網(wǎng)站時，想在自己的網(wǎng)站上添加一些左右滾動的切換圖效果，這種效果可以實現(xiàn)自動切換和手動左右切換。如果要實現(xiàn)在網(wǎng)站上增加切換圖的功能，可以通過DIV+CSS的模板制作出來。

如何在自己做網(wǎng)站時添加左右滾動的切換圖的步驟：

1. 在自己網(wǎng)站需要添加切換圖的位置放上以下的HTML代碼（如果你對HTML不了解，請學習html5從入門教程）；圖片可以是固定的幾張圖片，也可以使用動態(tài)調用代碼來調用網(wǎng)站文章中的圖片。
   <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. 在網(wǎng)站的CSS文件的底部粘貼下面的CSS樣式，用來控制版塊的樣式�？梢詫�CSS進行適當?shù)男薷膩矸�合自己做網(wǎng)站的尺寸的需要。
   /*
   *代碼來源：學做網(wǎng)站論壇 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文件，然后上傳到自己網(wǎng)站空間的根目錄下。（js文件下載地址：http://pan.baidu.com/s/1eQENhJG）
   
4. 完成以上步驟之后，即可實現(xiàn)在自己網(wǎng)站上制作左右滾動的切換圖的效果了。

以上就是制作JS+DIV左右滾動的切換圖的方法，如果你想制作輪播圖，可以參照這個方法：如何制作網(wǎng)站輪播圖。也歡迎大家去使用更多的JS特效代碼。

標簽： isp 代碼 制作網(wǎng)站

版權申明：本站文章部分自網(wǎng)絡，如有侵權，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權歸原作者所有，如需使用，請與原作者聯(lián)系。