我也不知道叫什么功能通通叫出来得了,js滚动,滑动,幻灯片,轮播图
下载插件swipe.js,swipe.css ( http://download.csdn.net/download/u014596302/9771299 )俩文件 引入html中
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试内容滑动效果</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<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>
/* Swipe 2 required styles */
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
/* END required styles */
</style>
</head>
<body>
<h1>Swipe 测试</h1>
<div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
<div class='swipe-wrap'>
<div style=""><b>0区域</b></div>
<div><b>1区域</b></div>
<div><b>2区域</b></div>
<div><b>3区域</b></div>
<div><b>4区域</b></div>
<div><b>5区域</b></div>
<div><b>6区域</b></div>
<div><b>7区域</b></div>
<div><b>8区域</b></div>
<div><b>9区域</b></div>
<div><b>10区域</b></div>
</div>
</div>
<div style='text-align:center;padding-top:20px;'>
<button οnclick='mySwipe.prev()'>prev</button>
<button οnclick='mySwipe.next()'>next</button>
</div>
<script src='swipe.js'></script>
<script>
// pure JS
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
startSlide: 4,//初始化页面显示第4个轮番图 从0开始
auto: 3000,//自动切换时间间隔3秒
continuous: true,//切换所有图片完毕 继续切换第一张,反之false
// disableScroll: true,
// stopPropagation: true,
// callback: function(index, element) {},//每次执行的回调
// transitionEnd: function(index, element) {}
});
</script>
</body>
![css没有滚动条但是可以实现滚动效果[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)