HTML5 CSS3图片背景滑块代码

特效描述：利用HTML5 CSS3实现 图片背景 滑块代码，利用HTML5 CSS3实现图片背景滑块代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/jquery.min.js"></script>

<script src="js/index.js"></script>

3. HTML代码

<div class="cont">
<div class="mouse"></div>
<div class="app">
<div class="app__bgimg">
<div class="app__bgimg-image app__bgimg-image–1"> </div>
<div class="app__bgimg-image app__bgimg-image–2"> </div>
</div>
<div class="app__img"> <img onMouseDown="return false" src="img/whiteTest4.png" alt="city" /> </div>
<div class="app__text app__text–1">
<div class="app__text-line app__text-line–4">imperdiet </div>
<div class="app__text-line app__text-line–3">ut le</div>
<div class="app__text-line app__text-line–2">non tincidunt </div>
<div class="app__text-line app__text-line–1"><img src="img/opus-attachment.png" alt="" /></div>
</div>
<div class="app__text app__text–2">
<div class="app__text-line app__text-line–4">habitant</div>
<div class="app__text-line app__text-line–3">ut eget</div>
<div class="app__text-line app__text-line–2">Nam imperdiet</div>
<div class="app__text-line app__text-line–1"><img src="img/opus-attachment.png" alt="" /></div>
</div>
</div>
<div class="pages">
<ul class=’pages__list’>
<li data-target=’1′ class=’pages__item pages__item–1 page__item-active’></li>
<li data-target=’2′ class=’pages__item pages__item–2′></li>
</ul>
</div>
</div>
<script src="js/jquery.min.js"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px ‘MicroSoft YaHei’;">
</div>

下载地址

立即下载