本文實例講述了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.49028c.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程序設計有所幫助。
新聞熱點
疑難解答
