为了提高自己的JS编辑能力,自己造轮子使用原生JS实现图片轮换效果,其中uxinxinScroll在滚动展示时有动画效果,uScroll就是简单的隐藏和展示,所有效果均可以通过查看源代码获取,就不再具体陈述。
uxinxinScroll插件中的参数有
{
            width:'300px',//窗口宽度
            height:'160px',//窗口高度
            iWidth:'300px',//单个元素宽度
            ul:'ul',//对应html的ul标签,
            li:'li',//对应html的li标签
            auto:true,//是否自动播放
            left:'prv',//向左按钮的class名称
            right:'next',//向右按钮的class名称
            time:6000,//切换间隔时间
            direction:'left',//向那边切换可选参数:'left','right'
            curr:0,//默认从第几张图片展示
            step:5//动画的速度,值越大切换速度越快,如果设置全屏展示建议给该值设置的大一点
        }

demo中,主要注意设置li标签样式的宽度和高度,

demo1中,主要注意当设置参数,width和iWidth值都为'100%'时,会以单个大图的形式展示图片切换效果

demo2中,主要突出样式中设置li的margin也被计算到滚动范围,方便编码

下面的demo3,和demo4都是展示的uScroll插件的效果,相对参数更少一些,主要细节都在样式表li标签的宽高和调用参数的宽高配合设置上
{
            width:'300px',//窗口宽度
            height:'160px',//窗口高度
            ul:'ul',//对应html的ul标签,
            li:'li',//对应html的li标签
            auto:true,//是否自动播放
            left:'prv',//向左按钮的class名称
            right:'next',//向右按钮的class名称
            time:6000,//切换间隔时间
            curr:0,//默认从第几张图片展示
        }