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

2019-11-19 13:14:10

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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>www.VeVB.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.VeVB.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.VeVB.COm/js/2018/html5-css3-3d-img-flash-codes/images/Blade-Runner-poster-art-Harrison-Ford.jpg" alt=""><img src="http://demo.VeVB.COm/js/2018/html5-css3-3d-img-flash-codes/images/2017_alien_covenant_4k-5120x2880-1920x1080.jpg" alt=""><img src="http://demo.VeVB.COm/js/2018/html5-css3-3d-img-flash-codes/images/robocop-1987-wallpaper-2.jpg" alt=""><img src="http://demo.VeVB.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.VeVB.COm/code/HtmlJsRun，测试一下运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery图片操作技巧大全》、《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

上一篇：vue+iview+less 实现换肤功能

下一篇：layer弹出的iframe层在执行完毕后关闭当前弹出层的方法