jquery 實現(xiàn)企業(yè)建站客戶案例介紹圖片滾動切換效果代碼?;趕uperslide開發(fā), 結(jié)構(gòu)簡單清晰,下載即可使用。
使用方法:
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">我覺得建站這個產(chǎn)品特別好,功能簡單易懂快速上手,做起一個網(wǎng)站時間特別短,省了不少精力不少錢</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">體驗了建站,發(fā)現(xiàn)網(wǎng)站的可編輯性非常大,不懂設(shè)計也可以做出很多個性的效果!服務(wù)很好。</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">的平臺操作簡易快捷,整個建站過程很順暢。讓企業(yè)網(wǎng)站有亮點,更完美!</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>