JQuery实现图片自动轮播，同时支持手动控件

最新推荐文章于 2024-05-13 15:54:57 发布

雾里看花叹朦胧

最新推荐文章于 2024-05-13 15:54:57 发布

阅读量6.9k

点赞数 2

分类专栏： html 文章标签： jquery 自动轮播

本文链接：https://blog.csdn.net/hsl0530hsl/article/details/80043194

版权

这个需要简单，直接附上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动轮播 Jquery</title>
    <script src="../../javascript/jQuery/jquery-2.1.3.min.js"></script>
    <script>
    $(function () {
    

        //动态添加数字浮标
        var imgNum = $(".img li").size();
        for (var i = 1; i <= imgNum; i++) {
            $(".num").append("<li>" + i + "</li>");
        }

        $(".img li").eq(0).fadeIn(300);
        $(".num li").eq(0).addClass("active");

        //数字浮标的焦点事件
        $(".num li").mousemove(function () {
    
            if (!$(this).hasClass("active")) {
                $(this).addClass("active").siblings().removeClass("active");
                idx = $(this).index();
                $(".img li").eq(idx).stop().fadeIn(300).siblings().stop().fadeOut(300);
            }
        });

        //显示向左移动图标
        $(".shade_left").hover(function () {
    
            $(".out .left").stop().fadeIn();
        }, function () {
    
            $(".out .left").stop().fadeOut();
        });

        //显示向右移动图标
        $(".shade_right").hover(function () {
    
            $(".out .right").stop().fadeIn();
        }, function () {
    
            $(".out .right").stop().fadeOut();
        });

        //转移图片的a标签的click事件
        $(".shade").click(function () {
    
            location.href = $(".img li:visible a").attr("href");
        });

        //手动向左移动
        $(".out .btn.left").click(function (e) {
    
            move(-1

最低0.47元/天解锁文章

雾里看花叹朦胧

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现图片自动轮播，同时支持手动控件

这个需要简单，直接附上代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;自动轮播 Jquery&lt;/title&gt; &lt;script src="../../j
复制链接

扫一扫