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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jQuery操作之效果详解
May 19 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery 移除事件的方法
Jun 20 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绘图之生成饼状图的方法
2015/01/24 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
Python re模块介绍
2014/11/30 Python
python中的全局变量用法分析
2015/06/09 Python
python开发之文件操作用法实例
2015/11/13 Python
Python 含参构造函数实例详解
2017/05/25 Python
Python从零开始创建区块链
2018/03/06 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
python批量修改文件名的示例
2020/09/27 Python
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
高级Java程序员面试要点
2013/08/02 面试题
英语自我评价范文
2014/01/24 职场文书
教师听课评语大全
2014/12/31 职场文书
家长对孩子的寄语
2015/02/26 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
社区低保工作总结2015
2015/07/23 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android