轮播图：

接触jquery也有一段时间了，今天刚好利用轮播图来练练手。博文的前面会介绍一个简单用jquery做轮播图的例子，中间会插入一些关于轮播图更多的思考，在后面会用爪哇岛描述语言的方法来写一个轮播图，最后则是关于jquery和爪哇岛描述语言的比较。轮播图的效果可以点击如下链接查看：http://沙盒。runjs。cn/show/t07 kscph

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；var计时器；$(文档)。ready(function(){//使用jquery方法设置第一张图片的显示，其他的隐藏$(')。ig’)。eq (0)。显示()。兄弟姐妹('。ig’)。hide()；//调用showTime()函数(轮播函数)show time()；//当鼠标经过下列数字时，两个事件(鼠标悬停和鼠标离开)$('。制表符')。hover(function(){ //获取I的当前值，显示出来，清除定时器i=$(this)。index()；show()；clearInterval(计时器)；}，函数(){//show time()；});//单击左箭头$(. BTN 1’)。Click (function () {clearinterval(定时器))；if(I==0){ I=5；//此时注意I的值} I-；show()；show time()；});//单击右箭头$(. BTN 2’)。Click (function () {clearinterval(定时器))；if(I==4){ I=-1；//此时注意I的值} I；show()；show time()；});});//创建一个ShowTime函数show time(){//timer timer=set interval(function(){//调用一个show()函数show()；我；//当图片在最后一张后面时，将图片设置为第一张if(I==5){ I=0；} },2000);}//创建一个Show函数函数Show(){ //这里可以使用动画$()。ig’)。eq (i)。法丁(300)。兄弟姐妹('。ig’)。其他jquery的淡出(300 );//为创建新类。选项卡并向其中添加新样式，然后在css代码$('中设置样式。制表符')。eq (i)。addclass ('bg ')。兄弟姐妹('。制表符')。remove class(' BG ')；/* * CSS中添加的代码：*。BG { background-color : # f00；} * */}完成渲染：

要完成效果，请单击以下链接查看：http://sandbox.runjs.cn/show/t07kscph

关于jquery旋转图的更多思考

思路一：在第七行代码中，使用jquery方法设置第一张图片显示，其余隐藏。我们还有其他方法实现它吗？

想法：通过jquery过滤器实现它

代码示例：

$(' # IGS a : not(: first-child)')。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()；scriptjquery和Javascript方法的比较

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

以下文字：

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

感谢您的阅读，希望对您有所帮助，感谢您对本网站的支持！