滑动切换的背景图

最新推荐文章于 2020-06-25 13:24:51 发布

最新推荐文章于 2020-06-25 13:24:51 发布 · 423 阅读

本文介绍了一种使用HTML和JavaScript实现的滑动切换背景图片效果。通过设置一系列图片，并利用控制按钮完成前后图片的切换及暂停功能，适用于网页设计中增加动态视觉效果。

滑动切换的背景图

演示

   XML/HTML Code
  

   <div class="container">   
            <div class="main">  
                <ul id="cbp-bislideshow" class="cbp-bislideshow">  
                    <li><img src="images/1.jpg" alt="image01"/></li>  
                    <li><img src="images/2.jpg" alt="image02"/></li>  
                    <li><img src="images/3.jpg" alt="image03"/></li>  
                    <li><img src="images/4.jpg" alt="image04"/></li>  
                    <li><img src="images/5.jpg" alt="image05"/></li>  
                    <li><img src="images/6.jpg" alt="image06"/></li>  
                </ul>  
                <div id="cbp-bicontrols" class="cbp-bicontrols">  
                    <span class="cbp-biprev"></span>  
                    <span class="cbp-bipause"></span>  
                    <span class="cbp-binext"></span>  
                </div>  
            </div>  
        </div>  

  