0

0

jQuery简单实用的轮播器实现方法

小云云

小云云

发布时间:2018-01-10 15:03:13

|

1235人浏览过

|

来源于php中文网

原创

本文主要为大家详细介绍了jquery实现简单实用的轮播器制作方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助大家。

WEB开发经常实用到一种情况,即某个容器内的各项轮流循环播放显示,同时有相应的导航条提示,因为这个在很多地方可以使用,而且功能很相似的,所以写一个这样的播放功能,共享一下,需要注意的是这个需要jQuery的支持, 这个自己网上搜索下载即可,下面总结出来如下,直接看代码,

一、把如下保存为一个独立的文件 itemPlayerApp.js :

//attend: this need jQuery.js support 
var itemPlayerApp={ 
 author:'shenzhenNBA', 
 version:'v1.0', 
 appMaxNum:0, 
 playData:'1xplay', 
 playerID:"", 
 speed:3000, 
 appPlay:function(){  
  var f=this.playData.toLowerCase().split('x'); 
  if(f[1]=='play'){ 
   var i; 
   try{i=parseInt(f[0]);}catch(e){i=0;} 
   if(i>=this.appMaxNum){i=0;}    
   this.appTab(i);   
   this.playData=(++i)+"xplay"; 
  }   
 }, 
 appTab:function(tabIndex){ 
  var k,j; 
  try{k=parseInt(tabIndex);}catch(e){k=0;}   
  for(j=0;j

二、如何使用:

1.需要使用的web页面中引入jQery文件和本 itemPlayerApp.js 文件,例如:

 

2.建立如下格式的HTML文件

1 2 3

@@##@@ @@##@@ @@##@@

注意:因为尽量简单,所以需要建立适当格式的HTML,主要要求如下,注意颜色部分,

//A, id = containerIDNavCon和 id = containerIDItemCon 中的连接 A 元素的数量应该相等;
//B, 导航容器的 ID 构成应为主容器 ID 加上 NavCon,如上 containerIDNavCon;
//C, 导航容器中的每个 A 元素的 ID 构成为,itemNav 加上以0开始的递增数字序列,如上面的绿色部分;
//D, 显示项目容器内的每个 A 元素的 ID 构成为,item 加上以0开始的递增数字序列,如上面的紫色部分;

3.在WEB页面中的加载事件onload,初始化和启用该轮播功能,例如:
window.onload=function(){
itemPlayerApp.init('containerID',3000,300,200);
itemPlayerApp.active();
}

三、如下一个例子

施乐在线订单系统
施乐在线订单系统

一套简单的数据库结构的在线订单系统,采用数据库存储格式,方便的实现产品的在线订购,带有后台管理模块用户名为: admin 密码: ojdj22 修改密码方法如下, 更改 ckpwd.asp 中 第三行 if (user="用户名" and pwd="密码") 即可

下载

假如所有文件都放在一个文件夹里,

 
 
 
 
TEST 
 
 
 
 
 

1 2 3

@@##@@ @@##@@ @@##@@

项目循环轮播功能

提示: jQuery.js 的文件请网上自己下载。
在使用到的时候直接使用即可。

相关推荐:

利用H5实现一个轮播器(触屏版)的实例教程

具体介绍如何用H5实现触屏版的轮播器

教你一步步用jQyery实现轮播器

jQuery简单实用的轮播器实现方法jQuery简单实用的轮播器实现方法jQuery简单实用的轮播器实现方法jQuery简单实用的轮播器实现方法jQuery简单实用的轮播器实现方法jQuery简单实用的轮播器实现方法

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

12

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

4

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

18

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

19

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 5.1万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.9万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号