jquery实现的简单轮播图功能【适合新手】


Posted in jQuery onAugust 17, 2018

本文实例讲述了jquery实现的轮播图功能。分享给大家供大家参考,具体如下:

前面介绍了原生js实现的轮播图,今天就试着用jquery做了个轮播图,方法都一样,但jquery实现却比js方便了许多

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3water.com jQuery轮播图</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
list-style: none;
}
#flash{
width: 400px;
height: 200px;
position: relative;
margin: 0 auto;
border:1px solid black;
overflow: hidden;
}
#falsh img{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#flash ul{
position: absolute;
left: 25%;
bottom: 5%;
width: 200px;
height: 30px;
border-radius: 20px;
background-color: rgba(0,0,0,0.5);
}
#flash ul li{
float: left;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #fff;
margin-left: 20px;
margin-top: 7px;
}
#flash ul .li_first{
background-color: #f40;
}
#flash .button{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(0,0,0,0.3);
cursor: pointer;
}
#flash .right{
position: absolute;
right: 10px;
top: 80px;
}
#flash .left{
position: absolute;
left: 10px;
top: 80px;
}
#flash .button span{
font-size: xx-large;
font-weight: 700;
line-height: 50px;
margin-left: 15px;
color: rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<div id="flash">
<img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/Guardians-of-the-Galaxy-Poster-High-Res.jpg" alt="" style="display: block">
<img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/Blade-Runner-poster-art-Harrison-Ford.jpg" alt="">
<img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/2017_alien_covenant_4k-5120x2880-1920x1080.jpg" alt="">
<img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/robocop-1987-wallpaper-2.jpg" alt="">
<img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg" alt="">
<ul>
<li class="li_first"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="button right"><span>></span></div>
<div class="button left"><span><</span></div>
</div>
<script>
var count = 0 ; //定义全局变量count来表示当前图片
function run(){
count++;
count = count ==5?0:count;
$('#flash img').eq(count).fadeIn(300).siblings('img').fadeOut(300); //利用eq来遍历img,并将count位图片显示,其他兄弟元素隐藏,fadeIN位淡入显示,fadeOut为淡出
$('#flash ul li').eq(count).css('background','#f40').siblings('li').css('background','#fff'); //同样利用遍历改变圆点的背景色
}
function reverserun(){
count--;
count = count == -1?4:count;
$('#flash img').eq(count).fadeIn(300).siblings('img').fadeOut(300);
$('#flash ul li').eq(count).css('background','#f40').siblings('li').css('background','#fff');
}
var timer = setInterval(run,1000); //设置定时器
$('#flash').hover(function(){ //设置鼠标移入移出事件
clearInterval(timer);
},function(){
timer = setInterval(run,1000);
})
$('#flash ul li').mouseenter(function(){ //设置移入圆点事件
count = $(this).index();
count = count ==5?0:count;
$('#flash img').eq(count).fadeIn(300).siblings('img').fadeOut(300);
$('#flash ul li').eq(count).css('background','#f40').siblings('li').css('background','#fff');
})
$('#flash .right').click(function(){ //设置右键按钮点击事件
run();
})
$('#flash .left').click(function(){ //设置左键按钮点击事件
reverserun();
})
</script>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,测试一下运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
jquery实现拖拽添加元素功能
Dec 01 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 #jQuery
jQuery实现轮播图及其原理详解
Apr 12 #jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 #jQuery
jQuery轮播图实例详解
Aug 15 #jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 #jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 #jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 #jQuery
You might like
桌面中心(二)数据库写入
2006/10/09 PHP
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
python实现360的字符显示界面
2014/02/21 Python
详解Python中的各种函数的使用
2015/05/24 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
python实现视频分帧效果
2019/05/31 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
百联网上商城:i百联
2017/01/28 全球购物
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
护士试用期自我鉴定
2014/02/08 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
超市理货员岗位职责
2014/07/04 职场文书
励志演讲稿200字
2014/08/21 职场文书
美术教师求职信范文
2015/03/20 职场文书
生日祝酒词大全
2015/08/10 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL
快速学习Oracle触发器和游标
2021/06/30 Oracle