$(".update_1").poshytip('destroy');
$('.update_1').poshytip({
content: updatecountdiv,
className: 'tip-yellowsimple-update',
showOn: 'none',
alignTo: 'target',
alignX: 'right',
alignY: 'right',
offsetY: -25,
offsetX: -13,
liveEvents: true
$('.update_1').poshytip('show');
jquery幻灯片--轻量级内容滚动插件
时间就是金钱 ，当前时间：
日期： 19:42:16 来源：
& & & &今天为大家介绍的js特效是一款明教FlexSlider的轻量级内容滚动插件，开发者只需要简单几个步骤的配置即可创建出很漂亮的内容滚动效果，功能十分丰富，而且可以自由定制，自由度高，创造的款式任君选择。& & & &大家如果喜欢的话欢迎下载。& & & &关键代码：$(window).load(function()&{
&&//&The&slider&being&synced&must&be&initialized&first
&&$('#carousel').flexslider({
&&&&animation:&&slide&,
&&&&controlNav:&false,
&&&&animationLoop:&false,
&&&&slideshow:&false,
&&&&itemWidth:&210,
&&&&itemMargin:&5,
&&&&asNavFor:&'#slider'
&&$('#slider').flexslider({
&&&&animation:&&slide&,
&&&&controlNav:&false,
&&&&animationLoop:&false,
&&&&slideshow:&false,
&&&&sync:&&#carousel&
注册仅几秒，作品伴一生。本站注册只为大家能把喜欢的作品进行收藏以供后用
相关文章推荐
coin slider 幻灯片轮播插件，适应各种设备
本实例功能十分强大，有独特的过渡效果，灵活的配置，而且兼容a
/news/2/coin-slider-image-slider-with-unique-effects
绚丽的文字特效-lettering个性化文字排版
本次介绍的插件叫Lettering.js，是一个十分轻量的，
/news/9/jquery-lettering-plugin
图片走廊，展现图片之美-fancybox图片查看器
fancyBox是一个能够给图片，html内容和多媒体内容提
/news/10/jquery-fancybox-plugin
JQuery-fullscreen图片全屏并保持宽高比例的背景图
您可否曾经想过在您的网站上有一副时常 能填满屏幕而又能保持宽
/news/11/jquery-fullscreen-plugin
展示各类文件用这个，lightbox又一新作
今天为大家介绍的是又一个效果炫目的LightBox插件。 此
/news/12/jquery-lightbox-eachfiletype
SiteSwitcher站点切换插件使用
鼠标经过图片会显示标题和描述文字，离开则隐藏，期间展示和隐藏
/news/44/site-switcher-plugin
Easy Image Zoom_一款轻量的图像缩放插件
功能简介：
1.鼠标放到略缩图上，图片放大。
/news/51/jquery-plugin-easy-image-zoom
代替传统的checkbox样式的jquery插件
本次介绍的jquery插件是将完全代替默认浏览器的表单che
/news/53/check-box-jquery-plugin
diagonalFade-轻松定制淡入淡出效果的JQuery插件
今天为大家介绍的是一款名为diagonalFade的jque
/news/55/diagonal-fade-jquery-plugin
jrumble-让元素动起来的插件
本次给大家介绍的是一款能让HTML震动，旋转，闪烁等效果的J
/news/56/jrumble-jquery-plugin
imageLens-为图片添加镜头放大效果
今天为大家介绍的是一款能为图片添加镜头放大效果的JQuery
/news/57/image-lens-jquery-plugin
一款效果很棒的JQuery标签输入插件
您可曾在您的网站上使用标签来组织内容？本次介绍的jquery
/news/58/jquery-tags-input-plugin
easyslider-jquery滑动插件，轻松实现幻灯片效果
今天为大家分享的是一款用于图片轮播的jquery插件，它配置
/news/59/easy-slider-jquery-plugin
JQuery-Countdown-倒计时插件
您在一些网站上可能会遇到这种情景，当想下载某个文件的之前，会
/news/60/jquery-count-down-plugin
jquery基础教程-如何用jquery创建一个确认对话框
我们继续来做出我们自定义的浏览器插件。今天我们将要制作一个跨
/news/61/jquery-create-confirm-dialog
jquery基础教程-如何创建一个自动播放的幻灯片
在一个网站上，其中一个迫切要改进的技能，当涉及到幻灯片的时候
/news/64/jquery-make-auto-advancing-slideshow
如何使用jquery+css制作谷歌圣诞涂鸦
还有大半个月就到圣诞节了，在如此盛大的节日里，我想谷歌不会错
/news/67/google-christmas-doodle
使用jquery制作缩略图预览滑块
本次教程我们将为大家展现如何用JQuery插件来创建和使用缩
/news/68/jquery-thumbnails-preview
jquery图片处理实例-轻松实现图片情景的切换
jquery图片特效?的效果在之前的jquery插件?
/news/74/jquery-create-before-and-after-photo
使用jquery制作有Flickr风格的提示菜单
今天为大家介绍的js特效是具有flickr风格的下拉框菜单。
/news/77/jquery-flickr-style-menu
非凡的效果，jquery菜单也能这么做
今天给大家介绍的jquery插件是在网站上必不 可少的jqu
/news/78/create-a-cool-animated-menu
别以为人人都会用你的网站，jquery网站引导插件
全球每分每秒都有成千上万个新站公众于世，然而能够站得住脚的却
/news/80/jquery-intro-guide
jquery插件-论js遮罩效果的巧妙应用
传统的js遮罩层原理是在页面的最顶端上防止一个div，然而，
/news/81/jquery-overlay-like-effect
JQuery幻灯片之旋转的幻灯片
jquery幻灯片系列我在之前已经介绍了很多了，效果各有特色
/news/94/jquery-css3-slideshow-rotating
jquery悬停切换幻灯片（鼠标移动或点击）
今天我们要介绍的jquery插件是一款十分适合用于图片画廊，
/news/96/jquery-hover-slide-effect
酷站必备，一款十分赞的下拉框效果
一个网站如果一直使用html原生的控件样式，我想在这个Web
/news/97/jquery-custom-dropdown
酷站必备，一款十分赞的下拉框效果（续作）
昨天我发了一款juqery下拉框下拉框 的插件《酷站必备，一
/news/98/jquery-dropdown-width-font-and-pic
增强用户粘性，jquery制作拉出内容的面板
当用户进入你的网站的时候，作为站长肯定想方设法想让用户停留多
/news/99/expand-pannel-width-jquery
jquery插件之迷你舒适的幻灯片画廊
今天我为大家介绍如何创建一个简易而又不失华丽的jquery幻
/news/101/jquery-minimalistic-slideshow-gallary
jQuery制作控制图像展开重叠的滑块
今天为大家介绍的jquery插件的功能是如何使用jquery
/news/102/jquery-expand-stacked-images
jquery图片相册 适用于图片网站 提升用户交互
在本实例当中我们将创建一个能够跟用户互动的交互式
/news/103/jquery-photo-desk
适配Retina屏，效果略吊的JQuery响应式导航栏，适合任何设备
受到Maliwan 制作商制作游戏无主之地年度版中的影响，我
/news/104/jquery-so-diao-navigate-menu
jquery导航菜单之垂直风格导航菜单
jquery导航菜单是我们在建设网站的时候必须用到的模块，因
/news/106/jquery-vertical-menu
结合jQuery和VisualLightBox制作图片查看器
今天我要介绍的jquery插件当中是我们的网
站上常用的图
/news/108/jquery-with-visual-lightbox
jquery实现多功能组合框，小插件，多功能
下拉框的功能常见是用于选择项而已，然而在一些强调功能多样性的
/news/114/jquery-eComboBox-select-box-width-editing
jquery插件之实现苹果风格的CoverScroll的效果
本次介绍的是一款能够实现 Apple CoverFlow 风
/news/116/jquery-apple-style-converscroll
继续苹果风，仿mac os 中的导航菜单
之前介绍了不少有关苹果风格的jquery插件，今天我继续为大
/news/117/css-apple-mac-style-menu
jquery制作精美的评分插件
本实例给大家展示一个简易却又不失气派的jquery评分插件。
/news/118/jquery-rating-system
jquery制作精美的图片画廊，支持拖动图片
得益于CSS3变形的特性，我们可以在网页上使元素做出各种变化
/news/119/jquery-css3-rotatable-images
jquery插件之制作热点选项卡(热点和点击事件示例)
今天给大家介绍的jquery插件是如何使用jquery实现一
/news/120/jquery-hover-click-tab-control
ajax实现无刷新购物车功能
现今电子商务网站盛行，有独立资源的公司都恨不得自己另起炉灶建
/news/121/ajax-shoping-cart
js特效之响应式图片画廊
今天我想为大家介绍一个通过使用 Elastislide 来创
/news/122/js-responsive-image-gallery
js特效之实现多张图片分步显示
js特效里面，假若我们想展示一张图片，我们可以使用js幻灯片
/news/123/js-image-zoom-tour
NodeJS学习二（运行程序的方法）
装完毕，我们赶快来尝试如何运行nodejs程序 打开终端，键
/news/125/nodejs-run-the-program
jquery插件之实现传送带拖动效果插件
本jquery插件除了鼠标点击切换图片外，还能通过鼠标进行左
/news/129/jquery-slick-plugin
jquery插件之精美的倒计时特效jQuery Countdown
倒计时功能在很多抢拍网站或网购网站里是十分常用的js特效，为
/news/130/jquery-count-down
js特效之自定义滑块风格插件
JQ Slider，这个就是今天小编给大家介绍的js特效插件
/news/131/js-free-multi-slider
jquery相册插件，附带精美的过渡效果和缩略图导航
jquery幻灯片插件在本站中应该也有不少存货了了，然而，人
/news/132/jquery-smart-gallery
jquery插件之精美的自动新闻滚动列表
在很多新闻的网站里，总会有个自动滚动新闻的模块，首先是节省空
/news/133/jquery-vscroller
js特效之实现自定义加载条
今天为大家介绍的js插件式一款常见的加载效果的插件，而且它能
/news/134/js-spin-plugins
可拖动的高大上jquery幻灯片
今天我将要创建一个全屏展示图片和内容的表格的jquery插件
/news/135/jquery-draggable-images
jquery常用插件之下拉式登录插件
随着单页网站的流行，网页设计者们不得不将本来设计成几个页面的
/news/136/jquery-login-plugin
jquery插件之炫目易用的幻灯片
jquery幻灯片插件在网站上有很多种，今天我继续为大家介绍
/news/137/jquery-simple-slider
回归平凡，简易平实的jquery幻灯片插件
炫目多彩的jquery幻灯片我相信在我的网站上能找到不少，然
/news/138/jquery-crafty-slide
jquery气泡提示插件grumble.js
jquery提示插件在本网站上也有不少存货了，今天我再为大家
/news/139/jquery-grumble-js
使用jquery制作精美的下拉菜单
在本次教程中我们讲创造一款独一无二的下拉菜单。此jquery
/news/141/jquery-slide-down-box-menu
jquery特效之制作专业的下拉菜单
有一个富有吸引力的导航影响着浏览的用户是否停留长久，接下来的
/news/142/jquery-professional-menu
js特效之制作效果精美的幻灯片画集
今天我为大家介绍的js特效是一款跟其他幻灯片有别的图片画廊。
/news/144/js-portfolio-image-navigation
jquery制作小型婚礼祝福墙，so sweet
本次的作品是从博客园上看到的，博主的作品做的相当有特色，这是
/news/145/jquery-blessing-wall
jquery插件之精美的文字滑动效果
如今想吸引用户长期驻足你的网站的方法不多，要么内容新鲜及时，
/news/146/jquery-sliding-letters
jquery插件之鼠标悬停图片切换效果
今天为大家分享一款图片切换的过渡的效果，当我们使用鼠标在焦点
/news/147/jquery-item-blur
jquery插件分享之旋转的文字特效
今天为大家介绍的是一款能让咱们平时看上去十分普通的文本文字摇
/news/148/jquery-rotate-font
jquery插件之自定义提示插件noty
如今很多形形色色的SNS类的网站，会员的黏性很高，网站会员们
/news/152/jquery-noty-plugins
jquery实用插件之ajax分页插件
网站内容千变万化，种类繁多，但一个屏幕能够显示的内容却是有限
/news/153/jquery-ajax-jpages
JSShare致力于成为前端爱好者分享javascript,jquery,HTML5等前端知识的平台，提供优质的代码，让各位感受到代码之美，分享代码的乐趣。
copyright (C) 2013 powered
联系邮箱：
沪ICP备号-1网页制作怎么实现图片左右定时自动滚动，用JS jquery代码怎么实现？
网页制作怎么实现图片左右定时自动滚动，用JS jquery代码怎么实现？ 10
给个例子，给你你想要的效果。
4张800x500的图片从右向左定时2到3秒自动切换，左右两边设置两个箭头，点击也可以切换下一页，我初学，给个完整的代码吧。3Q
jquery 插件 都可以实现了。
小问题。这种插件很常见。自己研究吧。不清楚再问我。尤其是jquery方面
当然这个还得需要你自己修改，插件有详细的说明书以及demo，你看看就懂了
插件下过来了，里面没有你说的说明书哦，是不是在代码前先调用jquery.js，再在最后加上那一串代码？
所谓插件就是说建立在jquery的基础上的js文件，说白了就是说，人家写了一个基于jquery的js文件。你需要做的是给这个文件提供参数。因为每个网页的结构都不同。不可能说你把插件往页一插什么都不用管了吧，呵呵。所谓的参数就是说比如id之类的可以找到，不然网页中多个图片你怎么知道该让哪个动哪个不动。说明书就在这个网页里，写的很清楚。这个网站就是专门为这个插件写的，你自己好好看看吧。祝你学习愉快，不清楚再问我。
恩，大致了解了，我用这个网页的源文件，删选出自己想要的那部分了，效果出来了，还要很多优化的地方，受教了
我说过了，说明书就在网页里，其实也不能说是说明书。每个demo下面参数就是说明书了，其实就是一些效果参数，同样是这个插件你给他不同的参数他会有不同的显示效果，给他一个上下的参数图片就会上下滚动，给他一个左右参数就会左右滚动，当然这个插件的参数还不指这么多。你看看每个demo下面的代码就知道了，再说一边：这个网站整个都是说这个插件的，每种效果都有demo的。你下载的只是这个插件而已，不含插件。
恩好的。其他都还好，你的最后一句挺费解哈，采最佳了
相关知识等待您来回答
网页制作领域专家求教如何将一款左右滚动的图片js特效修改成由左右按钮控制的滚动图片特js特效
[问题点数：40分]
求教如何将一款左右滚动的图片js特效修改成由左右按钮控制的滚动图片特js特效
[问题点数：40分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关帖子推荐：
本帖子已过去太久远了，不再提供回复功能。页面导航：
→ 正文内容 wap图片滚动特效
wap图片滚动特效无css3元素纯js脚本编写
手机图片滑动切换，网上有很多这样的例子，但都借助于其他组件，让代码混乱的不行，本例介绍的是无css3元素纯js脚本编写的wap图片滚动特效
手机图片滑动切换，网上有很多这样的例子，但都借助于其他组件，让代码混乱的不行；还有就是用到css3里的 transform：translate（x,y）;移动元素,不过发现在不支持css3的设备上马上完蛋了，所以下定决心自己做一个，谁知出现了很多的问题，其中最重要的是给图片加链接，网页中的上下滚动条不能在拖动图片的时候滚动，并且不能兼容pc机器上的拖动；在这里就简单介绍一下遇到的问题和解决的方法；
问题一：给图片加上链接后，在拖动的时候总是跳到其他页面
问题根源主要是不能判断是点击还是拖动，手机事件一般顺序是 touchstart-》mousedown-》mousemove-》touchmove-》mouseup-》touchend-》click，根据不同手机可能会有不同。触屏手机的事件一般都用 touchstart -》 touchmove -》 touchend -》 click，click事件是最后执行的，当我们有touchstart，touchmove，touchend处理完后，如果不进行return或取消默认就会触发click事件，这样网页就跳走了，解决办法是记录touchstart的坐标点和touchmove的坐标点，根据两个坐标点算出触点是否移动过，其中值得关注的是事件的Event参数，触屏一般是 event.touches，event.targetTouches，event.changedTouches。我在测试当中发现者三个参数的值时一样的，不过值得注意的是touchend事件不会得到触点坐标（也或许是设备问题），在移动的时候touchmove会不断出发，有时候touchmove会不触发，其中就是浏览器自带一下功能把触点（或鼠标）脱离了选中的元素，比如上时间按住会出现菜单，（pc上图片就会生成一个可以拖动的缩略图），这样就要在touchstart（mousedown）的时候先 event.preventDefault();取消默认。
问题二：网页中的上下滚动条不能在拖动图片的时候滚动
相信这个问题只要制作过得都会遇到，其实主要是在移动（touchmove，mousemove）的时候取消了默认事件event.preventDefault(),在这里我们需要做的是，是否移动获得触点和开始的触点是否一致，如果一致就直接返回，还要算出是移动的x轴多一点还是y轴移动的多一点，这样我们就可以做左右滑动的时候取消默认，在上学的时候不取消；
问题三： 并且不能兼容pc机器上的拖动
这是因为在绑定事件的时候不能完全考虑事件名称是touchstart还是mousedown ，从网上搜了一下，感觉做的不做，就直接抄过来了
this.eventName={
touchstart:'touchstart',
touchmove:'touchmove',
touchend:'touchend',
if(!device){
this.eventName.touchstart='mousedown';
this.eventName.touchmove='mousemove';
this.eventName.touchend='mouseup';
dom.addEventListener(this.eventName.touchstart,handleEvent,false);
大概是这个意思，根据设备不同绑定不同的事件
其实还碰到了很多的问题，就不一一说明了
不多说了，直接把代码贴出来了，如果有什么不太好的地方，还请多多包含和提出意见
&!doctype html&
&meta charset="utf-8"&
&meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /&
&meta content="yes" name="apple-mobile-web-app-capable" /&
&meta content="black" name="apple-mobile-web-app-status-bar-style" /&
&meta content="telephone=no" name="format-detection" /&
&title&&/title&
&style type="text/css"&
html,body,*{ margin: 0; padding: 0; border: 0;}
#wapListImage1, #wapListImage{width: 100%; overflow: height: cursor: zoom:1; position:}
#wapListImage1 ul,
#wapListImage1 ul li,
#wapListImage1 ul,
#wapListImage ul li{ list-style:}
#wapListImage1 ul, #wapListImage ul{width: 99999}
#wapListImage1 ul li, #wapListImage ul li{ float:}
#wapListImage ul li a img:focus,
#wapListImage ul li a img:checked,
#wapListImage ul li a img,
#wapListImage ul li a img:active,
#wapListImage ul li a,#wapListImage ul li a:active{cursor:}
#wapListImage dl{ position: bottom: 10 right: 0;}
#wapListImage dl span{overflow:width: 10 height: 10 background-color: #900; display: inline-}
#wapListImage dl span.selected{ background-color: #000;}
&div id="k"&
&div id="wapListImage"&
&li&&a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd" target="_black"&&img src="http://file25.mafengwo.net/M00/37/74/wKgB4lM9Hb-ARjpJAAOsX46Kq9w39.gonglve.w690.jpeg"&&/a&&/li&
&li&&a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"&&img src="http://file25.mafengwo.net/M00/F2/06/wKgB4lNaHHCASXmDAAFtZsUxuwQ66.gonglve.w690.jpeg"&&/a&&/li&
&li&&a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"&&img src="http://file25.mafengwo.net/M00/2B/EE/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.gonglve.w690.jpeg"&&/a&&/li&
&!-- &li&&a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd" target="_black"&&img src="http://file25.mafengwo.net/M00/37/74/wKgB4lM9Hb-ARjpJAAOsX46Kq9w39.gonglve.w690.jpeg"&&/a&&/li&
&li&&a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"&&img src="http://file25.mafengwo.net/M00/F2/06/wKgB4lNaHHCASXmDAAFtZsUxuwQ66.gonglve.w690.jpeg"&&/a&&/li&
&li&&a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"&&img src="http://file25.mafengwo.net/M00/2B/EE/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.gonglve.w690.jpeg"&&/a&&/li& --&
&span class="selected"&1&/span&
&span&2&/span&
&span&3&/span&
&!-- &span&4&/span&
&span&5&/span&
&span&6&/span& --&
&div style="height:200"&&/div&
&div id="wapListImage1"&
&li&&a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd" target="_black"&&img src="http://file25.mafengwo.net/M00/37/74/wKgB4lM9Hb-ARjpJAAOsX46Kq9w39.gonglve.w690.jpeg"&&/a&&/li&
&li&&a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"&&img src="http://file25.mafengwo.net/M00/F2/06/wKgB4lNaHHCASXmDAAFtZsUxuwQ66.gonglve.w690.jpeg"&&/a&&/li&
&li&&a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"&&img src="http://file25.mafengwo.net/M00/2B/EE/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.gonglve.w690.jpeg"&&/a&&/li&
&script type="text/javascript"&
;(function(w,d){
var device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
function WapImage(){
this.options={
dom: null,
speed:200,
isupdate:true,
time:3000,
leftOrright:'left',
isfor:false,
callBack:function(){}
this.eventName={
touchstart:'touchstart',
touchmove:'touchmove',
touchend:'touchend',
this.point={
this.page={
bodyWidth:320,
domUL:null,
liList:null,
flag:false,
isDown:false,
moveId:[],
nextId:null,
prevId:null,
isdom:false
this.Event={
handleEvent: function(event,lib){
event = event ? event : window.
// console.log(event.type)
switch(event.type){
case "touchstart":
var touch = event.touches[0];
case "mousedown":
if(lib.page.isDown)
lib.page.isDown=
lib.page.sTime=lib.page.eTime=new Date().getTime();
lib.Event.stop(lib,lib);
if(event.type=="mousedown"){
event.preventDefault();
lib.point.pageX1 = lib.point.pageX2 = touch.pageX;
lib.point.pageY1 = lib.point.pageY2 = touch.pageY;
lib.page.mleft = parseFloat(lib.page.domUL.style.marginLeft);
lib.page.mleft = lib.page.mleft ? lib.page.mleft : 0;
case "touchmove":
var touch = event.touches[0];
case "mousemove":
if(!lib.page.isDown)
if(event.type=="mousemove"){
lib.point.pageX2 = touch.pageX;
lib.point.pageY2 = touch.pageY;
if(lib.point.pageX1==lib.point.pageX2){
event.preventDefault();
var changeX = lib.point.pageX1 - lib.point.pageX2;
var changeY = lib.point.pageY1 - lib.point.pageY2;
if(Math.abs(changeX)&Math.abs(changeY)) {//左右事件
event.preventDefault();
lib.page.domUL.style.marginLeft=lib.page.mleft-changeX+'px';
if(parseFloat(lib.page.domUL.style.marginLeft)&= -(lib.page.liList.length-1)*lib.page.bodyWidth){
lib.page.domUL.style.marginLeft= -(lib.page.liList.length-1)*lib.page.bodyWidth+'px';
lib.page.mleft=-(lib.page.liList.length-1)*lib.page.bodyW
if(parseFloat(lib.page.domUL.style.marginLeft)&0){
lib.page.domUL.style.marginLeft='0px';
lib.page.mleft=0;
}else if(Math.abs(changeY)&Math.abs(changeX)){//上下事件
}else{//长按或点击
case "mouseup":
case "touchend":
if(!lib.page.isDown)
lib.page.eTime=new Date().getTime();
lib.page.mleft = parseFloat(lib.page.domUL.style.marginLeft);
lib.page.mleft = lib.page.mleft ? lib.page.mleft : 0;
var changeX = lib.point.pageX1 - lib.point.pageX2;
var changeY = lib.point.pageY1 - lib.point.pageY2;
if(Math.abs(changeX)&Math.abs(changeY)) {//左右事件
event.preventDefault();
lib.Event.move.call(this,lib);
}else if(Math.abs(changeY)&Math.abs(changeX)){//上下事件
lib.Event.move.call(this,lib);
}else{//长按或点击
if((lib.page.eTime - lib.page.sTime) & 300) {//长按
}else{//点击
if(event.button==0 || event.type=='touchend'){
var a = lib.page.liList[lib.page.index].getElementsByTagName('a')[0];
if(typeof a.getAttribute('target')=='object'){
w.location=a.getAttribute('hrefto')
w.open(a.getAttribute('hrefto'));
lib.page.isDown=
position: function(lib,index){
// if(index==undefined){
// lib.page.domUL.style.marginLeft= -(lib.page.index*lib.page.bodyWidth) +'px';
// lib.page.domUL.style.marginLeft= -(index*lib.page.bodyWidth) +'px';
// lib.page.index=
if(!lib.options.isfor){
if(index==undefined){
lib.page.domUL.style.marginLeft= -(lib.page.index*lib.page.bodyWidth) +'px';
lib.page.domUL.style.marginLeft= -((index-1)*lib.page.bodyWidth) +'px';
lib.page.index=index-1;
lib.options.callBack({"index":parseInt(lib.page.liList[lib.page.index].getAttribute('index'))+1});
if(index==undefined){
lib.page.domUL.style.marginLeft= -lib.page.bodyWidth +'px';
lib.page.domUL.style.marginLeft= -lib.page.bodyWidth +'px';
while(true){
if(parseInt(index)==parseInt(lib.page.liList[1].getAttribute('index'))+1){
lib.page.domUL.insertBefore(lib.page.liList[lib.page.liList.length-1],lib.page.liList[0]);
lib.options.callBack({"index":parseInt(lib.page.liList[1].getAttribute('index'))+1});
stop:function(lib){
for(var i =0;i&lib.page.moveId.i++){
clearInterval(lib.page.moveId[i]);
lib.page.moveId=[];
start:function(lib){
if(lib.options.isupdate){
lib.page.moveId[lib.page.moveId.length] = setInterval(function(){
if(lib.options.leftOrright=='left'){
lib.Event.next(lib,lib);
lib.Event.prev(lib,lib);
},lib.options.time);
next:function(lib){
// console.log(lib.page.prevId.length+"nextId")
// for (var n=0;n&lib.page.prevId.n++) {
// // clearInterval(lib.page.prevId[n]);
// lib.page.prevId=[];
clearInterval(lib.page.prevId);
lib.page.prevId=
// var left = (lib.page.bodyWidth-Math.abs(lib.point.pageX1-lib.point.pageX2))/lib.options.
var yu = Math.abs(parseInt(lib.page.domUL.style.marginLeft));
while(true){
if(yu==0){
yu=lib.page.bodyW
}else if(yu&0){
yu= Math.abs(yu);
yu=yu-lib.page.bodyWidth
// var left = (lib.page.bodyWidth-Math.abs(parseFloat(lib.page.domUL.style.marginLeft)%lib.page.bodyWidth))/lib.options.
var left = yu/lib.options.
var c = 0;
if(lib.page.index==lib.page.liList.length-1){
lib.page.flag=
clearInterval(lib.page.nextId);
lib.page.nextId = window.setInterval(function(){
// lib.Event.stop(lib,lib);
// if(lib.page.moveId==null){
// clearInterval(id);
lib.page.domUL.style.marginLeft= (parseFloat(lib.page.domUL.style.marginLeft)-left*5)+'px';
// console.log("next"+lib.page.domUL.style.marginLeft);
if(c&=lib.options.speed || parseFloat(lib.page.domUL.style.marginLeft)&= -(lib.page.liList.length-1)*lib.page.bodyWidth ){
if(parseFloat(lib.page.domUL.style.marginLeft)&= -(lib.page.liList.length-1)*lib.page.bodyWidth){
lib.page.domUL.style.marginLeft= -(lib.page.liList.length-1)*lib.page.bodyWidth+'px';
clearInterval(lib.page.nextId);
// for(var n=0;n=lib.page.nextId.n++){
// clearInterval(lib.page.nextId[0]);
// lib.page.nextId=[];
lib.page.index++;
lib.page.flag=
lib.Event.domUpdate.call(this,lib,'r');
if(lib.page.moveId.length==0){
lib.Event.start(lib,lib);
prev:function(lib){
// console.log(lib.page.nextId.length+"nextId")
// for(var n=0;n=lib.page.nextId.n++){
// // clearInterval(lib.page.nextId[0]);
clearInterval(lib.page.nextId);
lib.page.nextId=
// lib.page.nextId=[];
// var left = (lib.page.bodyWidth-Math.abs(lib.point.pageX1-lib.point.pageX2))/lib.options.
// var left = (lib.page.bodyWidth-Math.abs(parseFloat(lib.page.domUL.style.marginLeft)%lib.page.bodyWidth))/lib.options.
var yu = Math.abs(parseInt(lib.page.domUL.style.marginLeft));
// console.log(yu+"----"+lib.page.domUL.style.marginLeft)
while(true){
if(yu==0){
yu=lib.page.bodyW
}else if(yu&0){
yu= lib.page.bodyWidth-Math.abs(yu);
yu=yu-lib.page.bodyWidth
// var left = (lib.page.bodyWidth-yu)/lib.options.
var left = yu/lib.options.
var c = 0,
if(lib.page.index==0){
lib.page.flag=
var ml = parseFloat(lib.page.domUL.style.marginLeft);
clearInterval(lib.page.prevId);
lib.page.prevId = window.setInterval(function(){
lib.page.domUL.style.marginLeft= (parseFloat(lib.page.domUL.style.marginLeft)+left*5)+'px';
// console.log(lib.page.domUL.style.marginLeft);
if(c&=lib.options.speed || parseFloat(lib.page.domUL.style.marginLeft)&=0){
if(parseFloat(lib.page.domUL.style.marginLeft)&=0){
lib.page.domUL.style.marginLeft='0px';
clearInterval(lib.page.prevId);
// for (var n=0;n&lib.page.prevId.n++) {
// clearInterval(lib.page.prevId[n]);
// lib.page.prevId=[];
lib.page.index--;
lib.page.flag=
lib.Event.domUpdate.call(this,lib,'l');
if(lib.page.moveId.length==0){
lib.Event.start(lib,lib);
move:function(lib){
if(lib.page.flag)
lib.page.flag=
if(Math.abs(lib.point.pageX1-lib.point.pageX2)&lib.page.back){
var h = Math.abs(Math.abs(parseFloat(lib.page.domUL.style.marginLeft))-Math.abs(lib.page.bodyWidth*lib.page.index))
var hi = 0;
hid = window.setInterval(function(){
if(lib.point.pageX2&lib.point.pageX1){
lib.page.domUL.style.marginLeft = (parseFloat(lib.page.domUL.style.marginLeft) - h*5) +'px';
lib.page.domUL.style.marginLeft = (parseFloat(lib.page.domUL.style.marginLeft) + h*5) + 'px';
if(hi&=70){
clearInterval(hid);
lib.page.domUL.style.marginLeft= -(lib.page.index*lib.page.bodyWidth) +'px';
lib.page.flag=
if(lib.point.pageX1-lib.point.pageX2&0){
lib.Event.next.call(this,lib);
}else if(lib.point.pageX2-lib.point.pageX1&0){
// console.log("===")
lib.Event.prev.call(this,lib);
domUpdate: function(lib,type){
if(lib.page.isdom)
lib.page.isdom=
if(!lib.options.isfor){
var index = lib.page.liList[lib.page.index].getAttribute('index');
lib.options.callBack({"index":parseInt(index)+1});
lib.page.isdom=
if(type=='l'){
lib.page.domUL.insertBefore(lib.page.liList[lib.page.liList.length-1],lib.page.liList[0]);
lib.page.domUL.style.marginLeft=-lib.page.bodyWidth+'px';//(parseFloat(lib.page.domUL.style.marginLeft)-lib.page.bodyWidth)+'px';
//lib.page.index++;
}else if(type=='r'){
lib.page.domUL.appendChild(lib.page.liList[0]);
lib.page.domUL.style.marginLeft=-lib.page.bodyWidth+'px';//(parseFloat(lib.page.domUL.style.marginLeft)+lib.page.bodyWidth)+'px';
//lib.page.index--;
lib.page.index=1;
// console.log(lib.page.index)
var index = lib.page.liList[lib.page.index].getAttribute('index');
lib.options.callBack({"index":parseInt(index)+1});
lib.page.isdom=
WapImage.prototype = {
setoption: function(arg){
for(var i in this.options){
this.options[i]= arg[i] !== undefined ? arg[i] : this.options[i];
if(!device){
this.eventName.touchstart='mousedown';
this.eventName.touchmove='mousemove';
this.eventName.touchend='mouseup';
bindEvent: function(){
this.page.domUL.addEventListener(this.eventName.touchstart,function(event){lib.Event.handleEvent.call(lib,event,lib);},false);
w.addEventListener(this.eventName.touchmove,function(event){lib.Event.handleEvent.call(lib,event,lib);},false);
w.addEventListener(this.eventName.touchend,function(event){lib.Event.handleEvent.call(lib,event,lib);},false);
w.addEventListener('resize',function(){lib.init();},false);
init:function(){
this.page.bodyWidth=document.body.clientW
this.page.liList= this.options.dom.getElementsByTagName('li');
this.page.domUL = this.options.dom.getElementsByTagName('ul')[0];
this.options.dom.style.width=this.page.bodyWidth+'px';
for(var i=0;i&this.page.liList.i++){
var item = this.page.liList[i];
var img = item.getElementsByTagName('img')[0];
item.setAttribute('index',i);
item.style.width=this.page.bodyWidth+'px';
img.style.width = this.page.bodyWidth+'px';
if(this.page.liList.length&3){
var length = this.page.liList.
if(length==1){
this.page.domUL.appendChild(this.page.liList[0].cloneNode(true));
this.page.domUL.appendChild(this.page.liList[0].cloneNode(true));
for(var i=0;i&i++){
this.page.domUL.appendChild(this.page.liList[i].cloneNode(true));
this.page.liList= this.options.dom.getElementsByTagName('li');
position:function(index){
this.Event.position.call(this,this,index);
next:function(){
this.Event.next.call(this,this);
prev:function(){
this.Event.prev.call(this,this);
start: function(arg){
this.setoption(arg);
this.init();
this.position();
this.bindEvent();
this.Event.domUpdate(this,'l');
this.Event.start(this);
var loaded=function(){
w.WapImage=new WapImage();
w.WapImages=new WapImage();
(function(){
if(d.body){
if(d.addEventListener){
d.addEventListener( 'DOMContentLoaded', function(){
d.removeEventListener( 'DOMContentLoaded', arguments.callee, false );
}, false );
}else if(d.attachEvent){
d.attachEvent( 'onreadystatechange', function(){
if( d.readyState === 'complete' ){
d.detachEvent( 'onreadystatechange', arguments.callee );
})(window,document,undefined);
window.onload = function(){
var obj = {
dom:document.getElementById('wapListImage'),
isupdate:true,
time:3000,
isfor:true,
leftOrright:'left',
callBack:function(obj){
var span = document.getElementById('wapListImage').getElementsByTagName('dl')[0].getElementsByTagName('span');
for(var k = 0;k&span.k++){
span[k].className='';
span[obj.index-1].className='selected'
// console.log(obj.index)
WapImage.start(obj);
WapImage.position(2)
var obj2 = {
dom:document.getElementById('wapListImage1'),
callBack:function(obj){
// console.log(obj.index)
WapImages.start(obj2);
// var img = new w.WapImage();
// img.start(obj);
在页面加载完成后
var obj = {
dom:document.getElementById('wapListImage'),//dom元素
isupdate:true,//是否自动切换
time:3000,//自动切换的时间毫秒
isfor:true, //是否循环播放，即到最后一张是否直接转入第一张，或到第一张直接转入最后一张
leftOrright:'left',//像左侧自动切换还是像右侧自动切换
callBack:function(obj){//切换成功后回调函数 其实有index参数为当前第几张图片
//自己处理
var span = document.getElementById('wapListImage').getElementsByTagName('dl')[0].getElementsByTagName('span');
for(var k = 0;k&span.k++){
span[k].className='';
span[obj.index-1].className='selected'
// console.log(obj.index)
WapImage.start(obj);
WapImage.position(2)
如果一个也没需要多个图片切换效果可以再代码中查找 var loaded=function()
在其中定义您需要个切换图片个数，并定出名字
w.WapImage=new WapImage();
w.WapImages=new WapImage();
在页面加载完后就可以直接调用
WapImage.start()和WapImages.start()
您可能感兴趣的文章:
上一篇：下一篇：
最 近 更 新
热 点 排 行