我也不知道叫什么功能通通叫出来得了,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>
