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事件_动力节点Java学院整理
Jul 05 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 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
php 购物车实例(申精)
2009/05/11 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
js一组验证函数
2008/12/20 Javascript
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
ES6函数实现排它两种写法解析
2020/05/13 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
python实现神经网络感知器算法
2017/12/20 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
PageFactory设计模式基于python实现
2020/04/14 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
师范大学毕业自我鉴定
2013/11/21 职场文书
经贸日语专业个人求职信范文
2013/12/28 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
酒店员工培训方案
2014/06/02 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
团队会宣传标语
2014/10/09 职场文书
2014年幼师工作总结
2014/11/22 职场文书
朋友聚会开场白
2015/06/01 职场文书
初中班主任心得体会
2016/01/07 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python
html5表单的required属性使用
2021/07/07 HTML / CSS