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异步提交表单实例
May 30 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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实现用户认证及管理完全源码
2007/03/11 PHP
使用dump函数,给php加断点测试
2013/06/25 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
如何在PHP中使用数组
2020/06/09 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
2016/06/16 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
vant实现购物车功能
2020/06/29 Javascript
python实现简易数码时钟
2021/02/19 Python
python实现马丁策略的实例详解
2021/01/15 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
会计人员岗位职责
2014/03/19 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
个人剖析材料范文
2014/09/30 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
早安问候语大全
2015/11/10 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python