前面介绍了原生js实现的轮播图，今天就试着用jquery做了个轮播图，方法都一样，但jquery实现却比js方便了许多
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> jQuery轮播图</title> <script src="https://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> <img src="https://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/Guardians-of-the-Galaxy-Poster-High-Res.jpg" alt=""> <img src="https://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/Blade-Runner-poster-art-Harrison-Ford.jpg" alt=""> <img src="https://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/2017_alien_covenant_4k-5120x2880-1920x1080.jpg" alt=""> <img src="https://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/robocop-1987-wallpaper-2.jpg" alt=""> <img src="https://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg" alt=""> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div><span>></span></div> <div><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代码运行工具：，测试一下运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery图片操作技巧大全》、《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》