var myScroll;

function loaded(){
myScroll = new iScroll('wrapper',{
snap:true,
checkDOMChanges:true,
hScrollbar:false,
vScrollbar:false,
momentum:false,
onScrollEnd:function(){
document.querySelector('.product_nav > span.push').className = 'nav';
document.querySelector('.product_nav > span:nth-child(' + (this.currPageX+1) + ')').className = 'nav push';
}
});
} $(document).on('DOMContentLoaded', function () { setTimeout(loaded, 200); });

css部分代码如下:

<div id='wrapper'>
<div id='scroller'>
<ul>
<li><img src='' /></li>
<li><img src='' /></li>
<li><img src='' /></li>
<li><img src='' /></li>
<li><img src='' /></li>
<div style='clear:both;'></div>
</ul>
</div>
</div>
<div class='product_nav'>
<span class='nav push'></span>
<span class='nav'></span>
<span class='nav'></span>
<span class='nav'></span>
<span class='nav'></span>
</div>

#wrapper的宽高可为内部图片宽高,但要加上overflow:hidden;#scroller的宽需要为每幅图片宽度*图片数,每个li要有float:left。

iscroll横向滑动(当前页状态标记自动变化)的更多相关文章

  1. ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题

    ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题     如图红色为scrollview的背景色,在scrollview上加了图片之后,总会有向下的偏移 设置conten ...

  2. android 自定义adapter和线程结合 + ListView中按钮滑动后状态丢失解决办法

    adapter+线程 1.很多时候自定义adapter的数据都是来源于服务器的,所以在获取服务器的时候就需要异步获取,这里就需要开线程了(线程池)去获取服务器的数据了.但这样有的时候adapter的中 ...

  3. Android 自定义 HorizontalScrollView 打造再多图片(控件)也不怕 OOM 的横向滑动效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38140505 自从Gallery被谷歌废弃以后,Google推荐使用ViewPa ...

  4. UITableView 的横向滑动实现

    UITableView 的横向滑动实现 概述 为了实现横向滑动的控件,可以继承类 UIScrollView 或类 UIView 自定义可以横向滑动的控件,这里通过 UITableView 的旋转,实现 ...

  5. 解决iScroll横向滚动区域无法拉动页面的问题

    近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件.这个体验是实在是无法接受,特别是页面中有多个横向滚动区域 ...

  6. 横向滑动页面,导航条滑动居中的 js 实现思路

    最近在做新闻咨询页的项目,各个新闻频道通过横向滑动切换,顶部的导航active栏需要跟着切换到对应频道,并且active到达中部时,要一直处在中间. 类似效果就是uc浏览器<UC头条>的导 ...

  7. 纯css实现移动端横向滑动列表

    前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题. 这个问题不知道iscroll本身能不能解决,当时选择了换一种方式 ...

  8. 纯css实现移动端横向滑动列表(可应用于ionic3移动app开发)

    前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题. 这个问题不知道iscroll本身能不能解决,当时选择了换一种方式 ...

  9. 横向滑动的HorizontalListView滑动指定位置的解决方法

    项目中用到了自定义横向滑动的控件:HorizontalListView,点击其中一项,跳转到另外一个大图界面,大图界面也是HorizontalListView,想使用setSelection方法设定 ...

随机推荐

  1. CSS 最核心的几个概念

    CSS 中最核心的几个概念,包括:盒模型.position.float等. 这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成. 元素类型 HTML 的元素可以分为两种: 块级 ...

  2. web 网站安全证书已过期或不可信 是否继续浏览

    发生环境:魅族MX4  uc浏览器 IIS部署SSL证书后提示不可信的解决方案 第一步:打开mmc——点击文件——添加删除管理单元——证书——计算机帐户 第二步:在计算机帐户的个人证书里面导入pfx格 ...

  3. hadoop2.2.0集群安装

    位说明. 位).Jdk使用的1.7(1.6也可以).网络配置好,相互可以ping通,java环境安装完毕.   第一部分 Hadoop 2.2 下载 位). 下载地址:http://apache.cl ...

  4. 解决拦截器对ajax请求的的拦截

    拦截器配置: public boolean preHandle(HttpServletRequest request, HttpServletResponse response,Object obj) ...

  5. 关于ABAP事件的一张图

    事件: 这里有几组事件关键字 ,这些事件关键字在特定环境下控制ABAP/4 程序流. 逻辑数据库 是典型报表程序的外部流控制的中心点.如果将逻辑数据库链接到报表 程序,将导致显示选择 屏幕,并决定系统 ...

  6. EasyUI-页面布局

    通过使用 jQuery EasyUI 可以很容易地添加 Tabs.您只需要调用 'add' 方法即可. 在本教程中,我们将使用 iframe 动态地添加显示在一个页面上的 Tabs. 当点击添加按钮, ...

  7. LTTng 简介&使用实战

    一.LTTng简介 LTTng: (Linux Trace Toolkit Next Generation),它是用于跟踪 Linux 内核.应用程序以及库的系统软件包.LTTng 主要由内核模块和动 ...

  8. 采用subversion管理iOS资源

    1.装和配置subversionserver  在windows server上安装VisualSVN-Server.下载地址http://www.visualsvn.com/server/downl ...

  9. ActivityGroup相关--getLocalActivityManager()

    ActivityGroup简介 1.ActivityGroup的核心就是继承了该类,能够通过getLocalActivityManager()得到一个LocalActivityManager 如,Lo ...

  10. like的性能问题

    使用like'%匹配的文字%',无法优化,因为索引起不到作用. 不过like'匹配的文字%',索引起作用.