本篇文章給大家帶來的內容是關於html中如何?指標左右兩側排列的輪播(完整代碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所協助。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>輪播</title> <style>/*us-banner*/.py-aboutUs .aboutUs-ele .us-banner .usban-ula li{ width: 240px; height: 86px; line-height: 86px; background: #05dafb; border-radius: 5px; margin-bottom: 11px; text-align: center; font-size: 17px;}.py-aboutUs .aboutUs-ele .us-banner .usban-ula .hover-li{ background: white;}.py-aboutUs .aboutUs-ele .us-banner .usban-ula li:last-child{ margin-bottom: 0;}.usban-ulb{ width: 384px; height: 244px; overflow: hidden; position: relative; margin-top: 18px;}.usban-ulb>a{ display: block; width: 384px; height: 244px; position: absolute; left: 0; top: 0; z-index: 9;}.usban-ulb>a:first-child{ z-index: 30;}.usban-ulb>a img{ width: 100%; height: 100%;}.usban-ulb>a .usban-ula-p{ width: 384px; line-height: 20px; background: rgba(0,0,0,0.7); font-size: 12px; text-align: left; color: white; box-sizing: border-box; padding: 3px 10px; position: absolute; bottom: 0; left: 0; z-index: 10;}.py-aboutUs .aboutUs-ele .eleven-btn{ width: 267px; height: 65px; line-height: 65px; background-size: 100% 100%; margin: 43px auto; font-size: 18px;}.py-aboutUs .aboutUs-ele .usEle-learn{ width: 1200px; height: 810px; margin: 120px auto;} </style></head><body><p class="us-banner" id="usBanner"> <ul class="usban-ula"> <li class="usli hover-li" value="0">調查系統</li> <li class="usli" value="1">考試系統</li> <li class="usli" value="2">面試題系統</li> </ul> <p class="usban-ulb" id="usbanLb"> <a href="javascript:;"> <img src="public/img/9-year6.png" alt="調查系統1"> <p class="usban-ula-p">從學習期間,每天老師會在系統內提出當天學習要點,學員必須選擇是否已掌握,如果有學員選擇沒有掌握,系統自動提示該學員某部分知識沒掌握,晚自習老師進行針對性輔導,直到完全學員徹底學會</p> </a> <a href="javascript:;"> <img src="public/img/9-year4.png" alt="考試系統2"> <p class="usban-ula-p">從入學到畢業,採用分幾段進階模式教學,每完成一個階段學習學員必須要通過考試,成績合格才能進行下一階段學習,同時將全部考試和階段測試進行收集分析,產生個人學習成績庫,老師可以在第一時間發現學員可能在哪個階段遇到學習困難和問題,並及時解決。</p> </a> <a href="javascript:;"> <img src="public/img/9-year1.jpg" alt="面試題系統3"> <p class="usban-ula-p">面試真題庫全部由動力節點學員收集整理,每月定時更新,每道題目動力節點老師都會進行詳細解析,提供面試思路,協助學員入職名企,拿高薪。</p> </a> <a href="javascript:;"> <img src="public/img/9-year2.jpg" alt="評價系統4"> <p class="usban-ula-p">學員登陸系統根據自己學習感受對老師打分,包括教學品質,教學服務,以及個人意見等5項評價意見進行反饋,學生反饋的資訊將直接和授課老師收入掛鈎,從而嚴格約束老師,必須達到授課品質和服務標準要求。 </p> </a> <a href="javascript:;"> <img src="public/img/9-year5.png" alt="智能考勤系統5"> <p class="usban-ula-p">動力節點智能考勤系統,採用了 Ai Face Service黑科技與後台資料互動傳遞,學員每天按時打卡後資料智能產生到考勤資料庫,快速記錄每天出勤情況,可以快速對學員學習進行有效監督的考評。</p> </a> <a href="javascript:;"> <img src="public/img/9-year3.jpg" alt="學員圈子6"> <p class="usban-ula-p">上萬名的 VIP 學員學員交流圈,把優秀的人聚集在一起,擴充人脈,讓知識共用,裂變,為己所用。加入動力節點大家庭學哥,學姐,學弟,學妹,都是你成功路上的寶貴資源</p> </a> </p> <ul class="usban-ula"> <li class="usli" value="3">評價系統</li> <li class="usli" value="4">智能考勤</li> <li class="usli" value="5">學員圈子</li> </ul></p><script src="public/js/jquery-3.1.1.min.js"></script><script>//關於我們輪播$(function () { var usBoss = 0; var usLen = $("#usbanLb>a").length; var usTime = setInterval(usRunimg,3000); function usRunimg() { usBoss ++; if(usBoss > usLen-1){ usBoss = 0; } $("#usbanLb>a").eq(usBoss).fadeIn(500).siblings().fadeOut(500); var $ulli = $(".usli").removeClass("hover-li"); $ulli.eq(usBoss).addClass("hover-li"); } // 滑鼠移入事件 $("#usBanner").hover(function () { clearInterval(usTime); },function () { usTime = setInterval(usRunimg,3000); }); // 移入點點後顯示相應圖片 $(".usli").mouseenter(function () { usBoss = $(this).attr('value'); // 換圖片 $("#usbanLb>a").eq(usBoss).fadeIn(500).siblings().fadeOut(500); var $ulli = $(".usli").removeClass("hover-li"); $ulli.eq(usBoss).addClass("hover-li"); });});</script></body></html>