Static carousel-HTML Tutorial-php.cn

3 4 5 </title&"/><meta property="og:local" content="faq"> <meta property="og:title" content="Static carousel-HTML Tutorial-php.cn"> <meta property="og:description" content="1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title&"> <meta property="og:url" content="https://m.php.cn/faq/374194.html"> <meta property="og:image" content="https://m.php.cn/static/images/logo.png"> <meta property="og:site_name" content="php.cn"> <meta property="og:type" content="website"> <link rel="canonical" href="https://www.php.cn/faq/374194.html"/> <link rel="alternate" hrefLang="zh-cn" href="https://m.php.cn/zh/faq/374194.html" /> <link rel="alternate" hrefLang="en" href="https://m.php.cn/faq/374194.html" /> <link rel="alternate" hrefLang="zh-tw" href="https://m.php.cn/zh-tw/faq/374194.html" /> <link rel="alternate" hrefLang="ja" href="https://m.php.cn/ja/faq/374194.html" /> <link rel="alternate" hrefLang="ko" href="https://m.php.cn/ko/faq/374194.html" /> <link rel="alternate" hrefLang="ms" href="https://m.php.cn/ms/faq/374194.html" /> <link rel="alternate" hrefLang="fr" href="https://m.php.cn/fr/faq/374194.html" /> <link rel="alternate" hrefLang="de" href="https://m.php.cn/de/faq/374194.html" /> <meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=1" /><meta name="applicable-device" content="mobile" /><link rel="stylesheet" href="/static/css/style.css?4.5.31"><link href="/static/front/mobcss/newphpcommon.css?1.1" type="text/css" rel="stylesheet"/><link href="/static/front/mobcss/swiper.min.css" type="text/css" rel="stylesheet"/><link href="/static/front/mobcss/newphp.css?1.2" type="text/css" rel="stylesheet"/><link href="/static/css/global.css" type="text/css" rel="stylesheet"/><link href="/static/layui/css/layui.css" type="text/css" rel="stylesheet"/><link href="/static/mobcss/mobindex3.css" type="text/css" rel="stylesheet"/><script src="/static/front/mobjs/jquery-1.6.1.min.js"></script><script src="/static/front/mobjs/swiper.min.js"></script><script src="/static/front/mobjs/newphpcommon.js"></script><link rel="canonical" href="https://www.php.cn/faq/374194.html"/> <link rel="alternate" hrefLang="zh-cn" href="https://m.php.cn/zh/faq/374194.html" /> <link rel="alternate" hrefLang="en" href="https://m.php.cn/faq/374194.html" /> <link rel="alternate" hrefLang="zh-tw" href="https://m.php.cn/zh-tw/faq/374194.html" /> <link rel="alternate" hrefLang="ja" href="https://m.php.cn/ja/faq/374194.html" /> <link rel="alternate" hrefLang="ko" href="https://m.php.cn/ko/faq/374194.html" /> <link rel="alternate" hrefLang="ms" href="https://m.php.cn/ms/faq/374194.html" /> <link rel="alternate" hrefLang="fr" href="https://m.php.cn/fr/faq/374194.html" /> <link rel="alternate" hrefLang="de" href="https://m.php.cn/de/faq/374194.html" /> <script> var canshu = { SeeMore:'See more', FoldUp:'Fold up', Choice:'LANGUAGE', wait:'Loading, please wait~', LoginFirst:"Please log in first", needKeyword:'Enter keyword search', emailPhoneError:'Please enter the correct phone or email address', missPwd:'Please enter the password', emailError:'Please enter your correct email address', VerCode:"Please enter the verification code", getCode:'Sending', pwdError:'Incorrect password format', TwoPassNotMatch:'Two passwords do not match', Bindemail:'Bind email', resetpassword:'reset password', ConfirmPass:'Confirm Password', pwdCheck:'Please enter 6-18 letters or numbers', Editinfor: 'Edit personal information', trimContent:'Please enter content', titleCheck:'Title should be at least 5 words long', choiceLang:'Please select a language classification', Secondreply:'reply', NetWorkError:'Network error, please try again later!', keywordSearch:'Enter keyword search', all_lang_string:'zh|en|zh-tw|ja|ko|ms|fr|de', Next:'Next', Previous:'Previous' }; </script><script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl; f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-WWVXRJPW'); </script><script async src="https://www.googletagmanager.com/gtag/js?id=G-H42EVCYBJC"></script><script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-H42EVCYBJC'); </script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5902227090019525" crossorigin="anonymous"></script><script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"WebSite","url":"https:\/\/m.php.cn\/","potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/m.php.cn\/search?word={search_term_string}"},"query-input":"required name=search_term_string"}}</script><meta property="article:author" content="PHP中文网" /><meta property="article:published_first" content=",https://www.php.cn/faq/374194.html" /><link rel="stylesheet" href="/static/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css?1"><link rel="stylesheet" href="/static/ueditor/third-party/SyntaxHighlighter/shCoreDefault1.css"><link href="/static/mobcss/newphp.css" type="text/css" rel="stylesheet"/><script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js"></script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script><script> var xnb_name = 'Virtual currency'; </script><script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","headline":"Static carousel","description":"1 <!DOCTYPE html> 2 <html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"> 3 <head> 4 <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\"\/> 5 <title><\/title&","image":["img\/1_1.jpg","img\/1_2.jpg","img\/1_3.png","img\/1_4.jpg","img\/1_5.jpg"],"datePublished":"2017-07-14T18:10:03+8:00","author":{"url":"https:\/\/m.php.cn\/member\/1.html","name":"PHP中文网"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/m.php.cn\/faq\/374194.html"},"url":"https:\/\/m.php.cn\/faq\/374194.html","articleBody":"<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080\"> 1<\/span> <span style=\"color: #800000\">\n<\/span><span style=\"color: #008080\"> 2<\/span> <span style=\"color: #800000\">\n<\/span><span style=\"color: #008080\"> 3<\/span> <span style=\"color: #800000\">\n<\/span><span style=\"color: #008080\"> 4<\/span> <span style=\"color: #800000\"><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\">\n<\/span><span style=\"color: #008080\"> 5<\/span> <span style=\"color: #800000\"><title><\/title>\n<\/span><span style=\"color: #008080\"> 6<\/span> <span style=\"color: #800000\"><link href=\"css\/demo.css\" rel=\"stylesheet\">\n<\/span><span style=\"color: #008080\"> 7<\/span> <span style=\"color: #800000\">\n<\/span><span style=\"color: #008080\"> 8<\/span> <span style=\"color: #800000\">\n<\/span><span style=\"color: #008080\"> 9<\/span> <span style=\"color: #800000\"><div id=\"dlunbo\">\n<span style=\"color: #008080\">10<\/span> <span style=\"color: #800000\"><div id=\"igs\">\n<span style=\"color: #008080\">11<\/span> <span style=\"color: #800000\"><div class=\"ig\"><img src=\"img\/1_1.jpg\" alt=\"Static carousel\" ><\/div>\n<\/span><span style=\"color: #008080\">12<\/span> <span style=\"color: #800000\"><div class=\"ig\"><img src=\"img\/1_2.jpg\" alt=\"Static carousel\" ><\/div>\n<\/span><span style=\"color: #008080\">13<\/span> <span style=\"color: #800000\"><div class=\"ig\"><img src=\"img\/1_3.png\" alt=\"Static carousel\" ><\/div>\n<\/span><span style=\"color: #008080\">14<\/span> <span style=\"color: #800000\"><div class=\"ig\"><img src=\"img\/1_4.jpg\" alt=\"Static carousel\" ><\/div>\n<\/span><span style=\"color: #008080\">15<\/span> <span style=\"color: #800000\"><div class=\"ig\"><img src=\"img\/1_5.jpg\" alt=\"Static carousel\" ><\/div>\n<\/span><span style=\"color: #008080\">16<\/span> <span style=\"color: #800000\"><\/span>\n<\/div>\n<\/span><span style=\"color: #008080\">17<\/span> <span style=\"color: #800000\"><ul id=\"tabs\">\n<\/ul><\/span><span style=\"color: #008080\">18<\/span> <span style=\"color: #800000\"><li class=\"tab\">\n<\/span><span style=\"color: #008080\">19<\/span> <span style=\"color: #800000\"><li class=\"tab\">\n<\/span><span style=\"color: #008080\">20<\/span> <span style=\"color: #800000\"><li class=\"tab\">\n<\/span><span style=\"color: #008080\">21<\/span> <span style=\"color: #800000\"><li class=\"tab\">\n<\/span><span style=\"color: #008080\">22<\/span> <span style=\"color: #800000\"><li class=\"tab\">\n<\/span><span style=\"color: #008080\">23<\/span> <span style=\"color: #800000\">\n<\/span><span style=\"color: #008080\">24<\/span> <span style=\"color: #800000\"><div class=\"btn btn1\"><<\/div>\n<\/span><span style=\"color: #008080\">25<\/span> <span style=\"color: #800000\"><div class=\"btn btn2\">><\/div>\n<\/span><span style=\"color: #008080\">26<\/span> <span style=\"color: #800000\"><\/span>\n<\/div>\n<\/span><span style=\"color: #008080\">27<\/span> <span style=\"color: #800000\">\n<\/span><span style=\"color: #008080\">28<\/span> <span style=\"color: #800000\"><br><\/span><\/pre>\n<\/div>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080\"> 1<\/span> <span style=\"color: #800000\">*<\/span>{\n<span style=\"color: #008080\"> 2<\/span> <span style=\"color: #ff0000\">margin<\/span>:<span style=\"color: #0000ff\">0px<\/span>;\n<span style=\"color: #008080\"> 3<\/span> <span style=\"color: #ff0000\">padding<\/span>:<span style=\"color: #0000ff\">0px<\/span>;\n<span style=\"color: #008080\"> 4<\/span> <span style=\"color: #ff0000\">list-style-type<\/span>:<span style=\"color: #0000ff\">none<\/span>;\n<span style=\"color: #008080\"> 5<\/span> }\n<span style=\"color: #008080\"> 6<\/span> <span style=\"color: #800000\">#dlunbo<\/span>{\n<span style=\"color: #008080\"> 7<\/span> <span style=\"color: #ff0000\">width<\/span>:<span style=\"color: #0000ff\">500px<\/span>;\n<span style=\"color: #008080\"> 8<\/span> <span style=\"color: #ff0000\">height<\/span>:<span style=\"color: #0000ff\">330px<\/span>;\n<span style=\"color: #008080\"> 9<\/span> <span style=\"color: #ff0000\">position<\/span>:<span style=\"color: #0000ff\">absolute<\/span>;\n<span style=\"color: #008080\">10<\/span> <span style=\"color: #ff0000\">top<\/span>:<span style=\"color: #0000ff\">50%<\/span>;\n<span style=\"color: #008080\">11<\/span> <span style=\"color: #ff0000\">margin-top<\/span>:<span style=\"color: #0000ff\">-166px<\/span>;\n<span style=\"color: #008080\">12<\/span> <span style=\"color: #ff0000\">left<\/span>:<span style=\"color: #0000ff\">50%<\/span>;\n<span style=\"color: #008080\">13<\/span> <span style=\"color: #ff0000\">margin-left<\/span>:<span style=\"color: #0000ff\">-250px<\/span>;\n<span style=\"color: #008080\">14<\/span> }\n<span style=\"color: #008080\">15<\/span> <span style=\"color: #800000\">.ig<\/span>{\n<span style=\"color: #008080\">16<\/span> <span style=\"color: #ff0000\">position<\/span>:<span style=\"color: #0000ff\">absolute<\/span>;\n<span style=\"color: #008080\">17<\/span> }\n<span style=\"color: #008080\">18<\/span> <span style=\"color: #800000\">img<\/span>{\n<span style=\"color: #008080\">19<\/span> <span style=\"color: #ff0000\">width<\/span>:<span style=\"color: #0000ff\">500px<\/span>;\n<span style=\"color: #008080\">20<\/span> <span style=\"color: #ff0000\">height<\/span>:<span style=\"color: #0000ff\">330px<\/span>;\n<span style=\"color: #008080\">21<\/span> }\n<span style=\"color: #008080\">22<\/span> <span style=\"color: #800000\">#tabs<\/span>{\n<span style=\"color: #008080\">23<\/span> <span style=\"color: #ff0000\">position<\/span>:<span style=\"color: #0000ff\">absolute<\/span>;\n<span style=\"color: #008080\">24<\/span> <span style=\"color: #ff0000\">top<\/span>:<span style=\"color: #0000ff\">300px<\/span>;\n<span style=\"color: #008080\">25<\/span> <span style=\"color: #ff0000\">left<\/span>:<span style=\"color: #0000ff\">200px<\/span>;\n<span style=\"color: #008080\">26<\/span> }\n<span style=\"color: #008080\">27<\/span> <span style=\"color: #800000\">.tab<\/span>{\n<span style=\"color: #008080\">28<\/span> <span style=\"color: #ff0000\">width<\/span>:<span style=\"color: #0000ff\">20px<\/span>;\n<span style=\"color: #008080\">29<\/span> <span style=\"color: #ff0000\">height<\/span>:<span style=\"color: #0000ff\">20px<\/span>;\n<span style=\"color: #008080\">30<\/span> <span style=\"color: #ff0000\">border<\/span>:<span style=\"color: #0000ff\">solid 1px #ffffff<\/span>;\n<span style=\"color: #008080\">31<\/span> <span style=\"color: #ff0000\">float<\/span>:<span style=\"color: #0000ff\">left<\/span>;\n<span style=\"color: #008080\">32<\/span> <span style=\"color: #ff0000\">margin-left<\/span>:<span style=\"color: #0000ff\">5px<\/span>;\n<span style=\"color: #008080\">33<\/span> <span style=\"color: #ff0000\">border-radius<\/span>:<span style=\"color: #0000ff\">100%<\/span>;\n<span style=\"color: #008080\">34<\/span> <span style=\"color: #ff0000\">cursor<\/span>:<span style=\"color: #0000ff\">pointer<\/span>;\n<span style=\"color: #008080\">35<\/span> }\n<span style=\"color: #008080\">36<\/span> <span style=\"color: #800000\">.btn<\/span>{\n<span style=\"color: #008080\">37<\/span> <span style=\"color: #ff0000\">width<\/span>:<span style=\"color: #0000ff\">30px<\/span>;\n<span style=\"color: #008080\">38<\/span> <span style=\"color: #ff0000\">height<\/span>:<span style=\"color: #0000ff\">50px<\/span>;\n<span style=\"color: #008080\">39<\/span> <span style=\"color: #ff0000\">position<\/span>:<span style=\"color: #0000ff\">absolute<\/span>;\n<span style=\"color: #008080\">40<\/span> <span style=\"color: #ff0000\">background<\/span>:<span style=\"color: #0000ff\">rgba(0,0,0,0.5)<\/span>;\n<span style=\"color: #008080\">41<\/span> <span style=\"color: #ff0000\">color<\/span>:<span style=\"color: #0000ff\">#fff<\/span>;\n<span style=\"color: #008080\">42<\/span> <span style=\"color: #ff0000\">text-align<\/span>:<span style=\"color: #0000ff\">center<\/span>;\n<span style=\"color: #008080\">43<\/span> <span style=\"color: #ff0000\">line-height<\/span>:<span style=\"color: #0000ff\">50px<\/span>;\n<span style=\"color: #008080\">44<\/span> <span style=\"color: #ff0000\">font-size<\/span>:<span style=\"color: #0000ff\">30px<\/span>;\n<span style=\"color: #008080\">45<\/span> <span style=\"color: #ff0000\">top<\/span>:<span style=\"color: #0000ff\">50%<\/span>;\n<span style=\"color: #008080\">46<\/span> <span style=\"color: #ff0000\">margin-top<\/span>:<span style=\"color: #0000ff\">-25px<\/span>;\n<span style=\"color: #008080\">47<\/span> <span style=\"color: #ff0000\">cursor<\/span>:<span style=\"color: #0000ff\">pointer<\/span>;\n<span style=\"color: #008080\">48<\/span> }\n<span style=\"color: #008080\">49<\/span> <span style=\"color: #800000\">.btn1<\/span>{\n<span style=\"color: #008080\">50<\/span> <span style=\"color: #ff0000\">left<\/span>:<span style=\"color: #0000ff\">0px<\/span>;\n<span style=\"color: #008080\">51<\/span> }\n<span style=\"color: #008080\">52<\/span> <span style=\"color: #800000\">.btn2<\/span>{\n<span style=\"color: #008080\">53<\/span> <span style=\"color: #ff0000\">right<\/span>:<span style=\"color: #0000ff\">0px<\/span>;\n<span style=\"color: #008080\">54<\/span> }<\/pre>\n<\/div>\n<p> <\/p>"}</script><script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https:\/\/m.php.cn\/","name":"Home"}},{"@type":"ListItem","position":2,"item":{"@id":"https:\/\/m.php.cn\/web-designer.html","name":"Web Front-end"}},{"@type":"ListItem","position":3,"item":{"@id":"https:\/\/m.php.cn\/div-tutorial.html","name":"HTML Tutorial"}},{"@type":"ListItem","position":4,"item":{"@id":"https:\/\/m.php.cn\/faq\/374194.html","name":"Static carousel"}}]}</script></head><body data-commit-time="2023-12-28T14:50:12+08:00" class="body2_2"><link rel="stylesheet" type="text/css" href="/static/csshwm/m_stylehw.css"><header><div class="head"><div class="haed_left"><div class="haed_logo"><a href="https://m.php.cn/" title="php.cn" class="haed_logo_a"><img src="/static/imghwm/logo.png" alt="php.cn" class="haed_logoimg"></a></div></div><div class="search_div search_div_top2"><input id="key_words" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="" onkeydown="if (event.keyCode == 13) searchs('en')"/><a onclick="searchs('en')" href="javascript:;" title="search"><img onerror="this.onerror=''; this.src='static/imghwm/default1.png'" src="/static/imghwm/find.png" alt="search"></a></div><div class="head_right"><button type="button" class="layui-btn layui-btn-primary headerlan headlanmax lan1" id="lan1sp" lay-on="test-offset-r"><img src="/static/imghwm/m_menu.png" alt=""></button><div id="m_menu" class="m_menu" style="display: none;"><div class="m_editormain12main_top"><img src="/static/imghwm/logo.png" alt="logo"><a href="javascript:;" class="m_editormain12main_topi" id="m_editormain12main_topi_sp"><i class="layui-icon layui-icon-close"></i></a></div><div class="layui-panel m_menu_main"><ul class="layui-menu" id="demo-menu"><li class="layui-menu-item-group layui-menu-item-up m_menus" lay-options="{type: 'group'}"><div class="layui-menu-body-title m_menus_title">Community<i class="layui-icon layui-icon-down"></i></div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/article.html" title="Articles">Articles</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/faq/zt" title="Topics">Topics</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/wenda.html" title="Q&A">Q&A</a></div></li></ul></li><li class="layui-menu-item-divider"></li><li class="layui-menu-item-group layui-menu-item-up m_menus" lay-options="{type: 'group'}"><div class="layui-menu-body-title m_menus_title">Learn<i class="layui-icon layui-icon-down"></i></div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/course.html" title="Course">Course</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/dic/29.html" title="Programming Dictionary">Programming Dictionary</a></div></li></ul></li><li class="layui-menu-item-divider"></li><li class="layui-menu-item-group layui-menu-item-up m_menus" lay-options="{type: 'group'}"><div class="layui-menu-body-title m_menus_title">Tools Library<i class="layui-icon layui-icon-down"></i></div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/toolset/development-tools" title="Development tools">Development tools</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/toolset/website-source-code" title="Website Source Code">Website Source Code</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/toolset/php-libraries" title="PHP Libraries">PHP Libraries</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/toolset/js-special-effects" title="JS special effects">JS special effects</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/toolset/website-materials" title="Website Materials">Website Materials</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/toolset/extension-plug-ins" title="Extension plug-ins">Extension plug-ins</a></div></li></ul></li><li class="layui-menu-item-divider"></li><li lay-options="{id: 100}"><div class="layui-menu-body-title m_menus_oth"><a href="https://m.php.cn/ai" title="AI Tools">AI Tools</a></div></li><li class="layui-menu-item-divider"></li><li class="layui-menu-item-group layui-menu-item-up m_menus" lay-options="{type: 'group'}"><div class="layui-menu-body-title m_menus_title">Leisure<i class="layui-icon layui-icon-down"></i></div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/game" title="Game Download">Game Download</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/mobile-game-tutorial/" title="Game Tutorials">Game Tutorials</a></div></li></ul></li><li class="layui-menu-item-divider"></li></ul></div><div class="m_menu_button m_menu_button_login"><a href="https://m.php.cn/login" title="Login">Log in</a></div><div class="m_menu_button m_menu_button_lang"><button type="button" class="layui-btn layui-btn-primary headerlan headlanmax lan1" id="lan1" lay-on="page2">English<i class="layui-icon layui-icon-triangle-d"></i></button></div></div><div class="m_menu_lang" id="m_menu_lang" style="display: none;"><div class="m_editormain12main_top"><img src="/static/imghwm/logo.png" alt="logo"><a href="javascript:;" class="m_editormain12main_topi" id="m_editormain12main_topi_lan"><i class="layui-icon layui-icon-close"></i></a></div><div class="m_menu_lang_main"><a href="javascript:setlang('zh-cn');" class="m_menu_lang_mains">简体中文<span>zh-cn</span></a><a href="javascript:;" class="m_menu_lang_mains">English<span>en</span></a><a href="javascript:setlang('zh-tw');" class="m_menu_lang_mains">繁体中文<span>zh-tw</span></a><a href="javascript:setlang('ja');" class="m_menu_lang_mains">日本語<span>ja</span></a><a href="javascript:setlang('ko');" class="m_menu_lang_mains">한국어<span>ko</span></a><a href="javascript:setlang('ms');" class="m_menu_lang_mains">Melayu<span>ms</span></a><a href="javascript:setlang('fr');" class="m_menu_lang_mains">Français<span>fr</span></a><a href="javascript:setlang('de');" class="m_menu_lang_mains">Deutsch<span>de</span></a></div></div></div></div></header><script> document.getElementById('lan1sp').addEventListener('click', function (event) { event.preventDefault(); var elements = document.getElementsByClassName('m_menu'); for (var i = 0; i < elements.length; i++) { elements[i].style.display = 'block'; } }); document.getElementById('m_editormain12main_topi_sp').addEventListener('click', function (event) { event.preventDefault(); var elements = document.getElementsByClassName('m_menu'); for (var i = 0; i < elements.length; i++) { elements[i].style.display = 'none'; } }); document.getElementById('lan1').addEventListener('click', function (event) { event.preventDefault(); var elements = document.getElementsByClassName('m_menu_lang'); for (var i = 0; i < elements.length; i++) { elements[i].style.display = 'block'; } }); document.getElementById('m_editormain12main_topi_lan').addEventListener('click', function (event) { event.preventDefault(); var elements = document.getElementsByClassName('m_menu_lang'); for (var i = 0; i < elements.length; i++) { elements[i].style.display = 'none'; } }); </script><main class="m_phpTopic_Details m_phpArticle_Details"><div class="Article_Details_main1M"><div class="phpgenera_Details_mainL1"><a href="https://m.php.cn/" title="Home" class="phpgenera_Details_mainL1a">Home</a><img class="lazy" data-src="/static/imghwm/top_right.png" src="/static/imghw/default1.png" alt="" /><a href="https://m.php.cn/web-designer.html" class="phpgenera_Details_mainL1a">Web Front-end</a><img class="lazy" data-src="/static/imghwm/top_right.png" src="/static/imghw/default1.png" alt="" /><a href="https://m.php.cn/div-tutorial.html" class="phpgenera_Details_mainL1a">HTML Tutorial</a><img class="lazy" data-src="/static/imghwm/top_right.png" src="/static/imghw/default1.png" alt="" /><span>Static carousel</span></div><div class="Articlelist_txts"><div class="Articlelist_txts_info"><h1><a href="" title="" class="Articlelist_txts_title">Static carousel</a></h1><div class="Articlelist_txts_info_head"><div class="author_info"><a href="https://m.php.cn/member/1.html" class="author_avatar"><img class="lazy" data-src="https://img.php.cn/upload/avatar/000/000/001/6251028808086368.png" alt="PHP中文网" src="/static/imghw/default1.png" alt="author avatar" onerror="this.onerror=''; this.src='/static/imghw/default1.png'"></a><div class="author_detail"><a href="https://m.php.cn/member/1.html" class="author_name">PHP中文网</a></div></div></div><span class="Articlelist_txts_time">Jul 14, 2017 pm 06:10 PM</span><div class="Articlelist_txts_infos"><span class="Articlelist_txts_infoss on">static</span></div></div></div><hr /><div class="article_main wenda-list"><div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><span style="color: #008080"> 1</span> <span style="color: #800000"> </span><span style="color: #008080"> 2</span> <span style="color: #800000"> </span><span style="color: #008080"> 3</span> <span style="color: #800000"> </span><span style="color: #008080"> 4</span> <span style="color: #800000"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </span><span style="color: #008080"> 5</span> <span style="color: #800000"><title></title> </span><span style="color: #008080"> 6</span> <span style="color: #800000"><link href="css/demo.css" rel="stylesheet"> </span><span style="color: #008080"> 7</span> <span style="color: #800000"> </span><span style="color: #008080"> 8</span> <span style="color: #800000"> </span><span style="color: #008080"> 9</span> <span style="color: #800000"><div id="dlunbo"> <span style="color: #008080">10</span> <span style="color: #800000"><div id="igs"> <span style="color: #008080">11</span> <span style="color: #800000"><div class="ig"><img src="/static/imghwm/default1.png" data-src="img/1_1.jpg" class="lazy" alt="Static carousel" ></div> </span><span style="color: #008080">12</span> <span style="color: #800000"><div class="ig"><img src="/static/imghwm/default1.png" data-src="img/1_2.jpg" class="lazy" alt="Static carousel" ></div> </span><span style="color: #008080">13</span> <span style="color: #800000"><div class="ig"><img src="/static/imghwm/default1.png" data-src="img/1_3.png" class="lazy" alt="Static carousel" ></div> </span><span style="color: #008080">14</span> <span style="color: #800000"><div class="ig"><img src="/static/imghwm/default1.png" data-src="img/1_4.jpg" class="lazy" alt="Static carousel" ></div> </span><span style="color: #008080">15</span> <span style="color: #800000"><div class="ig"><img src="/static/imghwm/default1.png" data-src="img/1_5.jpg" class="lazy" alt="Static carousel" ></div> </span><span style="color: #008080">16</span> <span style="color: #800000"></span> </div> </span><span style="color: #008080">17</span> <span style="color: #800000"><ul id="tabs"> </ul></span><span style="color: #008080">18</span> <span style="color: #800000"><li class="tab"> </span><span style="color: #008080">19</span> <span style="color: #800000"><li class="tab"> </span><span style="color: #008080">20</span> <span style="color: #800000"><li class="tab"> </span><span style="color: #008080">21</span> <span style="color: #800000"><li class="tab"> </span><span style="color: #008080">22</span> <span style="color: #800000"><li class="tab"> </span><span style="color: #008080">23</span> <span style="color: #800000"> </span><span style="color: #008080">24</span> <span style="color: #800000"><div class="btn btn1"><</div> </span><span style="color: #008080">25</span> <span style="color: #800000"><div class="btn btn2">></div> </span><span style="color: #008080">26</span> <span style="color: #800000"></span> </div> </span><span style="color: #008080">27</span> <span style="color: #800000"> </span><span style="color: #008080">28</span> <span style="color: #800000"><br></span></pre> </div> <div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><span style="color: #008080"> 1</span> <span style="color: #800000">*</span>{ <span style="color: #008080"> 2</span> <span style="color: #ff0000">margin</span>:<span style="color: #0000ff">0px</span>; <span style="color: #008080"> 3</span> <span style="color: #ff0000">padding</span>:<span style="color: #0000ff">0px</span>; <span style="color: #008080"> 4</span> <span style="color: #ff0000">list-style-type</span>:<span style="color: #0000ff">none</span>; <span style="color: #008080"> 5</span> } <span style="color: #008080"> 6</span> <span style="color: #800000">#dlunbo</span>{ <span style="color: #008080"> 7</span> <span style="color: #ff0000">width</span>:<span style="color: #0000ff">500px</span>; <span style="color: #008080"> 8</span> <span style="color: #ff0000">height</span>:<span style="color: #0000ff">330px</span>; <span style="color: #008080"> 9</span> <span style="color: #ff0000">position</span>:<span style="color: #0000ff">absolute</span>; <span style="color: #008080">10</span> <span style="color: #ff0000">top</span>:<span style="color: #0000ff">50%</span>; <span style="color: #008080">11</span> <span style="color: #ff0000">margin-top</span>:<span style="color: #0000ff">-166px</span>; <span style="color: #008080">12</span> <span style="color: #ff0000">left</span>:<span style="color: #0000ff">50%</span>; <span style="color: #008080">13</span> <span style="color: #ff0000">margin-left</span>:<span style="color: #0000ff">-250px</span>; <span style="color: #008080">14</span> } <span style="color: #008080">15</span> <span style="color: #800000">.ig</span>{ <span style="color: #008080">16</span> <span style="color: #ff0000">position</span>:<span style="color: #0000ff">absolute</span>; <span style="color: #008080">17</span> } <span style="color: #008080">18</span> <span style="color: #800000">img</span>{ <span style="color: #008080">19</span> <span style="color: #ff0000">width</span>:<span style="color: #0000ff">500px</span>; <span style="color: #008080">20</span> <span style="color: #ff0000">height</span>:<span style="color: #0000ff">330px</span>; <span style="color: #008080">21</span> } <span style="color: #008080">22</span> <span style="color: #800000">#tabs</span>{ <span style="color: #008080">23</span> <span style="color: #ff0000">position</span>:<span style="color: #0000ff">absolute</span>; <span style="color: #008080">24</span> <span style="color: #ff0000">top</span>:<span style="color: #0000ff">300px</span>; <span style="color: #008080">25</span> <span style="color: #ff0000">left</span>:<span style="color: #0000ff">200px</span>; <span style="color: #008080">26</span> } <span style="color: #008080">27</span> <span style="color: #800000">.tab</span>{ <span style="color: #008080">28</span> <span style="color: #ff0000">width</span>:<span style="color: #0000ff">20px</span>; <span style="color: #008080">29</span> <span style="color: #ff0000">height</span>:<span style="color: #0000ff">20px</span>; <span style="color: #008080">30</span> <span style="color: #ff0000">border</span>:<span style="color: #0000ff">solid 1px #ffffff</span>; <span style="color: #008080">31</span> <span style="color: #ff0000">float</span>:<span style="color: #0000ff">left</span>; <span style="color: #008080">32</span> <span style="color: #ff0000">margin-left</span>:<span style="color: #0000ff">5px</span>; <span style="color: #008080">33</span> <span style="color: #ff0000">border-radius</span>:<span style="color: #0000ff">100%</span>; <span style="color: #008080">34</span> <span style="color: #ff0000">cursor</span>:<span style="color: #0000ff">pointer</span>; <span style="color: #008080">35</span> } <span style="color: #008080">36</span> <span style="color: #800000">.btn</span>{ <span style="color: #008080">37</span> <span style="color: #ff0000">width</span>:<span style="color: #0000ff">30px</span>; <span style="color: #008080">38</span> <span style="color: #ff0000">height</span>:<span style="color: #0000ff">50px</span>; <span style="color: #008080">39</span> <span style="color: #ff0000">position</span>:<span style="color: #0000ff">absolute</span>; <span style="color: #008080">40</span> <span style="color: #ff0000">background</span>:<span style="color: #0000ff">rgba(0,0,0,0.5)</span>; <span style="color: #008080">41</span> <span style="color: #ff0000">color</span>:<span style="color: #0000ff">#fff</span>; <span style="color: #008080">42</span> <span style="color: #ff0000">text-align</span>:<span style="color: #0000ff">center</span>; <span style="color: #008080">43</span> <span style="color: #ff0000">line-height</span>:<span style="color: #0000ff">50px</span>; <span style="color: #008080">44</span> <span style="color: #ff0000">font-size</span>:<span style="color: #0000ff">30px</span>; <span style="color: #008080">45</span> <span style="color: #ff0000">top</span>:<span style="color: #0000ff">50%</span>; <span style="color: #008080">46</span> <span style="color: #ff0000">margin-top</span>:<span style="color: #0000ff">-25px</span>; <span style="color: #008080">47</span> <span style="color: #ff0000">cursor</span>:<span style="color: #0000ff">pointer</span>; <span style="color: #008080">48</span> } <span style="color: #008080">49</span> <span style="color: #800000">.btn1</span>{ <span style="color: #008080">50</span> <span style="color: #ff0000">left</span>:<span style="color: #0000ff">0px</span>; <span style="color: #008080">51</span> } <span style="color: #008080">52</span> <span style="color: #800000">.btn2</span>{ <span style="color: #008080">53</span> <span style="color: #ff0000">right</span>:<span style="color: #0000ff">0px</span>; <span style="color: #008080">54</span> }</pre> </div> <p> </p><p>The above is the detailed content of Static carousel. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="wzconShengming_sp"><div class="bzsmdiv_sp">Statement</div><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="phpgenera_Details_mainL4"><div class="phpmain1_2_top"><a href="javascript:void(0);" class="phpmain1_2_top_title">Related Article<img class="lazy" data-src="/static/imghwm/index2_title2.png" src="/static/imghw/default1.png" alt="" /></a></div><div class="phpgenera_Details_mainL4_info"><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796798320.html" title="The Future of HTML, CSS, and JavaScript: Web Development Trends" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174499214213783.jpg?x-oss-process=image/resize,p_40" alt="The Future of HTML, CSS, and JavaScript: Web Development Trends" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796798320.html" title="The Future of HTML, CSS, and JavaScript: Web Development Trends" class="phphistorical_Version2_mids_title">The Future of HTML, CSS, and JavaScript: Web Development Trends</a><span class="Articlelist_txts_time">Apr 19, 2025 am 12:02 AM</span><p class="Articlelist_txts_p">The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796797816.html" title="HTML: The Structure, CSS: The Style, JavaScript: The Behavior" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174490615241003.jpg?x-oss-process=image/resize,p_40" alt="HTML: The Structure, CSS: The Style, JavaScript: The Behavior" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796797816.html" title="HTML: The Structure, CSS: The Style, JavaScript: The Behavior" class="phphistorical_Version2_mids_title">HTML: The Structure, CSS: The Style, JavaScript: The Behavior</a><span class="Articlelist_txts_time">Apr 18, 2025 am 12:09 AM</span><p class="Articlelist_txts_p">The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796797300.html" title="The Future of HTML: Evolution and Trends in Web Design" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174481993285664.jpg?x-oss-process=image/resize,p_40" alt="The Future of HTML: Evolution and Trends in Web Design" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796797300.html" title="The Future of HTML: Evolution and Trends in Web Design" class="phphistorical_Version2_mids_title">The Future of HTML: Evolution and Trends in Web Design</a><span class="Articlelist_txts_time">Apr 17, 2025 am 12:12 AM</span><p class="Articlelist_txts_p">The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796796827.html" title="HTML vs. CSS vs. JavaScript: A Comparative Overview" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174473305338023.jpg?x-oss-process=image/resize,p_40" alt="HTML vs. CSS vs. JavaScript: A Comparative Overview" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796796827.html" title="HTML vs. CSS vs. JavaScript: A Comparative Overview" class="phphistorical_Version2_mids_title">HTML vs. CSS vs. JavaScript: A Comparative Overview</a><span class="Articlelist_txts_time">Apr 16, 2025 am 12:04 AM</span><p class="Articlelist_txts_p">The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796796249.html" title="HTML: Is It a Programming Language or Something Else?" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174464723172609.jpg?x-oss-process=image/resize,p_40" alt="HTML: Is It a Programming Language or Something Else?" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796796249.html" title="HTML: Is It a Programming Language or Something Else?" class="phphistorical_Version2_mids_title">HTML: Is It a Programming Language or Something Else?</a><span class="Articlelist_txts_time">Apr 15, 2025 am 12:13 AM</span><p class="Articlelist_txts_p">HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796795665.html" title="HTML: Building the Structure of Web Pages" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174456085285529.jpg?x-oss-process=image/resize,p_40" alt="HTML: Building the Structure of Web Pages" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796795665.html" title="HTML: Building the Structure of Web Pages" class="phphistorical_Version2_mids_title">HTML: Building the Structure of Web Pages</a><span class="Articlelist_txts_time">Apr 14, 2025 am 12:14 AM</span><p class="Articlelist_txts_p">HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796795191.html" title="From Text to Websites: The Power of HTML" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174447404295304.jpg?x-oss-process=image/resize,p_40" alt="From Text to Websites: The Power of HTML" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796795191.html" title="From Text to Websites: The Power of HTML" class="phphistorical_Version2_mids_title">From Text to Websites: The Power of HTML</a><span class="Articlelist_txts_time">Apr 13, 2025 am 12:07 AM</span><p class="Articlelist_txts_p">HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796794693.html" title="Understanding HTML, CSS, and JavaScript: A Beginner's Guide" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174438733162787.jpg?x-oss-process=image/resize,p_40" alt="Understanding HTML, CSS, and JavaScript: A Beginner's Guide" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796794693.html" title="Understanding HTML, CSS, and JavaScript: A Beginner's Guide" class="phphistorical_Version2_mids_title">Understanding HTML, CSS, and JavaScript: A Beginner's Guide</a><span class="Articlelist_txts_time">Apr 12, 2025 am 12:02 AM</span><p class="Articlelist_txts_p">WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.</p></div></div><a href="https://m.php.cn/web-designer.html" class="phpgenera_Details_mainL4_botton"><span>See all articles</span><img class="lazy" data-src="/static/imghwm/down_right.png" src="/static/imghw/default1.png" alt="" /></a></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="AI_ToolDetails_main4sR"><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>Hot AI Tools</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ai/undresserai-undress" title="Undresser.AI Undress"class="phpmain_tab2_mids_title"><h3>Undresser.AI Undress</h3></a><p>AI-powered app for creating realistic nude photos</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover"class="phpmain_tab2_mids_title"><h3>AI Clothes Remover</h3></a><p>Online AI tool for removing clothes from photos.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ai/undress-ai-tool" title="Undress AI Tool"class="phpmain_tab2_mids_title"><h3>Undress AI Tool</h3></a><p>Undress images for free</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ai/clothoffio" title="Clothoff.io"class="phpmain_tab2_mids_title"><h3>Clothoff.io</h3></a><p>AI clothes remover</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ai/video-swap" title="Video Face Swap"class="phpmain_tab2_mids_title"><h3>Video Face Swap</h3></a><p>Swap faces in any video effortlessly with our completely free AI face swap tool!</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ai">Show More</a></div></div></div><div class="phpgenera_Details_mainR4"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>Hot Article</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/1796785841.html" title="Assassin's Creed Shadows: Seashell Riddle Solution" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Seashell Riddle Solution</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 weeks ago</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/1796789525.html" title="What's New in Windows 11 KB5054979 & How to Fix Update Issues" class="phpgenera_Details_mainR4_bottom_title">What's New in Windows 11 KB5054979 & How to Fix Update Issues</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>2 weeks ago</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/1796785857.html" title="Where to find the Crane Control Keycard in Atomfall" class="phpgenera_Details_mainR4_bottom_title">Where to find the Crane Control Keycard in Atomfall</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 weeks ago</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/1796783009.html" title="Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>4 weeks ago</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/1796784440.html" title="Roblox: Dead Rails - How To Complete Every Challenge" class="phpgenera_Details_mainR4_bottom_title">Roblox: Dead Rails - How To Complete Every Challenge</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 weeks ago</span><span>ByDDD</span></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/article.html">Show More</a></div></div></div><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>Hot Tools</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/1471" title="SublimeText3 Linux new version" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/5aab420a5fb42187.jpg" src="/static/imghw/default1.png" alt="SublimeText3 Linux new version" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/1471" title="SublimeText3 Linux new version" class="phpmain_tab2_mids_title"><h3>SublimeText3 Linux new version</h3></a><p>SublimeText3 Linux latest version</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/1556" title="MantisBT" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/004/169206588591843.png" src="/static/imghw/default1.png" alt="MantisBT" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/1556" title="MantisBT" class="phpmain_tab2_mids_title"><h3>MantisBT</h3></a><p>Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg" src="/static/imghw/default1.png" alt="SublimeText3 Chinese version" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_title"><h3>SublimeText3 Chinese version</h3></a><p>Chinese version, very easy to use</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/502" title="ZendStudio 13.5.1 Mac" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d3631514435840.png" src="/static/imghw/default1.png" alt="ZendStudio 13.5.1 Mac" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/502" title="ZendStudio 13.5.1 Mac" class="phpmain_tab2_mids_title"><h3>ZendStudio 13.5.1 Mac</h3></a><p>Powerful PHP integrated development environment</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/660" title="Atom editor mac version download" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ed8cfa94c1a582.jpg" src="/static/imghw/default1.png" alt="Atom editor mac version download" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/660" title="Atom editor mac version download" class="phpmain_tab2_mids_title"><h3>Atom editor mac version download</h3></a><p>The most popular open source editor</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ai">Show More</a></div></div></div><div class="phpgenera_Details_mainR4"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>Hot Topics</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/gmailyxdlrkzn" title="Where is the login entrance for gmail email?" class="phpgenera_Details_mainR4_bottom_title">Where is the login entrance for gmail email?</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>7583</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>15</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1386</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>52</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/steamdzhmcssmgs" title="What is the format of the account name of steam" class="phpgenera_Details_mainR4_bottom_title">What is the format of the account name of steam</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>87</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>11</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/winactivationkeyper" title="win11 activation key permanent" class="phpgenera_Details_mainR4_bottom_title">win11 activation key permanent</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>63</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>19</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/newyorktimesdailybrief" title="nyt connections hints and answers" class="phpgenera_Details_mainR4_bottom_title">nyt connections hints and answers</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>28</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>122</span></div></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/faq/zt">Show More</a></div></div></div></div></main><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><script> jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script><script>// 通用函数，用于显示或隐藏元素 function toggleElementsDisplay(className, show) { const elements = document.getElementsByClassName(className); for (let i = 0; i < elements.length; i++) { elements[i].style.display = show ? "block" : "none"; } } // 页面加载完成后执行的主函数 document.addEventListener("DOMContentLoaded", () => { // 1. 绑定菜单按钮事件 const bindMenuEvents = () => { const toggleDisplay = (className, show, eventId) => { const element = document.getElementById(eventId); if (element) { element.addEventListener("click", (event) => { event.preventDefault(); toggleElementsDisplay(className, show); }); } }; toggleDisplay("m_editormain12main", true, "fixed_tab_img"); toggleDisplay("m_editormain12main", false, "fixed_tab_topi"); toggleDisplay("m_editormain12main", false, "fixed_tab_close"); toggleDisplay("m_menu", true, "lan1sp"); toggleDisplay("m_menu", false, "m_editormain12main_topi_sp"); toggleDisplay("m_menu_lang", true, "lan1"); toggleDisplay("m_menu_lang", false, "m_editormain12main_topi_lan"); }; // 2. 绑定滚动链接事件 const bindScrollLinks = () => { const titleList = document.getElementById("fixed_tab_titlelist"); const menuMain = document.getElementsByClassName("m_editormain12main")[0]; const links = document.querySelectorAll('.fixed_tab_a'); links.forEach(linkElement => { if (linkElement) { linkElement.addEventListener("click", async (e) => { e.preventDefault(); e.stopPropagation(); // 先隐藏菜单 if (menuMain) menuMain.style.display = "none"; if (titleList) titleList.style.display = "none"; // 获取目标元素的 ID const targetId = linkElement.getAttribute('href').substring(1); const targetElement = document.getElementById(targetId); // 等待 DOM 更新 await new Promise(resolve => requestAnimationFrame(resolve)); // 滚动到目标位置 if (targetElement) { targetElement.scrollIntoView({ behavior: "smooth", block: "start" }); } }); } }); }; // 3. 绑定关闭按钮事件 const bindCloseButton = () => { const closeButton = document.querySelector(".phpgenera_Details_mainR1_close"); const container = document.querySelector(".phpgenera_Details_mainR1"); if (closeButton && container) { closeButton.addEventListener("click", (event) => { event.preventDefault(); container.style.display = "none"; }); } }; // 4. 初始化菜单交互功能 const initMenuInteraction = () => { const menuGroupElements = document.querySelectorAll('.layui-menu-item-group'); menuGroupElements.forEach(menuItem => { menuItem.addEventListener('click', function(event) { if (event.target.closest('.m_menusnames')) { return; } this.classList.toggle('layui-menu-item-down'); this.classList.toggle('layui-menu-item-up'); const subMenuContainer = this.querySelector('.m_menusnames'); const icon = this.querySelector('.layui-icon'); if (subMenuContainer && icon) { if (this.classList.contains('layui-menu-item-down')) { subMenuContainer.style.display = 'block'; icon.classList.remove('layui-icon-down'); icon.classList.add('layui-icon-up'); } else { subMenuContainer.style.display = 'none'; icon.classList.remove('layui-icon-up'); icon.classList.add('layui-icon-down'); } } }); }); }; // 5. 初始化 layui 功能 const initLayui = () => { if (typeof layui !== 'undefined') { layui.use(function () { var util = layui.util; if (util && util.fixbar) { util.fixbar({ on: { mouseenter: function (type) { if (layer && layer.tips) { layer.tips(type, this, { tips: 4, fixed: true, }); } }, mouseleave: function (type) { if (layer && layer.closeAll) { layer.closeAll("tips"); } }, }, }); } }); } }; // 执行所有初始化函数 bindMenuEvents(); bindScrollLinks(); bindCloseButton(); initMenuInteraction(); initLayui(); }); </script></body></html>