mobile_轮播图_style_left 版本
mobile 轮播图
小圆点逻辑（排他）
1. 统一给所有 span 元素加 class="";
2. 切换到谁，谁的 class="active";
- 移动端轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>移动端轮播图</title> <style type="text/css">
* {
padding: 0;
margin: 0;
} a {
text-decoration: none;
} ul,
ol {
list-style: none;
} input {
outline: none;
} img {
display: block;
} html,
body {
height: 100%;
overflow: hidden;
} #wrap {
width: 100%;
height: 100%; background-color: #96b377;
} /**** ****/
#wrap {
position: relative;
} #wrap #ul_list {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 500%;
} #wrap #ul_list>li {
float: left;
} #wrap #ul_list>li>a>img{
width: 100%;
} /**** 小圆点 ****/
#ol_list {
position: absolute;
bottom: 10px;
right: 10px;
width: 75px;
display: flex;
justify-content: space-between;
} #ol_list li {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: gray;
} #ol_list li.active {
background-color: deeppink;
}
</style>
</head> <body> <!-- 模拟手机屏幕 -->
<section id="wrap">
<ul id="ul_list">
<li>
<a href="javascript:;"><img src="./img/Deadpool.jpg"/></a>
</li> <li>
<a href="javascript:;"><img src="./img/Groot.jpg"/></a>
</li> <li>
<a href="javascript:;"><img src="./img/Hock.jpg"/></a>
</li> <li>
<a href="javascript:;"><img src="./img/RocketRaccoon.jpg"/></a>
</li> <li>
<a href="javascript:;"><img src="./img/SpiderMan.jpg"/></a>
</li>
</ul> <ol id="ol_list">
<li data-pindex="0" class="active"></li>
<li data-pindex="1"></li>
<li data-pindex="2"></li>
<li data-pindex="3"></li>
<li data-pindex="4"></li>
</ol>
</section> <!-- javascript 代码 -->
<script type="text/javascript">
// 取消默认行为
document.addEventListener("touchstart", function(e){
e.preventDefault();
}, false); // 点透处理 var clientWidth = document.documentElement.clientWidth;
// 适配
(function(){ /* 1. 创建 style 标签 */
var styleNode = document.createElement("style"); /* 2. 给 style 标签添加内容 (屏幕分份, 大多数公司 16 份) */
styleNode.innerHTML = "html {"+
"font-size:"+clientWidth/16+"px !important"+
"}"; /* IPhone 6 的 font-size: 23.4375px */ /* 3. 把 style 标签追加到 head 标签里 */
document.head.appendChild(styleNode);
}()); var wrap = document.getElementById("wrap");
var ulList = document.getElementById("ul_list");
var olList = document.getElementById("ol_list"); var lis = document.querySelectorAll("#ul_list>li");
var points = document.querySelectorAll("#ol_list>li"); window.onload = function(){
var styleNode = document.createElement("style");
styleNode.innerHTML = "#ul_list {width:"+lis.length+"00%;}";
styleNode.innerHTML += "#ul_list>li {width:"+100/lis.length+"%;}";
document.head.appendChild(styleNode); styleNode.innerHTML += "#wrap {height:"+lis[0].offsetHeight+"px;}";
}; var oldUlX = 0;
var oldTouchX = 0;
var curIndex = 0;
wrap.addEventListener("touchstart", function(e){
var touch = e.changedTouches; oldTouchX = touch[0].clientX;
oldUlX = ulList.offsetLeft;
},false); wrap.addEventListener("touchmove", function(e){
var touch = e.changedTouches; var newTouchX = touch[0].clientX;
var newUlX = oldUlX + (newTouchX - oldTouchX); if(newUlX > 0){
newUlX = 0;
}else if(newUlX < -ulList.offsetWidth+clientWidth){
newUlX = -ulList.offsetWidth+clientWidth;
} ulList.style.left = newUlX + "px";
},false); wrap.addEventListener("touchend", function(){
curIndex = Math.round(-ulList.offsetLeft/clientWidth); ulList.style.left = -curIndex*clientWidth + "px"; for(var i=0; i<points.length; i++){
points[i].className = "";
};
points[curIndex].className = "active";
},false); olList.addEventListener("touchstart", function(e){
touch = e.changedTouches;
e.stopPropagation();
ele = touch[0].target;
if(ele.nodeName == "LI"){
for(var i=0; i<points.length; i++){
points[i].className = "";
};
ele.className = "active"; curIndex = +ele.dataset.pindex;
ulList.style.left = -curIndex*clientWidth + "px";
};
}, false);
</script>
</body>
</html>
mobile_轮播图_style_left 版本的更多相关文章
- mobile_轮播图_transform 版本_transform 读写二合一
轮播图_transform 版本 关键点: 2D 变换 transform 不会改变 元素 在 文档流 中的位置 定位 position 会改变 元素 在 文档流 中的位置 语句解析太快,使用 set ...
- 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器
项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...
- iOS swift版本无限滚动轮播图
之前写过oc版本的无限滚动轮播图,现在来一个swift版本全部使用snapKit布局,数字还是pageConrrol样式可选 enum typeStyle: Int { case pageContro ...
- jquery版本轮播图（es5版本，兼容高）
优势:基于es5,兼容高.切换动画css配置,轻量,不包含多余代码,可扩展性很高,多个轮播图不会冲突,可配置独有namespace 注: 1.项目需要所写,所以只写了页码的切换,未写上一页下一页按钮, ...
- ViewPager轮播图
LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...
- （新手向）基于Bootstrap的简单轮播图的手机实现
个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...
- swift－自定义无限轮播图
一 前言 1.之前一直在用OC编程,最近才开始接触使用swift就发现使用OC越来越不习惯,感觉已经爱上了swift. 2.这个自定义轮播图只是对之前OC版本进行了翻译,欢迎指正. 3.我决定一步步 ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- ⒃bootstrap组件 轮播图 基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 安装mysql和xampp遇到问题
1.mysql的期望地址和配置的地址不一致: 解决方法:修改注册表 在附件命令提示符输入regedit 找[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Se ...
- Linux查看系统信息的命令及已安装软件包的命令
系统 uname -a查看内核/操作系统/CPU信息head -n 1 /etc/issue查看操作系统版本cat /proc/cpuinfo查看CPU信息hostname查看计算机名lspci -t ...
- 数字化IT人才与组织
企业的数字化目标 数字时代需要怎样的IT 数字化平台战略 产品一体化交付能力 产品设计与规划的能力 路线图 数字人才框架 Tips: 赋能授权(Empowerment)是近年来应最多的商业语汇之一.赋 ...
- JavaScript复习
一.常用对话框 1.alert(""):警告对话框,作用是弹出一个警告对话框 2.confirm(""):确定对话框,弹出一个带确定和取消按钮的对话框——确定返 ...
- DDoS的类型及原理
1.DDoS攻击: DDOS(Distributed Denial of Service),又称分布式拒绝服务攻击.骇客通过控制多个肉鸡或服务器组成的僵尸网络,对目标发送大量看似合法请求,从而占用大量 ...
- MapReduce Partition解析
Map的结果,会通过partition分发到Reducer上,reducer操作过后会进行输出.输出的文件格式后缀000001就代表1分区. Mapper处理过后的键值对,是需要送到Reducer那边 ...
- 在Linux中调试段错误(core dumped)
在Linux中调试段错误(core dumped) 在作比赛的时候经常遇到段错误, 但是一般都采用的是printf打印信息这种笨方法,而且定位bug比较慢,今天尝试利用gdb工具调试段错误. 段错误( ...
- Python 爬虫 某迅漫画 selemiun+plantomJS
目标站点需求分析 爬取某迅漫画到本地 涉及的库 selenium, PhantomJS time,urllib.request,os,random 模拟滑动窗口,获取完整网页 保存到文件中 获取本地h ...
- unity setactive的使用
1.可以用本身移出布局来实现隐藏 2.RawImage的texture的设置生成的一定要及时消除,避免内存泄漏
- Linux系统xinetd服务启动不了
Linux系统xinetd服务启动不了 xinetd服务时发现xinetd服务启动不了,并出现错误提示xinetd:unrecognized service,当出现这个错误提示的时候说明系统未安装xi ...