【12/17】Jquery学习笔记-图片轮播和选中展示

最新推荐文章于 2025-06-04 11:48:07 发布

原创最新推荐文章于 2025-06-04 11:48:07 发布 · 338 阅读

0 ·

CC 4.0 BY-SA版权

小技巧同时被 3 个专栏收录

6 篇文章

订阅专栏

Java

5 篇文章

订阅专栏

Jquery

4 篇文章

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript实现大屏广告的轮播效果，包括鼠标滑过文字切换图片的功能，以及自动轮播的定时器设置。

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

HTML静态部分：

 <!--大屏广告-->
        <div id="jdImageroll">
            <a href="#nogo" class="jdImageWrap">
                <img src="./images/1.jpg" alt="老虎1"/>
                <img src="./images/2.jpg" alt="老虎2"/>
                <img src="./images/3.jpg" alt="老虎3"/>
                <img src="./images/4.jpg" alt="猫1"/>
            </a>
            <div>
                <a href="###1"><em>0</em><em>1</em></a>
                <a href="###2"><em>0</em><em>2</em></a>
                <a href="###3"><em>0</em><em>3</em></a>
                <a href="###4" class="last"><em>0</em><em>4</em></a>
            </div>
        </div>

添加CSS后显示为：

JS部分：

设置定时轮流播放，setInterval(adTimer),clearInterval(adTimer）

$(function () {
        $imgrolls = $("#jdImageroll div a");
        $imgrolls.css("opacity",0.7);
        var len = $imgrolls.length;
        var adTimer = null;
        var index = 0;
       $imgrolls.mouseover(function () {
            index= $("#jdImageroll div a").index(this);
            showImg(index);
        }).eq(0).mouseover();
        $("#jdImageroll").hover(function () {
            if (adTimer) {
                clearInterval(adTimer);
            }
        }, function () {
            adTimer = setInterval(function () {
                showImg(index);
                index++;
                if (index == len) {
                    index = 0;
                }
            }, 2000);
        }).trigger("mouseleave");
    });
})

  function showImg(index) {
            var $rollobj = $("#jdImageroll");
            var $rolllist = $rollobj.find("div a");
            var newhref = $rolllist.eq(index).attr("href");
            $(".jdImageWrap").attr("href",newhref)
                               .find("img").eq(index).stop(true,true).fadeIn()
                               .siblings().fadeOut();
            $rolllist.removeClass("chos").css("opacity","0.7").eq(index).addClass("chos").css("opacity","1");
       }

逻辑为:

如果鼠标滑过文字1则显示图片1，滑过文字2则显示图片2；其他时候则自动轮播。

需要正确获取当前划过文字的索引值，将当前索引值对应的图片href设定为主图的href。

.eq(0).mouseover()用来初始化。

hover（）方法的含义是鼠标滑入滑出，对应mouseleave，mouseenter，通过trigger函数出发hover第2个函数。