dedecms--图片的轮播_dedecms 轮播图-优快云博客

本文链接：https://blog.youkuaiyun.com/hello_xiang/article/details/80646857

本文介绍了如何在DedeCMS系统中通过添加PHP代码和引入JS、CSS文件来实现图片轮播效果，展示了一个简单易懂的实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.直接在php加代码，引入js，css文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>{dede:global.cfg_webname/}</title>
	<link href="{dede:global.cfg_templets_skin/}/style/dedecms.css" rel="stylesheet" media="screen" type="text/css" />
	<LINK rel="stylesheet" type="text/css" href="{dede:global.cfg_templets_skin/}/style/css.css"><LINK rel="stylesheet" type="text/css" href="{dede:global.cfg_templets_skin/}/style/css1.css"><script type="text/javascript" src="{dede:global.cfg_templets_skin/}/style/jquery.pack.js"></script><script type="text/javascript" src="{dede:global.cfg_templets_skin/}/style/jQuery.blockUI.js"></script><script type="text/javascript" src="{dede:global.cfg_templets_skin/}/style/jquery.SuperSlide.js"></script>

	<link rel="stylesheet" type="text/css" href="{dede:global.cfg_templets_skin/}/style/_sitegray_d.css" />
	<script language="javascript" src="{dede:global.cfg_templets_skin/}/style/_sitegray.js"></script>
	<link rel="stylesheet" type="text/css" href="{dede:global.cfg_templets_skin/}/style/index.vsb.css" />
	<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/style/vsbscreen.min.js" id="_vsbscreen" devices="pc|mobile|pad"></script>
	<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/style/counter.js"></script>

</head>
<body>
	{dede:include filename="head.htm"/}
<!--焦点图-->
<div id="main">
 <script language="javascript" src="{dede:global.cfg_templets_skin/}/style/dynclicks.js"></script>
<div id="slideBox" class="slideBox">
    <div class="hd">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>
    <div class="bd">
     <ul>
     {dede:arclist typeid="16" titlelen="300"}
     <li class="slider-item"><a href="[field:arcurl/]"><img src="[field:litpic/]" width="435" height="300" />
     <p style="text-align:center;margin-top:10px">[field:title function='(strlen("@me")>50?cn_substr("@me",50)."…":"@me" ) ' /]</p>
     </a></li>
     {/dede:arclist}
  </ul>
 </div>
   </div>
   <script>_showDynClickBatch(['dynclicks_u3_4105','dynclicks_u3_4078','dynclicks_u3_4071','dynclicks_u3_4069'],[4105,4078,4071,4069],"wbnews", 1422732669)</script>
  <script type="text/javascript">jQuery(".slideBox").slide( { mainCell:".bd ul",effect:"left",autoPlay:true} );</script>
<!--焦点图 end-->

2.效果如下