利用HTML5 CSS3实现图片背景滑块代码



27 107 36



特效描述:利用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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 flash焦点图 flash幻灯片 flashbanner flash图片轮播 切换按钮 表单 表单美化 表单插件 表单美化插件 焦点图 幻灯片 轮播图 bar焦点图 图片滑动 图片滑块 纯图片轮播 图片轮播 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到