jquery手写轮播图_jquery 实现轮播图详解及实例代码_jquery_脚本之家

轮播图:

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

jquery做轮播图的例子:

html部分代码:

轮播图

<
>
  • 1
  • 2
  • 3
  • 4
  • 5

css部分代码:

* {

margin: 0;

padding: 0;

}

#igs {

margin: 10px auto;

width: 700px;

height: 320px;

position: relative;

}

.ig {

position: absolute;

}

#tabs {

position: absolute;

list-style: none;

background-color: rgba(255,255,255,.5);

left: 300px;

bottom: 10px;

border-radius: 10px;

padding: 5px 0 5px 5px;

}

.tab{

float: left;

text-align: center;

line-height: 20px;

width: 20px;

height: 20px;

cursor: pointer;

overflow: hidden;

margin-right: 4px;

border-radius: 100%;

background-color: rgb(200,100,150);

}

.btn{

position: absolute;

color: #fff;

top: 110px;

width: 40px;

height: 100px;

background-color: rgba(255,255,255,.3);

font-size: 40px;

font-weight: bold;

text-align: center;

line-height: 100px;

border-radius: 5px;

margin: 0 5px;

}

.btn2{

position: absolute;

right: 0px;

}

.btn:hover{

background-color: rgba(0,0,0,.7);

}

js部分代码:

//定义全局变量和定时器

var i = 0 ;

var timer;

$(document).ready(function(){

//用jquery方法设置第一张图片显示,其余隐藏

$('.ig').eq(0).show().siblings('.ig').hide();

//调用showTime()函数(轮播函数)

showTime();

//当鼠标经过下面的数字时,触发两个事件(鼠标悬停和鼠标离开)

$('.tab').hover(function(){

//获取当前i的值,并显示,同时还要清除定时器

i = $(this).index();

Show();

clearInterval(timer);

},function(){

//

showTime();

});

//鼠标点击左侧的箭头

$('.btn1').click(function(){

clearInterval(timer);

if(i == 0){

i = 5;//注意此时i的值

}

i--;

Show();

showTime();

});

//鼠标点击右侧的箭头

$('.btn2').click(function(){

clearInterval(timer);

if(i == 4){

i = -1;//注意此时i的值

}

i++;

Show();

showTime();

});

});

//创建一个showTime函数

function showTime(){

//定时器

timer = setInterval(function(){

//调用一个Show()函数

Show();

i++;

//当图片是最后一张的后面时,设置图片为第一张

if(i==5){

i=0;

}

},2000);

}

//创建一个Show函数

function Show(){

//在这里可以用其他jquery的动画

$('.ig').eq(i).fadeIn(300).siblings('.ig').fadeOut(300);

//给.tab创建一个新的Class为其添加一个新的样式,并且要在css代码中设置该样式

$('.tab').eq(i).addClass('bg').siblings('.tab').removeClass('bg');

/*

* css中添加的代码:

* .bg{ background-color: #f00; }

* */

}

完成效果图:

完成效果,点击如下链接即可查看:http://sandbox.runjs.cn/show/t07kscph

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

思考一:在第七行代码中用jquery方法设置第一张图片显示,其余隐藏,我们还有没有其他方法可以实现?

思路:通过jquery的筛选器来实现

代码示例:

$("#igs a:not(:first-child)").hide();

扩展:这样来看的话,在a标签中的class我们都可以省略,于此同时我们对于jquery选择器的了解要更深入。

思考二:在第64行代码中,我们创建了一个Show函数,在这里我们只能看到简单的效果,我们能不能将我们的动画效果做的更炫?

思路:用jquery中的自定义动画,为其设置多个动画效果

代码示例:

//代码提示:可以用fadeIn()、fadeOut()、fadeTo()、animate()等,具体实现方法请查阅相关资料

思考三:如果我们在原来的基础上在增加一张或多张图片,我们又要修改我们的代码了,我们可不可以将该段代码适用到更多的轮播图中?

思路:我们在前面设置一个计数器count,通过DOM的方法获取到图片的数量

代码示例:

var count;

$(document).ready(function(){

count= $(".main a").length; /*给动态变化的i备用*/;

//。。。代码省略

//鼠标点击左侧的箭头

$('.btn1').click(function(){

clearInterval(timer);

if(i == 0){

i = count;//注意此时i的值

}

i--;

Show();

showTime();

});

//鼠标点击右侧的箭头

$('.btn2').click(function(){

clearInterval(timer);

//console.log(count-1);

if(i == count-1){

i = -1;//注意此时i的值

}

i++;

Show();

showTime();

});

});

用原生Javascript方法写一个简单的轮播图

html部分代码:

1

1

2

3

4

5

5

<

>

js部分代码:

/* 知识点: */

/* this用法 */

/* DOM事件 */

/* 定时器 */

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 index = 1;

var timer;

function animate(offset) {

//获取的是style.left,是相对左边获取距离,所以第一张图后style.left都为负值,

//且style.left获取的是字符串,需要用parseInt()取整转化为数字。

var newLeft = parseInt(list.style.left) + offset;

list.style.left = newLeft + 'px';

//无限滚动判断

if (newLeft > -600) {

list.style.left = -3000 + 'px';

}

if (newLeft < -3000) {

list.style.left = -600 + 'px';

}

}

function play() {

//重复执行的定时器

timer = setInterval(function () {

next.onclick();

}, 2000)

}

function stop() {

clearInterval(timer);

}

function buttonsShow() {

//将之前的小圆点的样式清除

for (var i = 0; i < buttons.length; i++) {

if (buttons[i].className == "on") {

buttons[i].className = "";

}

}

//数组从0开始,故index需要-1

buttons[index - 1].className = "on";

}

prev.onclick = function () {

index -= 1;

if (index < 1) {

index = 5

}

buttonsShow();

animate(600);

};

next.onclick = function () {

//由于上边定时器的作用,index会一直递增下去,我们只有5个小圆点,所以需要做出判断

index += 1;

if (index > 5) {

index = 1

}

animate(-600);

buttonsShow();

};

for (var i = 0; i < buttons.length; i++) {

(function (i) {

buttons[i].onclick = function () {

/* 这里获得鼠标移动到小圆点的位置,用this把index绑定到对象buttons[i]上,去谷歌this的用法 */

/* 由于这里的index是自定义属性,需要用到getAttribute()这个DOM2级方法,去获取自定义index的属性*/

var clickIndex = parseInt(this.getAttribute('index'));

var offset = 600 * (index - clickIndex); //这个index是当前图片停留时的index

animate(offset);

index = clickIndex; //存放鼠标点击后的位置,用于小圆点的正常显示

buttonsShow();

}

})(i)

}

container.onmouseover = stop;

container.onmouseout = play;

play();

}

jquery和Javascript方法的比较

经过比较,我们不难看出,jquery方法比我们的Javascript方法写的代码要少得多。事实上,直接用Javascript省略了好多问题,比如说兼容性的问题(该示例没有做测试,只是用来做比较);还有,如果当class的值有两个,中间用空格隔开,那么我们用DOM该如何操作(思路:用正则表达式和数组的相关方法),这样我们的代码量会更多;如果我们想要更改动画效果,我们需要修改的地方也很多,而从前面的介绍,我们知道,想要修改动画效果直接修改调用的动画函数就行了……

后面的话:

这篇博文记录自己思维多一点,其中很多方法的具体实现效果都还没写。现在边学习jquery边复习前面学过的Javascript,越来越觉得Javascript强大了(其实是自己弱爆了),好多东西都值得去深究,越来越觉得这个东西有意思了。

感谢大家阅读,希望能帮助到大家,谢谢大家对本站的支持!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/506030.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于python_关于python的基础知识

一&#xff0c;编程语言的类型&#xff1a; 1、编译型 2、解释型 3、静态语言 4、动态语言 5、强类型定义语言 6、弱类型定义语言 编译型vs解释型 编译型&#xff1a; 优点&#xff1a;编译器一般会有预编译的过程对代码进行优化。因为编译只做一次&#xff0c;运行时不需要编译…

oracle10g如何导出dmp,Oracle 10g dmp文件的导入导出

Oracle数据导入dmp文件可以是“某个用户下的数据库”&#xff0c;也可以是“某张表”&#xff0c;这里以导入数据库为例说明 &#xff1a;1.用SYS用户名&#xff0c;以DBA的身份在ie中登入到数据库(ORACLE客户端Enterprise Manager Console)2.在方案->用户与权限->用户新…

idea 不打开文件提示错误_IDEA无法正常启动(打不开报错)

版权声明&#xff1a;转载请附上文章地址https://blog.csdn.net/qq_42672839IDEA无法正常启动(两种问题)目录第一种是缓存问题 双击Idea打开&#xff0c;无任何反应&#xff0c;资源管理器中有Idea的进程。第二种报错(报错&#xff1a; cannot lock system foiders)两种…

python套用word模板_如何使用Python批量创建Word模板

如何使用 Python 批量创建 Word 模板 在日常工作中我们经常需要重复性地将同一份内容的 Word 文档资料发送 给多个不同客户&#xff0c; 此时 Word 文档内容可能只有客户署名不同、 或者只有部分关 键信息不同。此时如果采用传统的工作方法我们可能需要反复地打开不同 Word 文档…

oracle sh文件怎么打开,Oracle数据库逻辑备份的SH文件

该Oracle教程将告诉诸位学习Oracle的朋友&#xff1a;Oracle数据库逻辑备份的SH文件。完全备份的SH文件&#xff1a;exp_comp.shrq date "%m%d" su - oracle -c "exp system/manager fully inctypecomplete file/oracle/export/db_comp$rq.dmp"累计备份的S…

jetson nano 系统镜像制作_2.Jetson Nano烧写系统镜像

烧录工具.zip点击下载Jetson Nano是一款形状和接口类似于树莓派的嵌入式主板&#xff0c;搭载了四核Cortex-A57处理器&#xff0c;GPU则是拥有128个NVIDIA CUDA核心的NVIDIA Maxwell架构显卡&#xff0c;内存为4GB的LPDDR4&#xff0c;存储则为16GB eMMC 5.1&#xff0c;支持4K…

python鸡兔同笼编程运行结果_Python少儿编程:鸡兔同笼

Python少儿编程&#xff1a;解决鸡兔同笼问题 一笼鸡和兔子&#xff0c;我们数了一下&#xff0c;咳咳&#xff0c;鸡和兔子的头一共有35个&#xff0c;但是鸡和兔子的脚一共有94只。 好的&#xff0c;那么吃货们我们来好好算一算&#xff0c;到底能做几只德州扒鸡和双流兔头呢…

linux fedora14 u盘运行,Fedora Linux系统下挂载U盘和Windows盘

前提是在mnt目录下&#xff0c;建立了F,D,U三个目录&#xff0c;还有就是sda&#xff0c;hda之分即串并口硬盘区别[rootlocalhost yan]# vi /etc/fstabLABEL/ / ext3 defaults 1 1tmpfs /dev/shm tmpfs defaults 0 0devpts /dev/pts devpts gid5,mode620 0 0sysfs /sys sysfs d…

linux下c语言绘图库_Linux 下的图形库介绍

在进行Linux下的图形系统编程时&#xff0c;我们常常会遇到以下这些概念&#xff1a;Framebuffer, X11, SDL&#xff0c;DFB, miniGUI, OpenGL&#xff0c;QT, GTK&#xff0c;KDE, GNOME等等。一、Linux 图形领域的基础设施1.1 X WindowX Window从逻辑上分为三层&#xff1a;X…

python解析二维码_Python二维码生成识别实例详解

前言 在 JavaWeb 开发中&#xff0c;一般使用 Zxing 来生成和识别二维码&#xff0c;但是&#xff0c;Zxing 的识别有点差强人意&#xff0c;不少相对模糊的二维码识别率很低。不过就最新版本的测试来说&#xff0c;识别率有了现显著提高。 对比 在没接触 Python 之前&#xff…

linux下 如何用信号signal 终止或者暂停子线程,linux下实现线程暂停

记得在windows下有一个SuspendThread使线程挂起的函数&#xff0c;却发现linux下没有类似的函数&#xff0c;于是想自己写个。。刚开始就想到用信号(没办法&#xff0c;正在看auep&#xff0c;只能想到这个)test1:用pthread_kill将SIGSTOP信号发送到要暂停的线程期望结果&#…

keil debug如何在watch直接修改变量值_python日志记录系列教程,内置logging模块(一),直接使用logging模块的基础日志记录

前言&#xff1a;成熟的软件开发不可避免的要进行日志记录&#xff0c;python内置模块logging提供了强大的日志记录能力&#xff0c;本文将从多个角度&#xff0c;由浅入深的介绍logging的常见使用方法和一些基本概念&#xff0c;本此系列文章分为两篇&#xff0c;本文为系列文…

linux进程管理子系统分析,linux进程管理子系统简要分析

Linux进程管理&#xff1a;进程与程序&#xff1a;程序&#xff1a;存放在磁盘上的一系列代码和数据的可执行映像&#xff0c;是一个静止的实体。进程&#xff1a;是一个执行中的程序&#xff0c;它是动态的实体进程四要素&#xff1a;1. 有一段程序供其执行&#xff0c;这段程…

基于python的分布式扫描器_基于python的服务器监测系统的设计

基于python的服务器监测系统的设计高正;徐浩;余曼【期刊名称】《电脑知识与技术》【年(卷),期】2017(013)002【摘要】本文介绍了一种基于Python的服务器监测系统的设计,系统部署在需要监测的服务器上能够实时监测服务器的CPU、内存、磁盘空间.每天定时(可人工设置)自动发邮件报…

c语言变量命名规则_带你学习C语言—变量

在编写程序时&#xff0c;常常需要将数据存储在内存中&#xff0c;以便于使用这个数据或者修改这个数据的值。我们通常使用变量来存储数据&#xff0c;而且使用变量可以引用存储在内存中的数据&#xff0c;并随时根据需要对数据进行处理。变量的概念在程序设计中&#xff0c;允…

linux某个线程信号唤醒,linux多线程编程--信号量和条件变量 唤醒丢失事件

PriorityQueue有一个特征需要特别注意&#xff0c;即&#xff1a;对于那些通过排序方法判定为“相等”的元素&#xff0c;在通过poll方法依次取出它们时&#xff0c;它们的顺序是不确定的&#xff0c;特别是不会维持插入的顺序。举例说明&#xff1a;假如一个对象Obj&#xff0…

qt布局嵌套_QDockWidget嵌套布局详解-实现Visual Studio布局

概述许多工程软件&#xff0c;如Qt Creator&#xff0c;VS&#xff0c;matlab等&#xff0c;都是使用dock布局窗口&#xff0c;这样用户可以自定义界面&#xff0c;自由组合窗口。Qt的嵌套布局由QDockWidget完成&#xff0c;用Qt Creator拖界面得到的dock布置形式比较固定&…

ios 贝塞尔曲线 颜色填充_iOS贝塞尔曲线(UIBezierPath)的基本使用方法

简介UIBezierPath是对Core Graphics框架的一个封装&#xff0c;使用UIBezierPath类我们可以画出圆形(弧线)或者多边形(比如&#xff1a;矩形)等形状&#xff0c;所以在画复杂图形的时候会经常用到。分析首先我们先看一下&#xff0c;UIBezierPath有哪些重要的属性&#xff1a;1…

html缩进快捷键_Windows IDEA 快捷键终极大全,果断收藏!

作者&#xff1a;JaJian出处&#xff1a;https://www.cnblogs.com/jajian/p/8012603.html话说IDEA对新手来说难&#xff0c;可能其中一个原因就是快捷键组合多而且复杂但是它也很全&#xff0c;基本所有功能都可以通过快捷键来完成&#xff0c;可以这么说&#xff0c;如果你掌握…

linux远程登录 密钥,使用密钥认证机制远程登录Linux

密钥认证机制创建存放key的文件1)创建目录 /root/.ssh 并设置权限[rootlocalhost ~]# mkdir /root/.ssh mkdir 命令用来创建目录&#xff0c;以后会详细介绍&#xff0c;暂时只了解即可。[rootlocalhost ~]# chmod 700 /root/.ssh chmod 命令是用来修改文件属性权限的&#xff…