！声明文档类型

html lang='zh-CN '

头

meta charset='utf-8 '

标题查询幻灯片图片自动轮播滚动插件/title

元名称='关键字'内容='图片轮播，图片滚动，jquery插件，轮播，滑块，滚动，自动播放' /

元名称='描述'内容='jQuery幻灯片图片自动轮播滚动插件。' /

/head

身体

div class='main '

div class='mianc '

氕图片轮播/h1

！-演示开始-

！- css -

链接rel='样式表href='css/slide.css '

风格。CK-幻灯片{宽度： 700像素；高度： 320pxmargin: 0 auto}。CK-滑梯。CK-幻灯片-包装{高度： 320像素；}

/style

！- html -

div class='ck-slide '

ul class='ck-slide-wrapper '

里

a href=' JAVAScript : ' img src=' images/1。jpg ' alt=' '/a

/li

li style='display:none '

a href=' JAVAScript : ' img src=' images/2。jpg ' alt=' '/a

/li

li style='display:none '

a href=' JAVAScript : ' img src=' images/3。jpg ' alt=' '/a

/li

li style='display:none '

a href=' JAVAScript : ' img src=' images/4。jpg ' alt=' '/a

/li

li style='display:none '

a href=' JAVAScript : ' img src=' images/5。jpg ' alt=' '/a

/li

/ul

a href=' JavaScript : ' class=' ctrl-slide CK-prev '上一张/a a href=' JAVAScript :'class='ctrl-slide ck-next '下一张/a

div class='ck-slidebox '

div class='slideWrap '

ul等级='点换行'

li class='current'em1/em/li

m2/em/Li

liem3/em/li

lie 4/em/Li

liem5/em/li

/ul

/div

/div

/div

"朱轼"

p注：/p

p源码来自滑块插件，自行添加鼠标移入圆点标记切换方法，新增垂直滚动方法，提供设置自动播放时间间隔参数设置/p。

pslide.min.js源码/p

pslide.js原有基础上增加/p

p目的：更好地理解插件，继而能更好的使用/p

pIE7、IE8、IE9、FF下测试初步通过/p

/div

！- js -

脚本src=' js/jquery-1。8 .3 .量滴js '/脚本

！-脚本src=' js/slide。量滴js '/脚本-

脚本src=' js/slide。js '/脚本

脚本

$('.CK-幻灯片' .ckSlide({

autoPlay: true，//默认为不自动播放，需要时请以此设置

dir: 'x '，//默认效果淡隐淡出，x为水平移动，y为垂直滚动

interval:3000//默认间隔2000毫秒

});

/script

！-演示结束-

/div

/div

风格

* { margin : 0；padd : 0；}

html，body { height : ；隐藏飞越：}。主h1 {宽度： ；margin : 40px autofont : 32px '微软雅黑；文本对齐：中心；}

/*注释*/。朱轼{ width :900 pxmargin : 30px auto }/*注释*/。朱轼p { line-height :24 px' font-family: '微软雅黑；font-size :16 px向左文本对齐：}

/style

/body

/html