出色的html滑动效果库 swiper -例子4 超长单栏横向滑动

来源：互联网发布：淘宝账号名称怎么修改编辑：程序博客网时间：2024/06/18 09:47

可以用于div滑动，图片滑动等切换

例子代码以及所需资源：http://download.csdn.net/detail/feisy/6638105

官网例子：使用iframe来在同一个页面里面加入了很多各种不同的演示 http://www.idangero.us/sliders/swiper/demos.php

<!doctype html><html lang="en"><head>  <meta charset="UTF-8">  <title>Demo</title>  <link rel="stylesheet" href="css/idangerous.swiper.css">  <link rel="stylesheet" href="css/idangerous.swiper.scrollbar.css">  <style>/* Demo Styles */body {  margin: 0;  font-family: Arial, Helvetica, sans-serif;  font-size: 13px;  line-height: 1.5;}.swiper-container {  width: 640px;  height: 300px;  text-align: center;}.swiper-slide {  width: 1520px;  padding: 20px;  background: #fff;}.red-slide {  background: #ca4040;}.blue-slide {  background: #4390ee;}.orange-slide {  background: #ff8604;}.green-slide {  background: #49a430;}.pink-slide {  background: #973e76;}.swiper-scrollbar {  width: 100%;  height: 4px;  position: absolute;  left: 0;  bottom: 5px;  z-index: 1;}  </style></head><body>  <div class="swiper-container">    <div class="swiper-scrollbar"></div>    <div class="swiper-wrapper">      <div class="swiper-slide">        <div class="red-slide" style="width:250px; float:left; font-size:25px; line-height:30px; text-align:center">          <p style="color:#fff; font-weight:bold; font-style:italic;">Your dreams come true:) That is a simple single scrollable area! No slides, no nothing, just pure area!</p>        </div>        <div style="width:300px; float:left; margin-left:20px">          <p>Here goes some text</p>          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum ipsum auctor nulla consectetur sed porta nunc placerat.</p>          <p>Nulla dui augue, sollicitudin egestas consequat a, consequat quis neque. Sed at mauris nunc. Donec rutrum leo id risus congue convallis. Maecenas ultrices condimentum velit, nec tincidunt lorem convallis consequat. Nulla elementum consequat quam eu euismod</p>        </div>        <div style="width:500px; float:left; margin-left:20px">          <p>Here goes wide image</p>          <p><img src="img/bb.jpg"></p>        </div>        <div class="blue-slide" style="width:350px; float:left; font-size:28px; line-height:30px; text-align:center; margin-left:20px; padding:25px">          <p style="color:#fff; font-weight:bold; font-style:italic;">You can make it any width/height, horizontal (like this one) or vertical, with any styling and with any HTML content!</p>        </div>      </div>    </div>  </div>  <script src="js/jquery-1.10.1.min.js"></script>  <script src="js/idangerous.swiper-2.1.min.js"></script>  <script src="js/idangerous.swiper.scrollbar-2.1.js"></script>  <script>  var mySwiper = new Swiper('.swiper-container',{    scrollContainer: true,    scrollbar: {      container: '.swiper-scrollbar'    }  })  </script></body></html>