轮播图-好代码-(jq)
来源:互联网 发布:2008年nba总决赛数据 编辑:程序博客网 时间:2024/06/05 03:36
$(function(){ var aPage = $('#main .page a'); //分页按钮 var aImg = $('#main .box img'); //图像集合 var iSize = aImg.size(); //图像个数 var index = 0; //切换索引 var t; $('#btnLeft').click(function(){ //左边按钮点击 index--; if(index<0){ index=iSize-1 } change(index) }) $('#btnRight').click(function(){ //右边按钮点击 index++; if(index>iSize-1){ index=0 } change(index) }) //分页按钮点击 aPage.click(function(){ index = $(this).index(); change(index) }); //切换过程 function change(index){ aPage.removeClass('active'); aPage.eq(index).addClass('active'); aImg.stop(); //隐藏除了当前元素的所有 aImg.eq(index).siblings().animate({ opacity:0 },1000) //显示当前图像 aImg.eq(index).animate({ opacity:1 },1000) } function autoshow() { index=index+1; if(index<=iSize-1){ change(index); }else{ index=0; change(index); } } int=setInterval(autoshow,3000); function clearInt() { $('#btnLeft,#btnRight,.page a').mouseover(function() { clearInterval(int); }) } function setInt() { $('#btnLeft,#btnRight,.page a').mouseout(function() { int=setInterval(autoshow,3000); }) } clearInt(); setInt();})
链接:http://www.5icool.org/demo/2013/a00990/
0 0
- 轮播图-好代码-(jq)
- 好文章:jq定义插件
- jq代码分析 函数
- jq片段代码分析........
- jq片段代码分析
- jq代码分析-函数
- JQ基本知识代码示例
- JQ课件代码记录
- 嵌套全选jq代码
- jq 轮播图
- jq-轮播图
- jQ 轮播图
- JQ轮播图
- 轮播图jq
- JQ轮播图
- 好用的JQ日期時間選擇插件
- 好用的jq拖拽插件
- 转载好东西,jq全屏滚动插件
- C#之Socket编程
- 关于实行rcp项目开机自启动无法找到jvm.cfg的问题
- PAT 1027. 打印沙漏
- 一道小端模式考题
- json解析对象时对象的属性的顺序
- 轮播图-好代码-(jq)
- 【Code Forces 320B】【水题】Finding Team Member 最优组队匹配
- 字节流与字符流的区别
- 黑马程序员----OC语法之简明扼要的总结二
- 蓝懿学习之tableView
- [Android 硬件] Eclipse错误:Conversion to Dalvik format failed with error 1
- 第9章 异常
- Spatial Pyramid Matching for Recognizing Natural Scene Categorie(阅读)
- 【Code Forces 320A】【二进制拆分】Raising Bacteria 细胞繁殖 每天倍增