JQuery实现图片轮播切换效果--水平切换/垂直切换

最新推荐文章于 2022-11-10 08:56:30 发布

aspnet2002web

最新推荐文章于 2022-11-10 08:56:30 发布

阅读量3.6k

点赞数

分类专栏： .NET与JQuery 文章标签： jquery function border list blog filter

本文链接：https://blog.youkuaiyun.com/aspnet2002web/article/details/7584133

版权

.NET与JQuery 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了使用JavaScript实现图片轮播效果和垂直幻灯片的技巧，包括DOM操作、事件监听、定时切换等功能。通过示例代码，展示了如何利用jQuery简化图片轮播的开发过程。

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

一、JQuery实现图片轮播效果
用JQuery操作DOM确实很方便，并且JQuery提供了非常人性化的API应付我们的各种需求，其中选择器在此示例-“JQuery实现图片轮播效果”上体现的尤为出色。大大简化了js的代码。

【原理简述】

这里大概说一下整个流程：

1，将除了第一张以外的图片全部隐藏，

2，获取第一张图片的alt信息显示在信息栏，并添加点击事件

3，为4个按钮添加点击侦听，点击相应的按钮，用fadeOut，fadeIn方法显示图片

4，设置setInterval，定时执行切换函数

【代码说明】

filter(":visible") :获取所有可见的元素

unbind()：从匹配的元素中删除绑定的事件

siblings：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

例：找到每个div的所有同辈元素中带有类名为selected的元素。

Hello<div>Hello Again</div>And Again
执行 $("div").siblings()，结果
[ Hello,And Again ]
【程序源码】

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>图片轮播切换效果-橡树小屋</title>
    <style type="text/css">
        #banner
        {
            position: relative;
            width: 478px;
            height: 286px;
            border: 1px solid #666;
            overflow: hidden;
        }
        #banner_list img
        {
            border: 0px;
        }
        #banner_bg
        {
            position: absolute;
            bottom: 0;
            background-color: #000;
            height: 30px;
            filter: Alpha(Opacity=30);
            opacity: 0.3;
            z-index: 1000;
            cursor: pointer;
            width: 478px;
        }
        #banner_info
        {
            position: absolute;
            bottom: 0;
            left: 5px;
            height: 22px;
            color: #fff;
            z-index: 1001;
            cursor: pointer;
        }
        #banner_text
        {
            position: absolute;
            width: 120px;
            z-index: 1002;
            right: 3px;
            bottom: 3px;
        }
        #banner ul
        {
            position: absolute;
            list-style-type: none;
            filter: Alpha(Opacity=80);
            opacity: 0.8;
            border: 1px solid #fff;
            z-index: 1002;
            margin: 0;
            padding: 0;
            bottom: 3px;
            right: 5px;
        }
        #banner ul li
        {
            padding: 0px 8px;
            float: left;
            display: block;
            color: #FFF;
            border: #e5eaff 1px solid;
            background: #6f4f67;
            cursor: pointer;
        }
        #banner ul li.on
        {
            background: #900;
        }
        #banner_list a
        {
            position: absolute;
        }
        /*让四张图片都可以重叠在一起 */
    </style>
    <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
    <script type="text/javascript">
	var t = n = 0, count;
	$(document).ready(function(){	
		count=$("#banner_list a").length;
		$("#banner_list a:not(:first-child)").hide();
		$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
		$("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
		$("#banner li").click(function() {
			var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4
			n = i;
			if (i >= count) return;
			$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
			$("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
			$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
			document.getElementById("banner").style.background="";
			$(this).toggleClass("on");
			$(this).siblings().removeAttr("class");
		});
		t = setInterval("showAuto()", 4000);
		$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
	})
	function showAuto()
	{
		n = n >=(count - 1) ? 0 : ++n;
		$("#banner li").eq(n).trigger('click');
	}
    </script>

</head>
<body>
    <div id="banner">
        <div id="banner_bg">
        </div>
        <!--标题背景-->
        <div id="banner_info">
        </div>
        <!--标题-->
        <ul>
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div id="banner_list">
            <a href="#" target="_blank">
                <img src="imgs/p1.jpg" title="橡树小屋的blog" alt="橡树小屋的blog" />
            </a> 
            <a href="#" target="_blank">
                <img src="imgs/p5.jpg" title="橡树小屋的blog" alt="橡树小屋的blog" />
            </a> 
            <a href="#" target="_blank">
                <img src="imgs/p3.jpg" title="橡树小屋的blog" alt="橡树小屋的blog" />
            </a> 
            <a href="#" target="_blank">
                <img src="imgs/p4.jpg" title="橡树小屋的blog" alt="橡树小屋的blog" />
            </a>
        </div>
    </div>
</body>
</html>

运行效果：

二、垂直幻灯轮播的JS图片切换效果
垂直幻灯轮播的JS图片切换效果，远程调用3张图片，当然图片数量可以自己设定，在兼容性方面做的也挺好，只不过缺少了一个Loading，在图片未加载完的情况下，图片已经开始播放了，这样一来，用户体验有些逊色，有兴趣的自己加个图片载入功能吧。

<html>
<head>
    <title>垂直幻灯轮播的JS图片切换效果</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    <style type="text/css">
        body, ul, li
        {
            margin: 0;
            padding: 0;
        }
        bod
        {
            font: 12px/1.5 tahoma,arial,\5b8b\4f53;
            color: #666;
        }
        ul
        {
            list-style: none;
        }
        a
        {
            text-decoration: none;
        }
        a:hover
        {
            text-decoration: underline;
        }
        img
        {
            border: 0;
        }
        /* ad */
        .ad
        {
            height: 194px;
            position: relative;
            width: 372px;
            overflow: hidden;
            border: 1px solid #F47500;
            background-color: #CCC;
            margin: 10px auto;
        }
        .ad .banners
        {
            position: absolute;
        }
        .ad .banners li
        {
            float: left;
        }
        .ad .banners a
        {
            display: block;
        }
        .points
        {
            bottom: 6px;
            height: 18px;
            padding-top: 2px;
            position: absolute;
            right: 8px;
            z-index: 20;
        }
        .points li
        {
            background-color: #FCF2CF;
            border: 1px solid #F47500;
            color: #D94B01;
            cursor: pointer;
            float: left;
            font-size: 11px;
            height: 16px;
            line-height: 16px;
            margin-left: 3px;
            text-align: center;
            width: 16px;
        }
        .points li.current
        {
            background-color: #FFB442;
            border-color: #F27602;
            color: #FFFFFF;
            font-weight: bold;
            height: 18px;
            line-height: 18px;
            margin-top: -2px;
            overflow: hidden;
            width: 18px;
        }
    </style>

    <script type="text/javascript">
        function getStyle(elem, name) {
            var elem = (!elem) ? alert("ERROR: It is short of getStyle==>elem!") : elem;
            var name = (!name) ? alert("ERROR: It is short of getStyle==>name!") : name.toString();
            if ((!elem) && (!name)) { return false; }
            if (elem.style[name]) {
                return elem.style[name];
            } else if (elem.currentStyle) {
                return elem.currentStyle[name];
            } else if (document.defaultView && document.defaultView.getComputedStyle) {
                name = name.replace(/([A-Z])/g, "-$1");
                name = name.toLowerCase();
                var s = document.defaultView.getComputedStyle(elem, "");
                return s && s.getPropertyValue(name);
            } else {
                return null;
            };
        }
        /* Tween */
        var Tween = {
            Expo: {
                easeOut: function(t, b, c, d) {
                    return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
                }
            }
        }
        /* zFocus */
        var zFocus = function() {
            function init(elem) {
                this.elem = document.getElementById(elem.id);
                this.orien = (!elem.orien) ? 0 : (elem.orien.toString() == "left") ? 0 : (elem.orien.toString() == "top") ? 1 : 0;
                this.time = (!elem.time || (typeof elem.time != "number")) ? 5 : elem.time;
                this.click_key = true;
                this.in_init();
            };
            init.prototype = {
                in_init: function() {
                    var ev_height = this.ev_height = parseInt(getStyle(this.elem, "height")),
			ev_width = this.ev_width = parseInt(getStyle(this.elem, "width")),
			banner_ul = this.banner_ul = this.elem.getElementsByTagName("ul")[0],
			total_num = this.n = banner_ul.getElementsByTagName("li").length,
			btn_ul = this.btn_ul = this.elem.getElementsByTagName("ul")[1],
			btn_li = this.btn_li = btn_ul.getElementsByTagName("li"),
			_this = this;
                    if (this.orien == 0) {
                        banner_ul.style.height = ev_height + "px";
                        banner_ul.style.width = (ev_width * total_num) + "px";
                    } else if (this.orien == 1) {
                        banner_ul.style.height = (ev_height * total_num) + "px";
                        banner_ul.style.width = ev_width + "px";
                    }
                    banner_ul.style.left = 0 + "px";
                    banner_ul.style.top = 0 + "px";
                    this.index = 0;
                    this.creat_btn();
                    this.elem.onmouseover = function() {
                        clearInterval(_this.a)
                    };
                    this.elem.onmouseout = function() {
                        _this.start();
                    };
                },
                start: function() {
                    var _this = this;
                    this.a = setInterval(function() {
                        _this.auto()
                    },
			this.time * 1000);
                },
                creat_btn: function() {
                    var _this = this;
                    for (var i = 0; i < this.n; i++) {
                        var newLi = document.createElement("li");
                        newLi.innerHTML = i + 1;
                        newLi.setAttribute("num", i);
                        this.btn_ul.appendChild(newLi);
                        this.btn_li[i].onclick = function() {
                            if (_this.click_key) {
                                var x = parseInt(this.getAttribute("num"));
                                clearInterval(_this.a);
                                clearInterval(_this.m);
                                _this.move(x);
                            }
                        };
                    };
                    this.btn_li[0].className = "current";
                    this.start();
                },
                auto: function() {
                    this.index = (this.index == (this.n - 1)) ? 0 : (this.index + 1);
                    this.move(this.index);
                },
                move: function(i) {
                    var _this = this;
                    var click_key = this.click_key;
                    for (var x = 0; x < this.n; x++) {
                        this.btn_li[x].className = "";
                    };
                    this.btn_li[i].className = "current";
                    if (this.orien == 0) {
                        var t = 0,
				b = parseInt(getStyle(this.banner_ul, "left")),
				c = (-i * this.ev_width) - b,
				d = 80;
                        var m = this.m = setInterval(function() {
                            _this.banner_ul.style.left = Math.ceil(Tween.Expo.easeOut(t, b, c, d)) + "px";
                            if (t < d) {
                                t++;
                            } else {
                                clearInterval(m);
                            }
                        },
				10);
                    } else if (this.orien == 1) {
                        var t = 0,
				b = parseInt(getStyle(this.banner_ul, "top")),
				c = (-i * this.ev_height) - b,
				d = 80;
                        var m = this.m = setInterval(function() {
                            _this.banner_ul.style.top = Math.ceil(Tween.Expo.easeOut(t, b, c, d)) + "px";
                            if (t < d) {
                                t++;
                            } else {
                                clearInterval(m);
                            }
                        },
				10);
                    };
                    this.click_key = click_key;
                    this.index = i;
                }
            };
            return init;
        } ();
    </script>

</head>
<body>
    <div class="ad" id="banner_box">
        <ul class="banners" id="banner_img">
            <li><a href="#">
                <img src="http://www.codefans.net/jscss/demoimg/wall1.jpg"></a></li>
            <li><a href="#">
                <img src="http://www.codefans.net/jscss/demoimg/wall2.jpg"></a></li>
            <li><a href="#">
                <img src="http://www.codefans.net/jscss/demoimg/wall3.jpg"></a></li>
        </ul>
        <ul class="points" id="banner_btn">
            <!-- creatBtnli() -->
        </ul>
    </div>

    <script type="text/javascript">
        new zFocus({
            id: "banner_box",
            orien: "top",
            time: 3
        })
    </script>

</body>
</html>

运行效果：