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. UVA 10047 The Monocycle (状态记录广搜)

    Problem A: The Monocycle  A monocycle is a cycle that runs on one wheel and the one we will be consi ...

  2. C#封装加密算法(MD5、SHA、HMAC、DES、RSA)的一个类

    using System; using System.IO; using System.Security.Cryptography; using System.Text; namespace Wen. ...

  3. Apache Commons 工具类

    http://blog.csdn.net/feicongcong/article/details/53374399http://blog.csdn.net/hsienhua/article/detai ...

  4. Hibernate学习之get和load区别

    结论: insert():插入记录并将同步更新到session缓存. update():更新记录并同步更新到session缓存. delete():删除记录并同步更新session缓存. get(): ...

  5. Linux系统Load average负载详细解释

    我们知道判断一个系统的负载可以使用top,uptime等命令去查看,它分别记录了一分钟.五分钟.以及十五分钟的系统平均负载 例如我的某台服务器: $ uptime 09:50:21 up 200 da ...

  6. jquery mobile图片自适应屏幕

    jquery mobile中如果不给img标签指定宽度的话,无法达到自适应屏幕的效果,特此备注:width:100%;

  7. linux shell wc 命令

    1. 语法与选项 Short Option Long Option Option Description -c –bytes print the byte counts -m –chars print ...

  8. Load resources from classpath in Java--reference

    In general classpath is the path where JVM can find .class files and resources of your application a ...

  9. python学习笔记--Django入门四 管理站点

    上一节  Django入门三 Django 与数据库的交互:数据建模 "管理员界面"是基础功能中的重要部分. django.contrib 包 Django自动管理工具是djang ...

  10. marquee 标签的使用详情

    <marquee>标签,它是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容.<marquee>标签的属性主要 ...