jq는 left_jquery에 표시된 그림의 오른쪽에 있는 텍스트의 슬라이딩 전환 효과를 실현합니다.

그림 왼쪽과 오른쪽의 텍스트를 슬라이딩하는 jQuery 코드를 공유하세요. jQuery를 기반으로 한 목록 이미지 제어 이미지 슬라이딩 전환 코드입니다. 렌더링은 다음과 같습니다.

jq를 기반으로 왼쪽에 그림을 표시하고 오른쪽에 텍스트를 표시하는 슬라이딩 전환 효과를 공유하겠습니다. div CSS를 사용하여 양식을 정렬하고 jq를 빌려 특수 효과를 구현합니다. 아래 코드를 참조하세요.

html 코드:

<div class="index-new w1200 mt30">
    <div class="indexadd mt50 mb60">
      <div id="banners" class="ui-banner">
        <ul class="ui-banner-slides">
          <li><a href=""><img src="images/simgd.jpg" alt="NEW! Get Heart Smart With Essential Omega III" title="NEW! Get Heart Smart With Essential Omega III" /></a></li>
          <li><a href=""><img src="images/simgd.jpg" alt="NEW! Support Your Skin on a Cellular Level" title="NEW! Support Your Skin on a Cellular Level" /></a></li>
          <li><a href=""><img src="images/simgd.jpg" alt="NEW! Indulge in Luxury With Royal Spa" title="NEW! Indulge in Luxury With Royal Spa" /></a></li>
          <li><a href=""><img src="images/simgd.jpg" alt="NEW! Get paid to shop with Cashback" title="NEW! Get paid to shop with Cashback" /></a></li>
          <li><a href=""><img src="images/simgd.jpg" alt="NEW! Radiation Protection at its Best" title="NEW! Radiation Protection at its Best" /></a></li>
          <li><a href=""><img src="images/simgd.jpg" alt="Unleash the Power of Isotonix Today" title="Unleash the Power of Isotonix Today" /></a></li>
          <li><a href=""><img src="images/simgd.jpg" alt="Motives is Changing the Face of UK Beauty" title="Motives is Changing the Face of UK Beauty" /></a></li>
          <li><a href=""><img src="images/simgd.jpg" alt="Get a Taste of Spring" title="Get a Taste of Spring" /></a></li>
          <li><a href=""><img src="images/simgd.jpg" alt="Try Isotonix OPC-3 Today for Better Health" title="Try Isotonix OPC-3 Today for Better Health" /></a></li>
          <li><a href=""><img src="images/simgd.jpg" alt="Feel like a princess with Royal Spa" title="Feel like a princess with Royal Spa" /></a></li>
          <li><a href=""><img src="images/simgd.jpg" alt="Stay energised with Isotonix for the Queen's Jubilee" title="Stay energised with Isotonix for the Queen's Jubilee" /></a></li>
          <li><a href=""><img src="images/simgd.jpg" alt="WorldStores - Top Brands Delivered Next Day" title="WorldStores - Top Brands Delivered Next Day" /></a></li>
        </ul><!--ui-banner-slides end-->
        <ul class="ui-banner-slogans">
          <li class="ui-line">
            <div class="ullinehover">
              <div class="ui-bnnerimg floatLeft">
                <img src="images/simg.jpg" alt="" width="103" />
              </div>
              <div class="ui-bnnerp floatRight">
                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>
                <p>
                  根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位
                  开展扶贫济困募捐活动。
                </p>
              </div>
            </div>
          </li>
          <li class="ui-line">
            <div class="ullinehover">
              <div class="ui-bnnerimg floatLeft">
                <img src="images/simg.jpg" alt="" width="103" />
              </div>
              <div class="ui-bnnerp floatRight">
                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>
                <p>
                  根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位
                  开展扶贫济困募捐活动。
                </p>
              </div>
            </div>
          </li>
          <li class="ui-line">
            <div class="ullinehover">
              <div class="ui-bnnerimg floatLeft">
                <img src="images/simg.jpg" alt="" width="103" />
              </div>
              <div class="ui-bnnerp floatRight">
                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>
                <p>
                  根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位
                  开展扶贫济困募捐活动。
                </p>
              </div>
            </div>
          </li>
          <li class="ui-line">
            <div class="ullinehover">
              <div class="ui-bnnerimg floatLeft">
                <img src="images/simg.jpg" alt="" width="103" />
              </div>
              <div class="ui-bnnerp floatRight">
                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>
                <p>
                  根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位
                  开展扶贫济困募捐活动。
                </p>
              </div>
            </div>
          </li>
          <li class="ui-line">
            <div class="ullinehover">
              <div class="ui-bnnerimg floatLeft">
                <img src="images/simg.jpg" alt="" width="103" />
              </div>
              <div class="ui-bnnerp floatRight">
                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>
                <p>
                  根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位
                  开展扶贫济困募捐活动。
                </p>
              </div>
            </div>
          </li>
          <li class="ui-line">
            <div class="ullinehover">
              <div class="ui-bnnerimg floatLeft">
                <img src="images/simg.jpg" alt="" width="103" />
              </div>
              <div class="ui-bnnerp floatRight">
                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>
                <p>
                  根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位
                  开展扶贫济困募捐活动。
                </p>
              </div>
            </div>
          </li>
          <li class="ui-line">
            <div class="ullinehover">
              <div class="ui-bnnerimg floatLeft">
                <img src="images/simg.jpg" alt="" width="103" />
              </div>
              <div class="ui-bnnerp floatRight">
                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>
                <p>
                  根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位
                  开展扶贫济困募捐活动。
                </p>
              </div>
            </div>
          </li>
          <li class="ui-line">
            <div class="ullinehover">
              <div class="ui-bnnerimg floatLeft">
                <img src="images/simg.jpg" alt="" width="103" />
              </div>
              <div class="ui-bnnerp floatRight">
                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>
                <p>
                  根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位
                  开展扶贫济困募捐活动。
                </p>
              </div>
            </div>
          </li>
          <li class="ui-line">
            <div class="ullinehover">
              <div class="ui-bnnerimg floatLeft">
                <img src="images/simg.jpg" alt="" width="103" />
              </div>
              <div class="ui-bnnerp floatRight">
                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>
                <p>
                  根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位
                  开展扶贫济困募捐活动。
                </p>
              </div>
            </div>
          </li>
          <li class="ui-line">
            <div class="ullinehover">
              <div class="ui-bnnerimg floatLeft">
                <img src="images/simg.jpg" alt="" width="103" />
              </div>
              <div class="ui-bnnerp floatRight">
                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>
                <p>
                  根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位
                  开展扶贫济困募捐活动。
                </p>
              </div>
            </div>
          </li>
          <li class="ui-line">
            <div class="ullinehover">
              <div class="ui-bnnerimg floatLeft">
                <img src="images/simg.jpg" alt="" width="103" />
              </div>
              <div class="ui-bnnerp floatRight">
                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>
                <p>
                  根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位
                  开展扶贫济困募捐活动。
                </p>
              </div>
            </div>
          </li>
          <li class="ui-line">
            <div class="ullinehover">
              <div class="ui-bnnerimg floatLeft">
                <img src="images/simg.jpg" alt="" width="103" />
              </div>
              <div class="ui-bnnerp floatRight">
                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>
                <p>
                  根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位
                  开展扶贫济困募捐活动。
                </p>
              </div>
            </div>
          </li>
        </ul><!--ui-banner-slogans end-->
      </div>
    </div>
  </div>

디스플레이 렌더링:

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.