您好,登錄后才能下訂單哦!
小編給大家分享一下html中實現(xiàn)指示器左右兩側排列的輪播的方法,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
<!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">調查系統(tǒng)</li> <li class="usli" value="1">考試系統(tǒng)</li> <li class="usli" value="2">面試題系統(tǒng)</li> </ul> <p class="usban-ulb" id="usbanLb"> <a href="javascript:;"> <img src="public/img/9-year6.png" alt="調查系統(tǒng)1"> <p class="usban-ula-p">從學習期間,每天老師會在系統(tǒng)內提出當天學習要點,學員必須選擇是否已掌握,如果有學員選擇沒有掌握,系統(tǒng)自動提示該學員某部分知識沒掌握,晚自習老師進行針對性輔導,直到完全學員徹底學會</p> </a> <a href="javascript:;"> <img src="public/img/9-year4.png" alt="考試系統(tǒng)2"> <p class="usban-ula-p">從入學到畢業(yè),采用分幾段進階模式教學,每完成一個階段學習學員必須要通過考試,成績合格才能進行下一階段學習,同時將全部考試和階段測試進行收集分析,生成個人學習成績庫,老師可以在第一時間發(fā)現(xiàn)學員可能在哪個階段遇到學習困難和問題,并及時解決。</p> </a> <a href="javascript:;"> <img src="public/img/9-year1.jpg" alt="面試題系統(tǒng)3"> <p class="usban-ula-p">面試真題庫全部由動力節(jié)點學員收集整理,每月定時更新,每道題目動力節(jié)點老師都會進行詳細解析,提供面試思路,幫助學員入職名企,拿高薪。</p> </a> <a href="javascript:;"> <img src="public/img/9-year2.jpg" alt="評價系統(tǒng)4"> <p class="usban-ula-p">學員登陸系統(tǒng)根據(jù)自己學習感受對老師打分,包括教學質量,教學服務,以及個人意見等5項評價意見進行反饋,學生反饋的信息將直接和授課老師收入掛鉤,從而嚴格約束老師,必須達到授課質量和服務標準要求。 </p> </a> <a href="javascript:;"> <img src="public/img/9-year5.png" alt="智能考勤系統(tǒng)5"> <p class="usban-ula-p">動力節(jié)點智能考勤系統(tǒng),采用了 Ai 人臉識別黑科技與后臺數(shù)據(jù)交互傳遞,學員每天按時打卡后數(shù)據(jù)智能生成到考勤數(shù)據(jù)庫,快速記錄每天出勤情況,可以快速對學員學習進行有效的監(jiān)督的考評。</p> </a> <a href="javascript:;"> <img src="public/img/9-year3.jpg" alt="學員圈子6"> <p class="usban-ula-p">上萬名的 VIP 學員學員交流圈,把優(yōu)秀的人聚集在一起,擴展人脈,讓知識共享,裂變,為己所用。加入動力節(jié)點大家庭學哥,學姐,學弟,學妹,都是你成功路上的寶貴資源</p> </a> </p> <ul class="usban-ula"> <li class="usli" value="3">評價系統(tǒng)</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>
看完了這篇文章,相信你對html中實現(xiàn)指示器左右兩側排列的輪播的方法有了一定的了解,想了解更多相關知識,歡迎關注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經查實,將立刻刪除涉嫌侵權內容。