一、前提：
完成cocos2d-x-3.x开发环境的安装配置。
具体参考：
二、本篇目标：
l& 创建一个名为hello game的cocos2dx 3.3的项目
l& 编译hello game项目
l& 在eclipse中运行调试hello game项目，并且在android手机上运行成功
三、行动：
l& 创建一个名为hello game的cocos2dx 3.3的项目
说明：Cocos2dx 3.3提供了名为cocos.py的Python脚本可以用来新建项目，路径为：C:\cocos2d-x-3.3\tools\cocos2d-console\bin目录下。
第一步：在cygwin的安装目录中Cygwin.bat，开启Cygwin命令行界面输入命令：cd C:/cocos2d-x-3.3/tools/cocos2d-console/bin进入到cocos.py所在的目录。
第二步：输入命令：python cocos.py new hellogame &p com.game.hellogame -l cpp -d game 回车然后脚本开始创建项目直到创建成功。
hellogame为项目名称
-p后面为包名
-l后面接开发语言类型，有cpp, lua, js三种类型
-d后面接项目存放的目录
项目新建成功后在目录C:\cocos2d-x-3.3\tools\cocos2d-console\bin\game\hellogame下生成了我们所需要的项目，分别包含android、ios_mac、linux、win8、win32、wp8六个不同平台的项目。这里重点关注proj.android和proj.win32这2个项目，我们接下来的工作就是修改这2个项目,至于proj.ios_mac这个项目在后续移植到iphone的ios平台上的时候会讲到。
l& 编译hello game项目
第一步：进入proj.win32这个文件夹，双击hellogame.sln用Microsoft Visual Studio 2012打开项目。
第二步：点击运行开始漫长的项目编译工作，编译成功后运行项目出现游戏界面，第一次编译非常费时间请超耐心等待。
第三步：我们简单的修改一下代码，把Hello World改成Hello Game。在vs中打开HelloWorldScene.cpp文件:
原来代码：auto label = Label::createWithTTF("Hello World", "fonts/Marker Felt.ttf", 24);
修改后代码：auto label = Label::createWithTTF("Hello Game", "fonts/Marker Felt.ttf", 24);
然后点击运行查看效果,看到运行起来的界面中的Hello World改成Hello Game。
l& 在eclipse中运行调试hello game项目，并且在android手机上运行成功
说明：上一环节中我们修改了一下游戏代码并且用Microsoft Visual Studio 2012编译在windows上运行成功，接下来我们要在eclipse中运行这个项目并且在android手机上运行成功。
在proj.android项目下有名为build_native.py的Python脚本可以把C++代码编译成android平台的so文件， 首有先在Cygwin命令行编译一下。
第一步：开启Cygwin命令行界面输入命令：cd C:/cocos2d-x-3.3/tools/cocos2d-console/bin/game/hellogame/proj.android进入到cocos.py所在的目录。
第二步：输入./ build_native.py开始编译so文件，这个过程也比较费时需要耐心。
第三步：编译成功后会在proj.android\libs\armeabi的目录下生成名为：libcocos2dcpp.so的文件。
第四步：开启eclipse，菜单File -& Import
第五步：Select root directory中选择proj.android的路径：C:\cocos2d-x-3.3\tools\cocos2d-console\bin\game\hellogame\proj.android
第六步：然后点击Finish后开启项目
第七步：然后点击运行在我的手机上开启游戏界面。
到此为止我们的hello game成功的跑在了android真机上，下一篇中，将对这个hello game的项目组成和基本知识进行讲解说明，让大家对cocos2d-3.x的项目有一定的认识。
作者交流QQ：
& & & & & & & & &&邮箱：
阅读(...) 评论()Ubuntu设立Static IP的方法Ifconfig网络配置工具详解_windows eclipse c++ cocos2dx 游戏开发环境筹建_基于OO的不间断滚动分享，支持滚动方向、是不是自动滚动等自定义__脚本百事通
稍等，加载中……
^_^请注意，有可能下面的2篇文章才是您想要的内容：
Ubuntu设立Static IP的方法Ifconfig网络配置工具详解
windows eclipse c++ cocos2dx 游戏开发环境筹建
基于OO的不间断滚动分享，支持滚动方向、是不是自动滚动等自定义
Ubuntu设立Static IP的方法Ifconfig网络配置工具详解
Ubuntu设置Static IP的方法Ifconfig网络配置工具详解Ubuntu的网络参数保存在文件 /etc/network/interfaces中，默认设置使用dhcp，内容如下：
# The primary network interfaceauto eth0iface eth0 inet dhcp设置静态ip的方法如下：1） 编辑 /etc/network/interfaces1.1）将dhcp 一行屏蔽# The primary network interfaceauto eth0#iface eth0 inet dhcp1.2）添加和静态ip有关的参数# The primary network interfaceiface eth0 inet staticaddress 192.168.0.10netmask 255.255.255.0gateway 192.168.0.12）编辑 /etc/resolv.conf，设置dnsnameserver 202.96.134.133nameserver 202.106.0.203）执行下面两个命令，启用新设置$sudo ifdown eth0 $sudo ifup eth0ifconfig
无论是Linux自动安装还是我们手工安装，Linux都会向你询问有关网络的问题并配置相关的软件。这个用于配置网卡的基本命令就是ifconfig。在执行ifconfig命令后，系统将在内核表中设置必要的参数，这样Linux就知道如何与网络上的网卡通信。ifconfig命令有以下两种格式：※ifconfig [interface]※ifconfig interface [aftype] option | address …ifconfig的第一种格式（或使用不带任何参数的ifconfig命令）可以用来查看当前系统的网络配置情况。在刚刚安装完系统之后，实际上是在没有网卡或者网络连接的情况下使用Linux，但通过ifconfig可以使用回绕方式工作，使计算机认为自己工作在网络上。现在我们运行一下ifconfig命令，不带参数的ifconfig命令可以显示当前启动的网络接口，其输出结果为：-----------------------[root@machine1 /sbin]#ifconfigeth0 Link encap:Ethernet Hwaddr 52:54:AB:DD:6F:61inet addr:210.34.6.89 Bcast:210.34.6.127 Mask:255.255.255.128UP BROADCAST RUNNING MULTICAST MTU:1500 Metric:1RX packets:46299 errors:0 dropped:0 overruns:0 frame:189TX packets:3057 errors:0 dropped:0 overruns:0 carrier:0collisions:0 txqueuelen:100Interrupt:5 Base address:0xece0lo Link encap:Local Loopbackinet addr:127.0.0.1 Mask:255.0.0.0UP LOOPBACK RUNNING MTU:3924 Metric:1RX packets:44 errors:0 dropped:0 overruns:0 frame:0TX packets:44 errors:0 dropped:0 overruns:0 carrier:0collisions:0 txqueuelen:0--------------------------------其中以eth0为首的部分是本机的以太网卡配置参数，这里显示了网卡在系统下的设备名/dev/eth0和硬件的MAC地址52:54:AB:DD:6F:61，MAC地址是生产厂家定的，每个网卡拥有的唯一地址。不过我们可以手工改动网卡的MAC地址，只要我们在/etc/rc.d/init.d/中的network中加入：ifconfig eth0 hw ether xx:xx:xx:xx:xx:xx然后重启，此时再用ifconfig命令查看一下，我们就会发现网卡的MAC地址已经变成xx:xx:xx:xx:xx:xx了。下一行显示本机的IP地址信息，分别是本机的IP地址，网络广播地址和子网掩码。必须确认这些信息都是正确无误的，否则Linux服务器无法与其它网络设备建立连接。我们也可以手工实现IP与Mac地址的捆绑，命令是arp -i eth0 -s xxx.xxx.xxx.xxx(IP) xx.xx.xx.xx.xx(MAC)接下来显示的是设备的网络状态。MTU（最大传输单元）和Metric（度量值）字段显示的是该接口当前的M T U和度量值的值。按照惯例，度量值供某些操作系统所用，用于计算一条路由的成本。再下来显示接口通信的网络统计值。RX和TX分别表示接收和传送的数据包。如果你的网卡已经完成配置却还是无法与其它设备通信，那么从RX和TX的显示数据上可以简单地分析一下故障原因。在这种情况下，如果你看到接收和传送的包的计数(packets)增加，那有可能是系统的IP地址出现了混乱；如果你看到大量的错误(errors)和冲突(Collisions)，那么这很有可能是网络的传输介质出了问题，例如网线不通或hub损坏。再下面的Interrupt:5 Base address:0xece0显示的是网卡的中断调用号和端口号，这是两个非常重要的硬件配置信息。如果您的网卡是PCI的，那么Linux在引导时有可能会自动配置这些信息（也很有可能会让您手工配置）但目前绝大多数网卡都是PnP的，这就需要我们进行手工配置了。如果您的网卡还没有配置好，那么运行：[root@machine1 /sbin]#ifconfig系统只会输出以lo为首的部分。lo是look-back网络接口，从IP地址127.0.0.1就可以看出，它代表"本机"。无论系统是否接入网络，这个设备总是存在的，除非你在内核编译的时候禁止了网络支持，这是一个称为回送设备的特殊设备，它自动由Linux配置以提供网络的自身连接。IP地址127.0.0.1是一个特殊的回送地址（即默认的本机地址），您可以在自己的系统上用telnet对IP地址127.0.0.1进行测试。如果有inetd进程在运行的话您会从自己的机器上获得登录提示符。Linux可以利用这个特征在进程与仿真网络之间进行通信。（您有兴趣的话还可以试试本机的实际IP地址，如这里的机器就是210.34.6.89，或者试试"localhost"，或者"127.0.0.1"，同样可以模拟网络通信。这可是Linux一个非常突出的优点！）
如果你只是关心某个设备是否正常，可以在ifconfig后面加上接口名字：[root@machine1 /sbin]# ifconfig eth0eth0 Link encap:Ethernet HWaddr 52:54:AB:DD:6F:61inet addr:210.34.6.89 Bcast:210.34.6.127 Mask:255.255.255.128UP BROADCAST RUNNING MULTICAST MTU:1500 Metric:1RX packets:50568 errors:0 dropped:0 overruns:0 frame:198TX packets:3200 errors:0 dropped:0 overruns:0 carrier:0collisions:0 txqueuelen:100Interrupt:5 Base address:0xece0表示eth0设备已经正常工作。有时需要为某个设备接口配置多个IP地址，办法是使用设备别名，例如，eth0设备可以有eth0，eth0:0，eth0:1....多个别名，每个都可以有一个独立的IP地址：ifconfig eth0 210.34.6.89 netmask 255.255.255.128 broadcast 210.34.6.127ifconfig eth0:0 210.34.6.88 netmask 255.255.255.128 broadcast 210.34.6.127这样，210.34.6.89和210.34.6.88都会被绑定在eth0设备上，使用同样的网络设备，不同的IP地址。如果你要暂停某个网络接口的工作，使用down参数：ifconfig eth0 down将取消eth0网络接口。与之对应的是有一个参数up，不过由于是缺省值，所以从来不用。如果我们使用了带有参数的ifconfig命令，那就可以手动设置网卡的配置参数了。有效的ifconfig命令参数及其意义为(选项对应的特性可以打开也可以取消，只在选项名前加一个破折号（-）即可)：Interface 网络设备名，如eth0就表示本机的第一块网卡。up 标志接口处于" up"状态，也就是说， IP层可以对其进行访问。这个选项用于命令行上给出一个地址之时。如果这个接口已被" down"选项临时性取消的话（与该选项对应的标记是UP RUNNING），还可以用于重新启用一个接口。
down 标志接口处于" down"状态，也就是说， IP层不能对其进行访问。这个选项有效地禁止了IP通信流通这个接口。注意，它并没有自动删除利用该接口的所有路由信息。如果永久性地取消了一个接口，就应该删除这些路由条目，并在可能的情况下，提供备用路由。netmask 标分配子网掩码，供接口所用。要么给一个前面是0x的32位十六进制号码，要么采用只适用于两台主机所用的点分四段式号码。对SLIP和PLIP接口来说，这个选项是必须配置的。address　　设置指定接口设备的IP地址。dstaddr adderss 为PPP设置远程IP地址，此关键字可用pointopoint代替。irqaddress 设置指定接口设备使用的中断行。pointtopoint address 该选项用于只涉及两台主机的点到点链接。对SLIP和PLIP接口来说，这个选项是必须配置的（如果已经设置了一个点到点地址，ifconfig就会显示出POINTTPOINT标记）。broadcast address 广播地址通常源于网络编号，通过设置主机部分的所有位得来。有的I P采用的方案有所不同：这个选项可适用于某些奇怪的环境（如果已经设置了广播地址， ifconfig就会显示出一个BROADCAST标记）。hw class addr 　　　 设置指定接口设备的MAC地址，关键字的后面必须跟硬件名或者与之等价的ASCII码。目前支持的硬件类有ether, ax25, ARCnet和 netrom。metric number 该选项可用于为接口创建的路由表分配度量值。路由信息协议（ RIP）利用度量值来构建网络路由表。ifconfig所用的默认度量值是0。如果不运行RIP程序，就没必要采用这个选项。如果要运行RIP程序，就尽量不要改变这个默认的度量值。mtu bytes 该选项用于设置最大传输单元，也就是接口一次能处理的最大字节数。对以太网接口来说， MTU的默认设置是1500 个字节；对SLIP接口来说，则是296个字节。arp 标这个选项专用于以太网或包广播之类的广播网络。它启用ARP（地址解析协议）来保护网络上各台主机的物理地址。对广播网来说，默认设置是" on"（开）。promisc 将接口置入promiscuous（混乱）模式。广播网中，这样将导致该接口接收所有的数据包，不管其目标是不是另一台主机。该选项允许利用包过滤器和所谓的以太网窥视技术，对网络通信进行分析。通常情况下，这对揪出网络故障的元凶来说，是相当有用的。但另一方面，如果有人蓄意攻击你的网络，也可浏览到s通信数据，进而获得密码，破坏你的网络。一项重要的保证措施是杜绝任何人将他们的计算机接入你的以太网。另一个选项用于保护某些身份验证协议的安全，比如Kerberos或SRA登录套件（该选项对应的标记是PROMISC）。traIlers 　开或关闭跟踪器。目前在某些Linux系统中还无法实现此功能。allmulti 多播地址即是向不在同一个子网上的一组主机广播数据。多播地址尚未获得内核支持（该选项对应的标记是ALLMULTI）txqueuelen len 　 设置指定接口设备的发送队列长度。由此可以看出有大量的参数可用于配置网卡，下面是在这台计算机上使用ifconfig命令的实例：------------------------------------------ifconfig eth0 210.34.6.89 netmask 255.255.255.128 broadcast 210.34.6.127------------------------------------------该命令的作用是设置网卡eth0的IP地址，网络掩码和网络的本地广播地址。同样的方式可以用来配置eth1，eth2等
windows eclipse c++ cocos2dx 游戏开发环境筹建
windows eclipse c++ cocos2dx 游戏开发环境搭建这篇文档有几个图片，但是贴图太麻烦了，如果有兴趣看完整版的话可以去这个地址下载doc文档
http://download.csdn.net/detail/yixiaoqingyuz/4858144
一，目的：
我们做任何事情都有目的，包括一些别人看起来毫无意义的事情，所谓别人笑我太疯癫，我笑他人看不穿说的就是这事。cocos2dx真的不错，特别是当我迫不得已使用vs建了个Windows工程把sdk提供的simplegame在Windows上面跑起来以后，我觉得这个真棒，你想，我本来必须要放到手机上才能运行的代码，现在很容易就可以在Windows上运行和调试，多美妙的事情。但是我真的不愿意在vs上写代码，很不熟悉，即使我上网找了些vs的快捷键使用，依然不能够像在eclipse上面一样方便自由的写代码。所以虽然都说vs强大，好用，是世界上最好的ide（这个我表示很怀疑），但是我依然对eclipse痴心不改，所以，虽然能在vs上写代码了，我依然没有放弃找一个方法来配置eclipse，终于，在我费尽心力受尽摧残花费无数廉价的时间后终于成功了。古人说，己所不欲勿施于人。我的目的很简单，想发扬一下古人的优良传统，写篇文档记录下来，帮助其他有需要的人快速的达到目的不走弯路，也帮助自己以后回忆，毕竟好记性不如烂笔头。
废话说了很多，现在进入正题。
二，目标：
我们的目标是没有蛀牙。。。。开玩笑。
目标有几个
1.在eclipse中编写c++代码，而且要有代码提示。
2.能够很方便的在eclipse里面查看cocos2dx的源代码。
3.在eclipse里面自动编译有c++代码的android项目并运行和打包。
4.其实还想在eclipse里面实现c++代码的调试，只是这个步骤暂时还没有摸索出来。
三，前提条件：
1.eclipse中有adt和cdt插件（一般现在的adt插件已经集成cdt了）
2.尽量新点的ndk版本（太旧的需要安装cygwin才能进行ndk编译，新的几个版本已经可以在widows中直接编译了）
3.coco2dx源码。
4.应该对android的android.mk文件语法有一定的了解（可选，即使啥也不知道按部就班的来也能配置成功，但是最后还是有所理解，这样才能理解coco2dx的目录结构为什么是这个样子，为什么能够编译成功。这里有篇文章可以参考一下：.cn/s/blog_6bdbcx.html）
5.至少安装一个用于eclipse纯c++项目编译的工具，（Mingw，或者sygwin，需要这个是因为在编写c++代码时如果用adt提供的编译器项目会有错误，导致无法编译）
四，注意事项：
之所以现在就说注意事项是因为这关系到整个过程能否顺利进行下去。
需要注意的是，用coco2dx提供的脚本生成的android项目是以跨平台为前提的，他的目录结构是为了方便多平台并行开发（不知道我这个理解是否正确，如果错了高人可以指出来），所以，你会发现Classes这个文件夹在android项目外面，但是如果你不是很懂android的ndk编译这一套东西的话，就不要试图去把这个文件夹拷贝到android项目的jni目录下面，也不要拷到别的地方去，这样不但会不利于跨平台开发，还有可能导致编译不过，就维持用脚本生成以后的目录结构就好了。
五，步骤：
1.导入coco2dx的android库（如果你之前已经导入过了就不需要再做这步了）。
也即是\cocos2d-2.0-x-2.0.3\cocos2dx\platform\android\java这个项目。
2.导入你用cocos2dx提供的脚本生成android项目，这里以2dx提供的simplegame例子为例。
也即是cocos2d-2.0-x-2.0.3\samples\SimpleGame\proj.android
导入以后右键这个项目，设置它引用第一步导入的coco2dx项目。如图
3.为2中导入的simplegame项目新建一个builder。
右键点击该项目，选择Properties，在左侧上面部分选中builders项，这时可以看到右侧面板有一个new按钮，点击new按钮，在弹出的对话框中选中下面的Program，ok
弹出新的对话框，有如下内容
其中Location处选择你的ndk目录下面的ndk-build.cmd文件（这就是为什么说ndk要新点的版本了，旧的没有这个文件）
Working Directory通过Browse Workspace选择simplegame项目。
然后切换到Refrash标签确认已经选中。
切换到Envirenment标签，点击new按钮，在弹出的对话框中name一项填NDK_MODULE_PATH（为什么填这个呢？这就是我之前说的要对android.mk这个文件的语法有一定的了解了，在编译时，需要coco2dx，box2d等静态库，这里就是配置这些静态库的父路径了，在android.mk文件中只要写子路径就会在这里配置的父路径下搜索对应的静态库来进行链接了，具体写法见$(call import-module,CocosDenshion/android)
这种语句），Value项填类似这种路径你的cocos2dx解压以后放置目录\cocos2d-2.0-x-2.0.3; 你的cocos2dx解压以后放置目录 \cocos2d-2.0-x-2.0.3\cocos2dx\platform\third_party\android\prebuilt
填好后点击ok。
切换到Build Options，可以看到下面有Specify working set of relevant resources这项，选中它后发现他右边的按钮可以点击了
点击右边的按钮，在弹出的对话框中展开simplegame项目，勾上jni目录，在后面还会引入classes文件夹，到时候记得回来也勾上，因为以后我们写c++代码主要就在这个文件夹下面写了，这里先放过，选好后点击finish按钮关闭对话框。
最后点击大对话框的ok按钮，在这之前也可以给这个builder起个名字
第3步到此结束。
4.将android项目转为c++项目，当然转了以后android项目还是android项目，只是可以支持编写c++代码了。
右键simplegame项目，new，Convert to a C/C++ Project(如果看不到这项就点击other，展开c++)
点击Convert to a C/C++ Project会弹出一个对话框，按如下选中，是的这里看到android gcc这一项，但是不要选它，我们不会用到他，即使Cygwine gcc我们也不会用到，但是这里需要选中他。
接下来我们点击完成以后，我们再次右键simplegame项目，打开Properties，切到Builders界面，这时候可以看到，相对应普通的android项目而言这里多了3个builder
我们需要取消掉cdt builder和Scanner Configuration Builder两项，取消以后点击ok。
5.引入cocos2dx及项目源码。
右键simplegame项目，选择Properties，展开c++ General选择Path and Symbols,点击Includes标签项，选中Assembly，点击add按钮，在弹出对话框中填入如下路径：
你的ndk放置目录\android-ndk-r8c\platforms\android-8\arch-arm\usr\include同时选中下面图中两项
同样的方法把以下两项也添加进来：
你的cocos2dx放置目录\cocos2d-2.0-x-2.0.3\CocosDenshion\include
你的cocos2dx放置目录\cocos2d-2.0-x-2.0.3\cocos2dx\include
切换到Source Location标签，点击Link Folder按钮，如下图，选中后再点击Browse按钮
在弹出的对话框中选择以下路径，然后点击ok：
你的cocos2dx放置目录\cocos2d-2.0-x-2.0.3\samples\SimpleGame\Classes（这里只是举例，实际上这个目录是你用create android project这个脚本生成的android项目里面的Classes文件夹的路径）
同样的方法把coco2dx也引入进来，路径如下：
你的cocos2dx放置目录\cocos2d-2.0-x-2.0.3\cocos2dx
点击Apply按钮保存设置。
把视线重新转到左侧的c++ General项，选中Code Analysis，设置如下图所示，要求一模一样。设置这个的目的是因为eclipse cdt插件对代码解析不够好，很多正确的代码会解析成错误的提示出来，导致无法编译。
还记得我们在第3步配置buider的时候说classes文件夹要等后面在配置吗,现在已经可以配置了，切换到Builder页，选中我们之前建好的Builder，点击edit按钮就可以编辑了。
最后，点击ok按钮，大功告成，一般来讲，这个时候在你点击完ok按钮以后项目就会开始编译了，这会花费不少时间。
以后我们就可以在eclipse里面写c++代码了，按照coco2dx跨平台的思想，一些平台无关的代码一定要放在classes下面编写。
六，参考文章：
这篇文章讲了mac电脑上ios xcode和android eclipse配置，在编译器配置上跟我这里不同
/11283/cocos2d-x-for-ios-and-android-getting-started
这篇文章讲了android的编译系统，也就是android.mk的语法的东西
.cn/s/blog_6bdbcx.html
PS：如果有高人知道怎么在eclipse里面调试c++代码也请不吝赐教了，在这里回帖或者发到我邮箱都可以，邮箱地址：
基于OO的不间断滚动分享，支持滚动方向、是不是自动滚动等自定义
基于OO的不间断滚动分享，支持滚动方向、是否自动滚动等自定义前言：前段时间一直都好忙也就好久没有写些东西了，最近手上的事刚好告些段落了，把以前空写的写插件都拿出来分享下吧，希望对大家有些帮助，也希望有高手能帮忙指点下我的写不足和错误，一直以来自己写的东西都是在用，性能方面个人只能尽量靠近问题还很多……真心求指点；
插件简介：用于图片不间断的滚动，网上不间断滚动的代码真的很多，可扩展性却很多都有限，这个是好久以前写过的一个那个时候接触面向对象没多久，写的有些东西不够好，不过作为个人里程碑也就保留下来了
使用方法：在下面的js代码里面前面写了，大家可以看看直接复制粘贴就可以用了有问题可以联系我
&!DOCTYPE HTML&
&meta charset="gbk"&
&title&marquee&/title&
div,h2,ul,li,img,span{margin:0;padding:0;}
li{list-style:}
/*layout*/
.wrapper{width:960margin:0 auto}
.prize{width:960margin:20position:background:#f6f4f2;font:12px Tahoma,sans-border:1px solid #padding:1color:#052d30;}
.prize h2{height:25font:bold 14px/25px Tbackground:#0text-indent:10text-shadow:1px 1px 1px #}
/*content*/
.prize-con{width:900margin:0height:128overflow:padding:10px 0;position:}
.prize-con ul{width:200%;position:}
.prize-con li{float:_display:line-height:25text-align:margin-right:5}
.prize-con li img{width:141height:110display:border:1px solid #padding:1}
.block2{width:220margin:0;}
.block2 .prize-con{width:150height:410padding:0;margin:10}
.block2 ul{width:}
.block2 li{float:}
/*button*/
.prize span{display:position:top:50%;width:13height:15background:url(bun-bg.jpg) no-repeat 0 0;cursor:}
span.l-bun{left:5}
span.r-bun{background-position:0 -15right:10}
&div class="wrapper"&
&!--block1--&
&div class="prize 222"&
&h2&奖品展示&/h2&
&div class="prize-con dd"&
&li&&img src="http://g.pps.tv/style/images/Ban.jpg" /&游戏装备1&/li&
&li&&img src="http://g.pps.tv/style/images/Ban.jpg" /&游戏装备2&/li&
&li&&img src="http://g.pps.tv/style/images/Ban.jpg" /&游戏装备3&/li&
&li&&img src="http://g.pps.tv/style/images/Ban.jpg" /&游戏装备4&/li&
&li&&img src="http://g.pps.tv/style/images/Ban.jpg" /&游戏装备5&/li&
&li&&img src="http://g.pps.tv/style/images/Ban.jpg" /&游戏装备6&/li&
&li&&img src="http://g.pps.tv/style/images/Ban.jpg" /&游戏装备7&/li&
&li&&img src="http://g.pps.tv/style/images/Ban.jpg" /&游戏装备8&/li&
&span class="l-bun"&&/span&
&span class="r-bun"&&/span&
&!--block2--&
&div class="prize block2"&
&h2&奖品展示&/h2&
&div class="prize-con dd"&
&li&&img src="http://g.pps.tv/style/images/Ban.jpg" /&游戏装备1&/li&
&li&&img src="http://g.pps.tv/style/images/Ban.jpg" /&游戏装备2&/li&
&li&&img src="http://g.pps.tv/style/images/Ban.jpg" /&游戏装备3&/li&
&li&&img src="http://g.pps.tv/style/images/Ban.jpg" /&游戏装备4&/li&
&li&&img src="http://g.pps.tv/style/images/Ban.jpg" /&游戏装备5&/li&
&li&&img src="http://g.pps.tv/style/images/Ban.jpg" /&游戏装备6&/li&
&li&&img src="http://g.pps.tv/style/images/Ban.jpg" /&游戏装备7&/li&
&li&&img src="http://g.pps.tv/style/images/Ban.jpg" /&游戏装备8&/li&
&span class="l-bun"&&/span&
&span class="r-bun"&&/span&
//find elements
_get = function(e,c){
var _isClass,_isId,newE
typeof e=="string"&&(_isClass = e.indexOf(".")&=0,_isId = e.indexOf("#")&=0,newEle = e.substring(1));
//get frist argument
if(_isClass&&_isId)
if(_isId){
var obj = typeof newEle=="string"?document.getElementById(newEle):
}else if(_isClass){
var obj = _class(newEle),
_isArr = obj.constructor==A
//get class
function _class(c,o){
var oDom = o?o:document,
cParent = oDom.getElementsByTagName("*"),
classAry = [],
leng = cParent.
for(var i=0;i&i++){
var allC = cParent[i].className,
word = allC.split(" ");
for(var z=0,len=word.z&z++){
word[z]==c&&classAry.push(cParent[i])
return classAry.length==1?classAry[0]:classA
//second argument
if(_isArr){
for(var j=0,len=obj.j&j++){
var ele = obj[j].getElementsByTagName(c);
obj[j] = ele.length==1?ele[0]:
obj = obj.getElementsByTagName(c);
if(obj)return obj.length==1?obj[0]:
调用规则，第一个参数是需要滚动的图片区域容器的指针（这个容器必须定义position，其实这里也可以用margin负像素实现，不过因为是很久以前的东西了也就没有再次做更改了）；
第二个参数为一个对象这对象里面包含值：
1、dir要滚动的方向0为横向滚动，1为纵向滚动
2、lBut像左边滚动的按钮指针如果没有可以不用
3、rBut像右边滚动按钮指针
4、auto是否需要它自动滚动不需要则在传参数的时候设置为
function Roll(){
this.timeId =
this.funTime =
this.continuation =
this.initial.apply(this,arguments)
Roll.prototype = {
even:function(o,e,fun){
o.attachEvent?o.attachEvent("on"+e,fun):o.addEventListener(e,fun,false)
initial:function(o,s){
this.set(s||{});
var _this = this,auto = this.s.
this.obj =
this.child = o.
this.oAttr = !!this.s.dir?this.child[0].offsetHeight:this.child[0].offsetW
this.dirNo = !!this.s.dir?"top":"left";
if(this.s.lBut){
this.even(this.s.lBut,this.s.evenStyle,function(){
_this.continuation&&clearInterval(_this.continuation);
_this.s.evenStyle==="mouseover"?(_this.continuation = setInterval(function(){_this.prev()},_this.s.timeSpeed)):_this.prev();
_this.s.auto =
_this.s.dirInit=1;
auto&&(this.even(this.s.lBut,"mouseout",function(){_this.moveDir()}));
this.s.evenStyle=="mouseover"&&(this.even(this.s.lBut,"mouseout",function(){_this.continuation&&clearInterval(_this.continuation)}))
if(this.s.rBut){
this.even(this.s.rBut,this.s.evenStyle,function(){
_this.continuation&&clearInterval(_this.continuation);
_this.s.evenStyle==="mouseover"?(_this.continuation = setInterval(function(){_this.next()},_this.s.timeSpeed)):_this.next();
_this.s.auto =
_this.s.dirInit=0;
auto&&(this.even(this.s.rBut,"mouseout",function(){_this.moveDir(_this.s.dirInit)}));
this.s.evenStyle==="mouseover"&&(this.even(this.s.rBut,"mouseout",function(){_this.continuation&&clearInterval(_this.continuation)}))
this.even(o,"mouseover",function(even){
var e = even || window.event,target = even.target || even.srcE
_this.s.auto =
if(target!==_this.s.rBut||target!==_this.s.lBut||_this.s.evenStyle!=="mouseover"){
_this.continuation&&clearInterval(_this.continuation);
_this.funTime&&clearInterval(_this.funTime);
auto&&(this.moveDir(this.s.dirInit),this.even(o,"mouseout",function(){_this.moveDir(_this.s.dirInit)}))
set:function(v){
this.s = {
dir:0,//滚动方向，0为横向滚动，1为纵向滚动
auto:true,//是否自动滚动
lBut:null,
rBut:null,
dirInit:0,//图片开始滚动后滚动方向
timeSpeed:1000,//效果执行事件
evenStyle:"click"//触发事件类型
for(c in v){this.s[c] = v[c]};
prev:function(){
this.obj.insertBefore(this.child[this.child.length-1],this.obj.firstChild);
this.obj.style[this.dirNo] = -this.oAttr+"px";
this.moverIt(0);
next:function(){
this.moverIt(-this.oAttr,function(){
var dir = !!this.s.dir?"top":"left";
this.obj.appendChild(this.child[0]);
this.obj.style[this.dirNo] = 0;
moverIt:function(i,callBack){
var _this =
this.timerId&&clearInterval(this.timerId);
this.funTime&&clearTimeout(this.funTime);
this.timerId = setInterval(function(){
var dir = !!_this.s.dir?_this.obj.offsetTop:_this.obj.offsetLeft,
iSpeed = (i-dir)/5;
iSpeed = iSpeed & 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
dir==i?(clearInterval(_this.timerId),callBack&&callBack.apply(_this),!!_this.s.auto&&(_this.moveDir(_this.s.dirInit))):_this.obj.style[_this.dirNo] = iSpeed + dir + "px"},30);
moveDir:function(d){
var _this =
this.s.auto =
this.funTime = setTimeout(function(){d===0?_this.next():_this.prev()},_this.s.timeSpeed)
var menu = _get(".prize-con","ul"),lBun = _get(".l-bun"),rBun = _get(".r-bun");
for(var i=0,leng=menu.i&i++){
var mq = new Roll(menu[i],{dir:i%2?1:0,lBut:rBun[i],rBut:lBun[i]}),mq =//实例化，当板块为偶数的时候像左边滚动，反之向上
如果您想提高自己的技术水平，欢迎加入本站官方1号QQ群：&&，&&2号QQ群：，在群里结识技术精英和交流技术^_^
本站联系邮箱：}