JQuery效果—— 如何实现轮播图_jq 轮播图eq做法-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_51074727/article/details/108932375

这篇博客详细介绍了如何利用JQuery实现一个轮播图效果，包括必要的JQuery代码和HTML结构，最后展示了实现后的视觉效果。

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

JQuery代码：

 
    $(function () {
 
        $(".num li:first").addClass("on")///默认第一个li按钮class属性为on
        var timer = setInterval(function () {添加一个定时器方法
            $(".slider li:first")选出第一个图片
               
                .remove()///移除第一个li
                .appendTo(".slider");///插入到ul的最后一个
              
                
            
            var img = $(".slider li:first img").attr("src");获取第一个图片的src属性
            var index = img.match(/\d/)[0]-1;/获取当前图片的属性值内的对应索引并-1
            $(".num li:eq(" + index+")").addClass("on").siblings().removeClass("on");给对应的索引的li加class样式其兄弟节点移除样式

        }, 2000)

        $(".num li").bind("click mouseover", function () {给li按钮绑定单击和鼠标移入事件
            var index = $(this).index();获取鼠标当前的选项索引;
            $(".slider").animate({ 给整个div加动画
                "top": "-150" * index + "px"向上轮播

            });
            $(this).addClass("on").siblings().removeClass("on");给鼠标所点击li加背景并且移除其同胞选项的class样式
            clearInterval(timer);///当鼠标单击和鼠标移li按钮时清空定时器

        }).mouseout(function () {当鼠标移出时

            timer = setInterval(function () {///添加定时器
                $(".slider li:first")
                    .remove()
                    .appendTo(".slider");
                var index = $(this).index
                $(".num li", index).attr("class", "on").siblings().removeClass("on");

            }, 2000)
        })

html代码：

   <div class="content_right">
            <div class="ad">
                <ul class="slider">
                    <li><img src="images/ads/1.gif" /></li>
                    <li><img src="images/ads/2.gif" /></li>
                    <li><img src="images/ads/3.gif" /></li>
                    <li><img src="images/ads/4.gif" /></li>
                    <li><img src="images/ads/5.gif" /></li>
                </ul>
                <ul class="num">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>

效果图：