jq實現輪播淡入淡出
阿新 • • 發佈：2018-12-21
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <style> * { padding: 0; margin: 0; } .banner { position: relative; width: 810px; height: 320px; margin: 50px auto; background: grey; overflow: hidden; } .img-list { list-style: none; position: absolute; left: 0; top: 0; width: 810px; height: 320px; } .img-list li { position: absolute; left: 0; top: 0; display: none; } .banner-nav-list { list-style: none; position: absolute; right: 100px; bottom: 50px; } .banner-nav-list li { background: red; float: left; width: 20px; height: 20px; margin-right: 10px; cursor: pointer; text-align: center; } .banner-nav-list li.active { background: yellow; } .banner .toLeft { width: 60px; height: 60px; background: url(images/btn.gif); position: absolute; left: 30px; top: 120px; /*opacity: 0;*/ } .banner .toRight { width: 60px; height: 60px; background: url(images/btn.gif) 0px 60px; position: absolute; right: 30px; top: 120px; /*opacity: 0;*/ } #arr { opacity: 0; } </style> </head> <body> <div class="banner" id="banner"> <ul class="img-list" id="img_list"> <li index="0" style="display:block"><img src="images/001.jpg"></li> <li index="1"><img src="images/002.jpg"></li> <li index="2"><img src="images/003.jpg"></li> <li index="3"><img src="images/004.jpg"></li> <li index="0"><img src="images/002.jpg"></li> </ul> <ul class="banner-nav-list" id="banner_nav_list"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <div id="arr"> <div class="toLeft" id="toLeft"></div> <div class="toRight" id="toRight"></div> </div> </div> </body> </html> <script src="jquery.min.js"></script> <script type="text/javascript"> var banner = $("#banner"); var img_list = $("#img_list"); var img_list_li = $("#img_list li"); var banner_nav_list = $("#banner_nav_list"); var banner_nav_list_li = $("#banner_nav_list li"); var arr = $("#arr"); var toLeft = $("#toLeft"); var toRight = $("#toRight"); var index = 0; // 無縫輪播------------------------------------------------------------- // autoPlay(); var timer = setInterval(autoPlay, 1000); function autoPlay() { $(img_list_li[index]).fadeOut().next().fadeIn(); index++ if (index == 4) { index = 0; $(img_list_li[4]).css({ "display": "none" }); $(img_list_li[0]).css({ "display": "block" }) } banner_nav_list_li.removeClass(); $(banner_nav_list_li[index]).addClass("active"); } // 滑鼠移入移出大容器 ，定時器停止和啟動定時器 ，完成 箭頭的顯示和隱藏--------------- banner.mouseover(function () { toLeft.unbind("click"); toRight.unbind("click"); clearInterval(timer); arr.css("opacity", "1"); // 點選左右按鈕 完成圖片移動 和 數字背景的改變------------------------------- toLeft.click(function () { if (index == 0) { index = 0; } else { $(img_list_li[index]).fadeOut().prev().fadeIn(); index--; } banner_nav_list_li.removeClass(); $(banner_nav_list_li[index]).addClass("active"); }) toRight.click(function () { if (index == 3) { index = 3; } else { $(img_list_li[index]).fadeOut().next().fadeIn(); index++; } banner_nav_list_li.removeClass(); $(banner_nav_list_li[index]).addClass("active") }) // 滑鼠運算元字 找到對應的圖片----------------------------------- banner_nav_list_li.mouseover(function () { if (index != $(this).html() - 1) { $(img_list_li[index]).fadeOut(); index = $(this).html() - 1; banner_nav_list_li.removeClass(); $(banner_nav_list_li[index]).addClass("active"); $(img_list_li[index]).fadeIn(); } }) }) banner.mouseout(function () { timer = setInterval(autoPlay, 1000); arr.css("opacity", "0"); }) </script>