轮播图jquery代码(js轮播图实现简单代码)

ABOUT

jQuery制作简易轮播图

1

jQuery简介

什么是 jQuery ？

jQuery 是一个 JavaScript 函数库。

jQuery 是一个轻量级的”写的少，做的多”的 JavaScript 库。

jQuery 库包含以下功能：

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

2

jQuery安装

jQuery安装的方法有很多种，本文介绍一种较为简便的安装方法。

可以通过CDN（内容分发网络）引用它

从staticfile CDN引用jQuery，需使用以下代码：

<script src=”https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js”></script>

3

使用jQuery制作简易轮播图

<div class=”box1″> <div class=”box”> <div class=”box-pic”><img src=”images/h1.jpg”></div> <div class=”box-pic”><img src=”images/h2.jpg”></div> <div class=”box-pic”><img src=”images/h3.jpg”></div> <div class=”box-pic”><img src=”images/h4.png”></div> <div class=”box-pic”><img src=”images/h5.jpg”></div> <div class=”box-pic”><img src=”images/h6.jpg”></div> <div class=”box-left”>&lt;</div> <div class=”box-right”>&gt;</div> <class class=”box-xuanding”> <ul> <li class=”qiehuan”></li> <li class=”qiehuan”></li> <li class=”qiehuan”></li> <li class=”qiehuan”></li> <li class=”qiehuan”></li> <li class=”qiehuan”></li> </ul> </class> </div> </div>

html源代码

$(function(){ var index=0;//标记当前图片 var a; dingshiqi(); function dingshiqi(){ a = setInterval(function (){ //设定自动切换 index ; if(index>=$(“.box-pic”).length){index=0} $(“.box-pic”).css(“opacity”,”0″); $(“.box-pic”).eq(index).css(“opacity”,”1″); },3000) } $(“.box-left”).click(function(){ //左按钮切换 clearInterval(a); index–; if(index==-1){ index=$(“.box-pic”).length-1 } $(“.box-pic”).css(“opacity”,”0″); $(“.box-pic”).eq(index).css(“opacity”,”1″); dingshiqi(); } ) $(“.box-right”).click(function(){ //右按钮切换 clearInterval(a); index ; if(index==$(“.box-pic”).length){ index=0; } $(“.box-pic”).css(“opacity”,”0″); $(“.box-pic”).eq(index).css(“opacity”,”1″); dingshiqi() }) $(“.qiehuan”).click(function(){ //浮点切换 clearInterval(a); var indexx=$(this).index(); index=indexx; $(“.box-pic”).css(“opacity”,”0″); $(“.box-pic”).eq(index).css(“opacity”,”1″); dingshiqi(); })})

jQuery源代码

效果图

总结

轮播图原理：

jQuery中使用setInterval的方法来实现规定时间图片的自动遍历进行对象切换，通过css中opacity的属性0与1地改变来实现图片的出现与消失。

浮点切换与左右按钮的原理大致相同。

END

文案：李骏楷

排版：李骏楷

校对：Robinly

制作：凌达之珑达工作室

凌达新闻 | 凌达大会

凌达新闻 | 凌达讲座

更多精彩

凌达之星|凌达新闻|凌达公告|佛大CTF校队