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,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"><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><!-- Google Tag Manager --><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><!-- End Google Tag Manager --><!-- Google tag (gtag.js) --><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 async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6267705206177514" crossorigin="anonymous"></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> 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\"><!DOCTYPE html>\n<\/span><span style=\"color: #008080\"> 2<\/span> <span style=\"color: #800000\"><html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<\/span><span style=\"color: #008080\"> 3<\/span> <span style=\"color: #800000\"><head>\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\"><\/head>\n<\/span><span style=\"color: #008080\"> 8<\/span> <span style=\"color: #800000\"><body>\n<\/span><span style=\"color: #008080\"> 9<\/span> <span style=\"color: #800000\"><div id=\"dlunbo\">\n<\/span><span style=\"color: #008080\">10<\/span> <span style=\"color: #800000\"><div id=\"igs\">\n<\/span><span style=\"color: #008080\">11<\/span> <span style=\"color: #800000\"><div class=\"ig\"><img src=\"img\/1_1.jpg\" \/><\/div>\n<\/span><span style=\"color: #008080\">12<\/span> <span style=\"color: #800000\"><div class=\"ig\"><img src=\"img\/1_2.jpg\" \/><\/div>\n<\/span><span style=\"color: #008080\">13<\/span> <span style=\"color: #800000\"><div class=\"ig\"><img src=\"img\/1_3.png\" \/><\/div>\n<\/span><span style=\"color: #008080\">14<\/span> <span style=\"color: #800000\"><div class=\"ig\"><img src=\"img\/1_4.jpg\" \/><\/div>\n<\/span><span style=\"color: #008080\">15<\/span> <span style=\"color: #800000\"><div class=\"ig\"><img src=\"img\/1_5.jpg\" \/><\/div>\n<\/span><span style=\"color: #008080\">16<\/span> <span style=\"color: #800000\"><\/div>\n<\/span><span style=\"color: #008080\">17<\/span> <span style=\"color: #800000\"><ul id=\"tabs\">\n<\/span><span style=\"color: #008080\">18<\/span> <span style=\"color: #800000\"><li class=\"tab\"><\/li>\n<\/span><span style=\"color: #008080\">19<\/span> <span style=\"color: #800000\"><li class=\"tab\"><\/li>\n<\/span><span style=\"color: #008080\">20<\/span> <span style=\"color: #800000\"><li class=\"tab\"><\/li>\n<\/span><span style=\"color: #008080\">21<\/span> <span style=\"color: #800000\"><li class=\"tab\"><\/li>\n<\/span><span style=\"color: #008080\">22<\/span> <span style=\"color: #800000\"><li class=\"tab\"><\/li>\n<\/span><span style=\"color: #008080\">23<\/span> <span style=\"color: #800000\"><\/ul>\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\"><\/div>\n<\/span><span style=\"color: #008080\">27<\/span> <span style=\"color: #800000\"><\/body>\n<\/span><span style=\"color: #008080\">28<\/span> <span style=\"color: #800000\"><\/html><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/article.html",
"name":"Technical Articles"}
}
,{
"@type":"ListItem",
"position":3,
"item":{"@id":"https://m.php.cn/web-designer.html",
"name":"Web Front-end"}
}
,{
"@type":"ListItem",
"position":4,
"item":{"@id":"https://m.php.cn/faq/374194.html",
"name":"Static carousel"}
}
]
}
]
</script></head><body><div class="bodyBg"><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/" 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 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">--><!-- <a href="javascript:;" title="singup">Create an account</a>--><!-- </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><div class="bodyMain"><!--所在位置--><div class="nphpSize"><div class="nphpSizeIn"><b></b><p><a href="https://m.php.cn/" title="Home" class="bBlack">Home</a> >
<a href="https://m.php.cn/article.html" title="Article" class="bBlack">Article</a> > <a href="https://m.php.cn/web-designer.html" class="cBlack">Web Front-end</a> > Static carousel</p><!-- <p><a href="https://m.php.cn/article.html" class="cBlack">Technical Articles</a> > <a href="https://m.php.cn/web-designer.html" class="cBlack">Web Front-end</a> > <a href="https://m.php.cn/div-tutorial.html" class="cBlack">HTML Tutorial</a> > Static carousel</p> --><div class="clear"></div></div></div><div class="nphpQianBox"><div class="nphpQianTitle"><h1>Static carousel</h1><div class="nphpQianTitleIn"><span><img data-src="https://img.php.cn/upload/avatar/000/000/001/6251028808086368.png" alt="PHP中文网" class="lazyload" src="/static/front/mobimages/moren/moren.png" /></span><dl><dt><em>PHP中文网</em><i class='bg1'>Original</i><div class="clear"></div></dt><dd><em>2017-07-14 18:10:03</em><i>2057browse</i><div class="clear"></div></dd></dl><div class="clear"></div></div></div><div class="nphpQianCont wenda-list"><div class="cnblogs_code">
<pre class="brush:php;toolbar:false"><span style="color: #008080"> 1</span> <span style="color: #800000"><!DOCTYPE html>
</span><span style="color: #008080"> 2</span> <span style="color: #800000"><html xmlns="http://www.w3.org/1999/xhtml">
</span><span style="color: #008080"> 3</span> <span style="color: #800000"><head>
</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"></head>
</span><span style="color: #008080"> 8</span> <span style="color: #800000"><body>
</span><span style="color: #008080"> 9</span> <span style="color: #800000"><div id="dlunbo">
</span><span style="color: #008080">10</span> <span style="color: #800000"><div id="igs">
</span><span style="color: #008080">11</span> <span style="color: #800000"><div class="ig"><img src="img/1_1.jpg" /></div>
</span><span style="color: #008080">12</span> <span style="color: #800000"><div class="ig"><img src="img/1_2.jpg" /></div>
</span><span style="color: #008080">13</span> <span style="color: #800000"><div class="ig"><img src="img/1_3.png" /></div>
</span><span style="color: #008080">14</span> <span style="color: #800000"><div class="ig"><img src="img/1_4.jpg" /></div>
</span><span style="color: #008080">15</span> <span style="color: #800000"><div class="ig"><img src="img/1_5.jpg" /></div>
</span><span style="color: #008080">16</span> <span style="color: #800000"></div>
</span><span style="color: #008080">17</span> <span style="color: #800000"><ul id="tabs">
</span><span style="color: #008080">18</span> <span style="color: #800000"><li class="tab"></li>
</span><span style="color: #008080">19</span> <span style="color: #800000"><li class="tab"></li>
</span><span style="color: #008080">20</span> <span style="color: #800000"><li class="tab"></li>
</span><span style="color: #008080">21</span> <span style="color: #800000"><li class="tab"></li>
</span><span style="color: #008080">22</span> <span style="color: #800000"><li class="tab"></li>
</span><span style="color: #008080">23</span> <span style="color: #800000"></ul>
</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"></div>
</span><span style="color: #008080">27</span> <span style="color: #800000"></body>
</span><span style="color: #008080">28</span> <span style="color: #800000"></html><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="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><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="nphpSytBox"><span>Previous article：<a class="dBlack" title="In-depth explanation of CSS border property" href="https://m.php.cn/faq/374193.html">In-depth explanation of CSS border property</a></span><span>Next article：<a class="dBlack" title="In-depth explanation of CSS border property" href="https://m.php.cn/faq/374279.html">In-depth explanation of CSS border property</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</a><div class="clear"></div></li></ul></div></div><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></div><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>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></body></html>