js滚动,滑动,幻灯片,轮播,swipe js滚动,滑动,幻灯片,轮播

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

js滚动,滑动,幻灯片,轮播,swipe js滚动,滑动,幻灯片,轮播相关推荐

ecshop lbi替换为html,ecshop商城网站首页幻灯片替换成自定义js轮播方法
ecshop商城网站的首页都会有一个首页主广告位,可以不停的播放网站的一些图片.但是程序自带的首页幻灯片样式特别单一,而且首页幻灯片还带有黑色边框,不是很好看. 下面学做网站论坛总结的将ecshop商 ...
轮播图自动滚动无缝连接 js
轮播图自动滚动无缝连接 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
移动web最简洁的滑动效果Swipe JS（适合初学者）
最近要做一个移动web的项目,前端后端都自己一人来搞.由于之前一直是做后端的开发,没涉及过前端的开发,甚是无从下手,但又不得不去弄,于是乎,先把w3school上前端相关的html.js.css都预览 ...
Swipe JS – 移动WEB页面内容触摸滑动类库
http://www.jiawin.com/swipe-mobile-touch-slider/ 想必做移动前端的同学经常会接到这样子的一个需求,就是在移动设备页面上的banner图能够用手指触摸左右 ...
HTML用循环显示名言,网页特效丨标题栏文字循环轮播的js特效 - 网页特效代码大全_网页特效集锦_站长素材站...
标题栏文字循环轮播的js特效 var message = new Array(); message[0] = "欢迎光临站长素材站"; message[1] = "这里有 ...
怎样用原生js配合css的transition写个无缝滚动
之所以想要写原生js配合css转换的无缝滚动,是因为之前在简书上看到一哥们写的一篇文章,说是在网上找了一堆js配合css transition属性写的轮播插件,可惜没有无缝的效果,结果他用原生js重写 ...
手机触屏滑动图片切换插件swiper.js
今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览源码下载实现的代码. html代码: <div ...
学习响应式BootStrap来写融职教育网站，Bootsrtap第八天轮播图js特效
<!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="UTF-8&q ...
html文本滚动到底后自动回到顶部,JS 实现DIV 滚动至顶部后固定
JS 实现DIV 滚动至顶部后固定 DIV滚动至顶部后固定 Test Div function menuFixed(id) { var obj = document.getElementById(id ...

js滚动,滑动,幻灯片,轮播,swipe js滚动,滑动,幻灯片,轮播

js滚动,滑动,幻灯片,轮播,swipe js滚动,滑动,幻灯片,轮播相关推荐

最新文章

热门文章