jquery 实现企业建站客户案例介绍图片滚动切换效果代码。基于superslide开发, 结构简单清晰,下载即可使用。
使用方法
1、head引入css文件
<link href="css/style.css" rel="stylesheet" type="text/css"/>2、head引入js文件
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>3、body引入HTML代码
<div class="home-banner"> <div class="home-banner-box"> <div class="home-banner-head"> <h2>客户说</h2> </div> </div> <div class="home-banner-body"> <div class="home-banner-bg"></div> <div class="home-banner-slider"> <div class="home-banner-con"> <div class="home-shadow"> <div class="home-banner-line"> <div class="home-banner-list"> <div class="item-q"></div> <div class="item-q"></div> <div class="item-q"></div> </div> </div> <div class="bd"> <ul> <li> <img src="images/banner001.jpg" alt=""> <div class="home-banner-text"> <div class="home-title">CARITER YAILISI</div> <div class="home-text">我觉得建站这个产品特别好,功能简单易懂快速上手,做起一个网站时间特别短,省了不少精力不少钱</div> <div class="home-button"> <a href="#">免费拥有</a> </div> </div> </li> <li> <img src="images/banner002.jpg" alt=""> <div class="home-banner-text"> <div class="home-title">唯美婚纱</div> <div class="home-text">体验了建站,发现网站的可编辑性非常大,不懂设计也可以做出很多个性的效果!服务很好。</div> <div class="home-button"> <a href="#">免费拥有</a> </div> </div> </li> <li> <img src="images/banner003.jpg" alt=""> <div class="home-banner-text"> <div class="home-title">ROSE CAKE</div> <div class="home-text">的平台操作简易快捷,整个建站过程很顺畅。让企业网站有亮点,更完美!</div> <div class="home-button"> <a href="#">免费拥有</a> </div> </div> </li> </ul> </div> </div> </div> <a href="javascript:void(0)" class="prev"></a> <a href="javascript:void(0)" class="next"></a> </div> </div> </div> <script type="text/javascript"> jQuery(".home-banner-slider").slide({ mainCell: ".bd ul", effect: "left", autoPlay: false, delayTime: 700 }); </script>