jquery实现图片轮播

最新推荐文章于 2025-06-09 13:21:12 发布

原创最新推荐文章于 2025-06-09 13:21:12 发布 · 254 阅读

CC 4.0 BY-SA版权

代码如下：
自行引用jquery插件

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>jquery实现图片轮播</title>
</head>
<body style="background:#ffffff">
    
    <!--图片与特效 开始-->
        <div class="row-fluid">

            <!--图片 开始-->
            <div class="">
                <div class="">
                    <div class="">
                        <h4>图片</h4>
                    </div>
                    <div class="" style="background:#dadada" >
                        <div class="">
                            <div class="">
                                <button onclick="LookImg(1)">1</button>
                                <button onclick="LookImg(2)">2</button>
                                <button onclick="LookImg(3)">3</button>
                            </div>
                            <div class="">
                                <button id="lunbo" class="" onclick="dinshi()">定时轮播</button>
                            </div>
                        </div>
                        <br />
                        <div style="">
                            <i><img id="img" src="自行引用图片" /></i>
                        </div>
                        
                    </div>

                </div>
            </div>
            <!--图片 结束-->

        </div>
	<!--图片与特效 结束-->
    
</body>

<script>
        //淡入淡出图片更换
        function LookImg(m) {
            //原始的淡出代码
            //$("#img").fadeOut("slow")
            //"slow","normal","fast"或表示动画时长的毫秒数值(如：1000)
			

            $("#img").fadeOut("slow", function () {
                var value = m;
                if (value == 1) {
                    $("#img").attr("src", "自行引用图片");//设置图片 /Content/img/xxx.jpg（替换）
                    $("#img").fadeIn("slow");//淡入图片（显示）
                }
                if (value == 2) {
                    $("#img").attr("src", "自行引用图片");
                    $("#img").fadeIn("slow");
                }
                if (value == 3) {
                    $("#img").attr("src", "自行引用图片");
                    $("#img").fadeIn("slow");
                }
            });
        }

        //声明轮播的全局变量
        var dingshi

        //轮播开始
        function dinshi() {
            var tiaoshu = 1;//声明一个变量记录m的变化

            //每隔三秒弹出 "Hello":↓
            //初始方法使用：setTimeout(function(){alert("Hello")},3000);
            dingshi = setInterval(function ()
            {
                var m = tiaoshu;
                LookImg(m);
                tiaoshu++;
                if (tiaoshu == 6) {
                    tiaoshu = 1;
                }
            }, 5000);//1000等于1秒
            $("#lunbo").attr("onclick", "dingshiStop()")//更换点击事件
            $("#lunbo").text("定时轮播（开启中）");//字段替换
        }
//轮播停止
        function dingshiStop() {
            clearTimeout(dingshi);
            $("#lunbo").attr("onclick", "dinshi()");//更换点击事件
            $("#lunbo").text("定时轮播（关闭中）");//字段替换
        }
    </script>

</html>