{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/product_newpro.css">
{/block}
{block name="main"}
<div class="orico_Page_newproducts">
  <!-- 新品-->
  <!-- 主打产品banner轮播 -->
  <div class="opdBanner">
    {volist name="focus_image" id="fo"}
    <a {notempty name="fo.link" }href="{$fo.link}" {/notempty}><img src="{$fo.image}" class="opdbannerImg" /></a>
    {/volist}
  </div>
  <div class="oricoNewPrMain">
    {volist name="newpros" id="vo"}
    <div class="cat">
      <h1 class="ori-pd-title">
        <div class="catname">{$vo.category.name}</div>
        <a class="catmore">
          <span class="tmore">{:lang('product_newpro.view_all')}</span>
          <img src="/static/index/images/more.png" class="catmoreImg" />
        </a>
      </h1>
      <div class="ori-pd-list">
        {volist name="vo.products" id="pro"}
        <a class="oripditem" href="{:url('product/detail', ['id' => $pro.id])}">
          <img src="{$pro.cover_image}" class="prdimg prdimg-show" />
          <div class="prdName">{$pro.name}</div>
          <div class="prddec">{$pro.spu}</div>
          {eq name="pro.is_new" value="1"}
          <div class="newcp">New</div>
          {/eq}
        </a>
        {/volist}
      </div>
    </div>
    {/volist}
  </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
  $(function () {
    // 显示第一张图片
    $('.opdbannerImg').eq(0).show();
    let currentIndex = 0;
    const imgCount = $('.opdbannerImg').length;
    setInterval(() => {
      // 淡出当前图片
      $('.opdbannerImg').eq(currentIndex).fadeTo(10, 0, () => {
        // 隐藏当前图片
        $('.opdbannerImg').eq(currentIndex).hide();
        // 计算下一张图片的索引
        currentIndex = (currentIndex + 1) % imgCount;
        // 显示并淡入下一张图片
        $('.opdbannerImg').eq(currentIndex).show().fadeTo(10, 1);
      });
    }, 10000);
  });
</script>
{/block}