top
元旦节到了,元旦节快乐...

固定当前背景  反馈、咨询、建议、留言等,请点这里[Alt+G]

本栏相关
其他文章
JavaScriptJavaScript当前位置:首页 >>开发技巧>>JavaScript
Jquery焦点图循环滚动、图片连续无缝循环滚动imgscroll插件的使用方法
编辑yang 发布时间2014-11-02 浏览量193821 来源本站原创
摘要:imgScroll插件是本站依赖于jQuery所编写的图片循环切换插件,支持渐变及滚动等方式,带有可控制焦点切换、向左向右切换滚动、图片连续无缝循环滚动的效果,引用jquery.imgscroll.min.js后直接调用即可(更新时间:2016-12-09)。

下载/引用地址: http://www.xcsoft.cn/Public/js/jquery.imgscroll.min.js

基本调用方法,其他可参考演示

// JavaScript Document
/**
 * 当你的页面已经加载jquery时,如下写法
 */
$(function(){
    imgScroll.scroll({
        name:'imgscroll2',
        width:'380px',
        direction:"left",
        height:'180px',
        addcss:true,
        showinfo:"scroll",
        infodirection:'top',
        speed:200
    },5000,1000)
})
/**
 * 当你的页面还没有加载jquery时,本函数自动加载jquery,默认调用百度CDN公共库的jquery
 * xcsoft.jquery(function(){...},param)
 * @param function(){...} 函数,即jquery加载后执行,如同$(function(){...})
 * @param param string 版定本[见下方取值]或者自义jquery相对路径或者绝对路径,默认调用百度CDN公共库的jquery中的1.6.4版本
 * version 取值规定:2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3
 * xcsoft.jquery(function(){},'1.6.4')//调用百度CDN公共库中的jquery版本
 * xcsoft.jquery(function(){},'http://www.xcsoft.cn/Public/js/jquery.js')//调用自定义jquery
 */
xcsoft.jquery(function(e){
    //滚动循环示例
    imgScroll.scroll({
        name:'imgscroll2',
        width:'380px',
        direction:"left",
        height:'180px',
        addcss:true,
        showinfo:"scroll",
        infodirection:'top',
        speed:200
        },5000,1000)
});

焦点渐变循环切换imgScroll.gradual({参数:值,参数:值,...},图片停留时间,动画切换速度) 查看演示

参数有效性描述
name自定义必填图片切换容器的class样式名,如:imgscroll
eventclick|hover选填焦点控制的鼠标事件,默认:hover
addcsstrue|false选填自动添加必要CSS样式,默认:true
autoplaytrue|false选填自动滚动,默认:true
width自定义选填:addcss为true时生效循环的元素宽度,如:380px,默认:取第一个li的宽度
height自定义选填:addcss为true时生效循环的元素高度,如:180px,默认:取第一个li的高度
prev自定义选填控制上一张显示的class样式名,默认:pre
next自定义选填控制下一张显示的class样式名,默认:next
showinfogradual|scroll|normal选填图片说明的显示方式,gradual(渐变/默认)、scroll(滚动)
infodirectionbottom|left|right|top选填:showinfo为scroll时生效图片说明的滚动方向,默认:bottom
speed自定义选填:showinfo为normal时生效图片说明的滚动速度,默认:100(0.1s)

焦点滚动循环切换imgScroll.scroll({参数:值,参数:值,...},图片停留时间,动画切换速度) 查看演示

参数有效性描述
name自定义必填图片切换容器的class样式名,如:imgscroll
directionleft|right|top|bottom选填定义滚动方向,默认:left
eventclick|hover选填焦点控制的鼠标事件,默认:hover
addcsstrue|false选填自动添加必要CSS样式,默认:true
autoplaytrue|false选填自动滚动,默认:true
width自定义选填:addcss为true时生效循环的元素宽度,如:380px,默认:取第一个li的宽度
height自定义选填:addcss为true时生效循环的元素高度,如:180px,默认:取第一个li的高度
prev自定义选填控制上一张显示的class样式名,默认:pre
next自定义选填控制下一张显示的class样式名,默认:next
showinfogradual|scroll|normal选填图片说明的显示方式,gradual(渐变/默认)、scroll(滚动)
infodirectionbottom|left|right|top选填:showinfo为scroll时生效图片说明的滚动方向,默认:bottom
speed自定义选填:showinfo为normal时生效图片说明的滚动速度,默认:100(0.1s)

续无缝循环滚动imgScroll.rolling({参数:值,参数:值,...}) 查看演示

参数有效性描述
name自定义必填图片滚动容器的class样式名,如:imgscroll
directionleft|right|top|bottom选填定义滚动方向,默认:left
addcsstrue|false选填自动添加必要CSS样式,默认:true
width自定义选填:addcss为true时生效循环的元素宽度,如:380px
height自定义选填:addcss为true时生效循环的元素高度,如:180px
speed自定义选填滚动速度,默认:40(数值越小,滚动越快)

       注1:当addcss为false时,将不添加必要的CSS样式,请在CSS里自行添加.

       注2:如需渐变/滚动实时切换看效果时,请将addcss改为true.

       注3:[必须]使用前需引用JQuery,或者使用xcsoft.jquery自动加载JQuery.

标签   技巧网页制作

按键盘左右方向键可快速浏览上一篇(←)、下一篇(→)


反馈/咨询/建议/留言(GuestBook)
您好,怎么称呼您!
您的姓名:
上一步:鼠标向上滚动/左方向键(←)
下一步或完成:鼠标向下滚动/Tab键/右方向键(→)
如果您有空的话,可以填一下您的相关信息!
您的电话:
您的邮箱:
现在,请填写您想要了解的信息!
信息内容:
验证码: 看不清?点图片刷新