原生爪哇岛描述语言和jQuery做轮播图简单例子

接触jquery也有一段时间了，今天刚好利用轮播图来练练手。博文的前面会介绍一个简单用jquery做轮播图的例子，中间会插入一些关于轮播图更多的思考，在后面会用爪哇岛描述语言的方法来写一个轮播图，最后则是关于jquery和爪哇岛描述语言的比较。

jquery做轮播图的例子：

超文本标记语言部分代码：

！DOCTYPE html html head meta charset=' UTF-8 '标题轮播图/title link rel='样式表type=' text/CSS ' href=' demo。CSS '/脚本src=' http :/jquery/jquery-2。1 .1 .量滴js ' type=' text/JAVAScript ' charset=' utf-8 '/script script src=' http : demo。js ' type=' text/JavaScript ' charset=' utf-8 '/script/head body div id=' IGS ' a class=' ig ' href=' # ' img src=' http 3360 images/1。jpg '/a class=' ig '部分代码：

* { margin : 0；padd : 0；} # igs { margin: 10px auto宽度： 700像素；高度： 320像素相对位置：}.ig {位置：绝对值；} #制表符{ position : absolute list-style :无；背景-color: rgba(255，255，255，5);left : 300 pxbottom : 10pxborder-radius : 10px；padding: 5px 0 5px 5px }。制表符{左浮动：文本对齐：中心；线高： 20px宽度： 20px高度： 20pxcursor:指针；飞越：隐藏；右边距： 4px边界半径： 100%;背景-color: rgb(200，100，150)；}.btn{位置：绝对值；color: # ffftop: 110px宽度： 40px高度： 100像素；背景-color: rgba(255，255，255，3);font-size : 40px字体粗细：粗体；文本对齐：中心；线高： 100像素；边界半径： 5px余量： 0 5px} .btn2 {位置：绝对高度： 0px}。BTN :悬停{背景色： rgba(0，0，0，7);}js部分代码：

//定义全局变量和定时器var I=0；定义变量计时器；$(文档)。就绪（函数(){ //用jquery方法设置第一张图片显示，其余隐藏$('.ig ').等式(0).显示()。兄弟姐妹('。ig ').hide()；//调用showTime()函数（轮播函数)显示时间()；//当鼠标经过下面的数字时，触发两个事件（鼠标悬停和鼠标离开) $('.制表符')。悬停（函数(){ //获取当前我的值，并显示，同时还要清除定时器i=$(这个)。index()；show()；clearInterval(计时器);},函数(){//显示时间()；});//鼠标点击左侧的箭头$(.BTN 1 ' .单击(函数(){ clearInterval(计时器));if(I==0){ I=5；//注意此时我的值}我-；show()；显示时间()；});//鼠标点击右侧的箭头$(. BTN 2 ').单击(函数(){ clearInterval(计时器));if(I==4){ I=-1；//注意此时我的值}我；show()；显示时间()；});});//创建一个开演时间函数函数showTime(){ //定时器定时器=设置间隔(函数(){ //调用一个显示()函数show()；我；//当图片是最后一张的后面时，设置图片为第一张if(I==5){ I=0；} },2000);}//创建一个显示函数函数Show(){ //在这里可以用其他jquery的动画$('.ig ').方程式(I ).法丁(300)。兄弟姐妹('。ig ').淡出(300)；//给。标签创建一个新的班级为其添加一个新的样式，并且要在钢性铸铁代码中设置该样式$('.制表符')。方程式(I ).addClass('bg ').兄弟姐妹('。制表符')。移除CLaSS(' BG ')；/* * css中添加的代码： * .BG {底色： # f00} * */}完成效果图：

关于jquery做轮播图更多的思考

思考一：在第七行代码中用jquery方法设置第一张图片显示，其余隐藏，我们还有没有其他方法可以实现？思路：通过jquery的筛选器来实现

代码示例：

$(' # IGS a :不是(:第一个孩子)').hide()；

扩展：通过这种方式，我们可以省略A标签中的所有类，同时，我们应该对jquery选择器有更深入的了解。

思考2:在第64行代码中，我们创建了一个Show函数，在这里只能看到简单的效果。能不能让我们的动画效果更加耀眼？想法：在jquery中使用自定义动画为其设置多个动画效果

代码示例：

//代码提示：fadeIn()、fadeOut()、fadeTo()、animate()等。可以使用。具体实施办法请参考相关资料

思路三：如果在原来的基础上增加一张或多张图片，就要重新修改代码。我们能把这个代码应用到更多的旋转木马图片上吗？想法：我们在前面设置一个计数器，用DOM方法得到图片的数量

代码示例：

var计数；$(文档)。ready(function(){ count=$(')。主a ')。长度；/*省去了动态变化的I */；//。代码省略//单击左侧的箭头$(. BTN 1 ')。Click (function () {clearinterval(定时器))；if(I==0){ I=count；//此时注意I的值} I-；show()；show time()；});//单击右箭头$(. BTN 2’)。Click (function () {clearinterval(定时器))；//console . log(count-1)；if(I==count-1){ I=-1；//此时注意I的值} I；show()；show time()；});});用本地Javascript方法编写一个简单的转盘

html代码的一部分：

div id=' container ' div id=' list ' style=' left :-600 px；'img src=' http : img/5 . jpg ' alt=' 1 '/img src=' http : img/1 . jpg ' alt=' 1 '/img src=' http 3: img/2 . jpg ' alt=' 2 '/img src=' http : img/3 . jpg ' alt=' 3 '/img src=' http 3360 img/4 . jpg ' alt='id=' prev ' class=' arrow '/a a href=' JavaScript :'Id='next' class='arrow'/a/divjs部分代码：

脚本类型='text/javascript' /*知识点：*//*此用法*//* DOM事件*//* timer */window . onload=function(){ var container=document . getelementbyid(' container ')；var list=document . getelementbyid(' list ')；var buttons=document . getelementbyid(' buttons ')。getElementsByTagName(' span ')；var prev=document . getelementbyid(' prev ')；var next=document . getelementbyid(' next ')；var指数=1；var计时器；函数animate(offset) {//获取style.left，这是相对于左边的距离，所以style.left在第一张图片之后是负数，//和style.left获取字符串，需要通过parseInt()进行舍入并转换为数字。var NewLeft=ParSeint(list . style . left)偏移量；list . style . left=NewLeft ' px '；//无限滚动判断if(new left-600){ list . style . left=-3000 ' px '；} if(NewLeft-3000){ list . style . left=-600 ' px '；}}函数play() {//重复执行的计时器=set interval(function(){ next . onclick()；}，2000) }函数stop() { clearInterval(计时器)；}函数buttonssshow(){//清除(var I=0；长度；I){ if(button[I]。='on') { buttons[i]。className=} }//数组从0开始，所以index需要-1buttons [index-1]。' on '；} prev . onclick=function(){ index-=1；if(index 1){ index=5 } buttonssshow()；动画(600)；};Next.onclick=function () {//由于上面计时器的作用，索引会一直增加，我们只有5个小点，所以需要判断index=1；if(index 5){ index=1 } animate(-600)；buttonssshow()；};for(var I=0；长度；I) {(功能(I){按钮[i])。onclick=function () {/*在这里，让鼠标移动到点的位置，用这个把索引绑定到对象按钮[I]上，然后去Google一下这个的用法*//*因为这里的索引是一个自定义属性，GetAttribute()，需要一个DOM2级别的方法，来获取自定义索引的属性*/var click index=parsent(this。getattribute(' index ')；var offset=600 *(index-click index)；//该索引是当前图片停留时的索引动画(偏移量)；索引=点击索引；//存储鼠标点击后的位置，以便正常显示点按钮show()；} })(I)} container . onmouseover=stop；container.onmouseout=playplay()；} /script有关Javascript动画的更多知识，请参考：

Javascript动画效果一

Javascript动画效果2

Javascript动画效果3

Javascript动画效果4

jquery和Javascript方法的比较

经过比较，我们可以很容易地看到jquery方法编写的代码比我们的Javascript方法少得多。其实很多问题直接从Javascript中省略了，比如兼容性(这个例子没有测试，只是用来比较)；还有，如果类有两个值被一个空格隔开，我们应该如何用DOM操作(思考：使用正则表达式和数组相关的方法)，这样我们的代码量会更多；如果要修改动画效果，需要修改的地方很多，而从前面的介绍中我们知道，如果要修改动画效果，可以直接修改被调用的动画函数.

后面的话：这篇博文多记录了一点我的思考，很多方法的具体实现效果还没有写出来。现在在学习jquery的同时，复习之前学过的Javascript，感觉Javascript越来越强大(其实是我比较弱)，所以很多东西都值得学习，感觉这个东西越来越有意思了。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。