移动端页面滑动轮播

来源：互联网发布：linux下串口调试编辑：程序博客网时间：2024/06/05 18:49

html部分；

<!DOCTYPE HTML>
<html>
<head>
<title>Rundiv</title>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>


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

<style>

/* Rundiv required styles */

#rundiv {
overflow: hidden;
visibility: hidden;
position: absolute;
width:188px;
height:200px;
background:red;
right:0;
}
.wrap {
overflow: hidden;
position: relative;
}
.wrap > div {
float:left;
width:100%;
position: relative;
}
.rundivBar{
   display:none;
}
/* END required styles */

</style>

</head>
<body>

<div id='rundiv'>
<div class='wrap'>
    <div><b><img src="img/3.jpg" alt="" /></b></div>
    <div><b><img src="img/4.jpg" alt="" /></b></div>
    <div><b><img src="img/5.jpg" alt="" /></b></div>
    <div><b><img src="img/6.jpg" alt="" /></b></div>
    <div><b><img src="img/7.jpg" alt="" /></b></div>
    <div><b><img src="img/3.jpg" alt="" /></b></div>
    <div><b><img src="img/4.jpg" alt="" /></b></div>
    <div><b><img src="img/5.jpg" alt="" /></b></div>
    <div><b><img src="img/6.jpg" alt="" /></b></div>
    <div><b><img src="img/7.jpg" alt="" /></b></div>
</div>
</div>

<div class="rundivBar">

<button onclick='rundiv.prev()'>prev</button>
<button onclick='rundiv.next()'>next</button>
<button onclick='alert(rundiv.getPage())' >getpage</button>
<button onclick='alert(rundiv.getNumSlides())' >sum of Slide</button>
<ol id="rundivNav">
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ol>
</div>

<script src='Rundiv.min.js'></script>
<script>

// pure JS

var elem = document.getElementById('rundiv');
window.rundiv = Rundiv(elem, {
   hasNav:true,
   startSlide: 1,
   auto: 4000,
   continuous: true,
// disableScroll: true,
// stopPropagation: true,
// callback: function(index, element) {},
// transitionEnd: function(index, element) {}
});
rundiv.linkNav("rundivNav");    //the id of the ol or ul (if you use this,please make sure hasNav:true)

// with jQuery
// window.rundiv = $('#rundiv').Rundiv().data('Rundiv');

</script>
</body>
</html>

css部分

*{
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
-webkit-text-size-adjust:none;
font-family:sans-serif;

position:relative;
}
/*h1 {
font-size:33px;
margin:50px 0 15px;
text-align:center;
color:#212121;
}
h2 {
font-size:14px;
font-weight:bold;
color:#3c3c3c;
margin:20px 10px 10px;
}*/
small {
margin:0 10px 30px;
display:block;
font-size:12px;
}
a {
margin:0 0 0 10px;
font-size:12px;
color:#3c3c3c;
}

html, body {
background: #f3f3f3;
}

.rundivBar{
padding-top: 20px;
text-align: center;
}

.rundivBar button{
border: 1px solid #000;
padding: 4px;
}

.rundivBar #rundivNav li{
display: inline-block;
background: #444;
width: 20px;
color: #fff;
}
.rundivBar #rundivNav .active{
background: #980;
}

#rundiv div b {
display:block;
font-weight:bold;
color:#14ADE5;
font-size:20px;
/*text-align:center;*/
/* margin-right:10px;*/
/*padding:100px 10px;*/
width:178px;
   height:296px;
box-shadow: 0 1px #EBEBEB;
background: #fff;
border-radius: 3px;
border: 1px solid blue;
/*border-color: #E5E5E5 #D3D3D3 #B9C1C6;*/
}
#rundiv div b img{
   width:178px;
   height:296px;
   /*border:1px solid red;*/
}
需要引用Rundiv.min.js

阅读全文

0 0