个人整理的原生js图片轮播

最新推荐文章于 2024-04-20 08:20:08 发布

翻译最新推荐文章于 2024-04-20 08:20:08 发布 · 259 阅读

文章标签：

#js图片轮播

js 专栏收录该内容

44 篇文章

订阅专栏

本文介绍三种原生JS实现的图片轮播方法，包括多图滚动、自适应尺寸滚动及淡入淡出效果，适合不同场景需求。

个人整理的原生js图片轮播（滚动）

**第一种方法：**一个窗口多张图片进行滚动（图片的尺寸宽高都一样，在一个窗口进行滚动）
这一种应该是刚出来没有工作经验的太白用的（个人猜测，本人一开始也是用这种方法）。
css

.div_atuo{
	width: 1200px;
	margin: auto;
}
#imgg_ul li {
    margin-left: 24px;
 	width: 270px;
}

html

	<div class="div1">
        <div class="div_auto" style="padding-top: 260px;overflow: hidden">
            <ul id="imgg_ul">
                <li onmouseover="li1_over()" onmouseout="li1_out()"><img src="images/1.jpg" alt="" /></li>
                <li onmouseover="li1_over()" onmouseout="li1_out()"><img src="images/2.jpg" alt="" /></li>
                <li onmouseover="li1_over()" onmouseout="li1_out()"><img src="images/3.jpg" alt="" /></li>
                <li onmouseover="li1_over()" onmouseout="li1_out()"><img src="images/4.jpg" alt="" /></li>
                <li onmouseover="li1_over()" onmouseout="li1_out()"><img src="images/5.jpg" alt="" /></li>
                <li onmouseover="li1_over()" onmouseout="li1_out()"><img src="images/6.jpg" alt="" /></li>
                <li onmouseover="li1_over()" onmouseout="li1_out()"><img src="images/7.jpg" alt="" /></li>
                <li onmouseover="li1_over()" onmouseout="li1_out()"><img src="images/8.jpg" alt="" /></li>
            </ul>
        </div>
    </div>

		var ul = document.getElementById("imgg_ul");
        var uls = $("#imgg_ul>li").length;//获得图片的数量
        for (var lul = 1; lul <= uls; lul++) {
            $("#imgg_ul").append($("#imgg_ul>li:nth-child(" + lul + ")").clone(true));
            //在$("#imgg_ul")下在添加一次图片数据，相当于把图片数据在复制一次出来，不至于到最后一张出现空白区域
        }
        var uls = $("#imgg_ul>li").length;//再次获取图片的数量，这个时候的数量就是前面的2倍了
       //设置ul的长度，储存图片。这个ul被前面的div的超出隐藏限制了，所以不用担心图片超出宽度会显示出来
        ul.setAttribute('style', 'width:' + uls * 310 + 'px');
        var i = 0;
        var zong = (uls / 2) * (270 + 24);//获取一半图片的长度；后面的270+24是图片的宽度+图片间的间距
        fun1 = function() {
            i++;
            if (i > 0 && i < zong) {
                $("#imgg_ul").css("margin-left", '-' + i + 'px');//这个是进行滚动操作
            } else if (i > zong) {
                i = 1;
                //当滚动到一半的时候，在从头开始滚动，实现循环滚动
                $("#imgg_ul").css("margin-left", '-' + i + 'px');
            }
        }
        var ul_fun = setInterval(fun1, 10);
        function li1_over() {//鼠标移入事件，鼠标移入就停止滚动
            clearInterval(ul_fun);
        }
        function li1_out() {//鼠标移出事件，鼠标移出就继续滚动
            ul_fun = setInterval(fun1, 10);
        }

这种方法比较简单，但是不怎么实用，而且要求图片的尺寸每张都要一样。

第二种:
这种方法本人目前正在使用，比较推荐。图片尺寸大小不限制一样。
css

	 .div51{
        padding-top: 136px;//这个只是为了定窗口位置
        overflow: hidden;//超出隐藏
        width: 1032px;//窗口的宽
        height: 385px;//窗口的高
        margin: auto;//居中
    }
    .div51 img{
        height: 385px;//图片的高，数据必须和上面窗口的高一直
        margin-right: 5px;//图片间距
    }
    #div52,#div53,#div54{
        float: left;
    }
    #div52{
        width: 5000%;
    }

html

		<div class="div51" id="div51">
            <div id="div52">
                <div id="div53">
                    <img src="images/1.jpg" alt="" />
                    <img src="images/2.jpg" alt="" />
                    <img src="images/3.jpg" alt="" />
                    <img src="images/4.jpg" alt="" />
                    <img src="images/5.jpg" alt="" />
                    <img src="images/6.jpg" alt="" />
                </div>
                <div id="div54"></div>
            </div>
        </div>

//这个是网上大佬写的，实用性很好
	window.onload = function() {
		var v51 = document.getElementById('div51');
        var v52 = document.getElementById('div53');
        var v53 = document.getElementById('div54');
        v53.innerHTML = v52.innerHTML;//将v2容器里面的图片插入到v3容器里面  使其空白区域被遮住。相当于是复制了一份图片
        function fun51() {
            if (v51.scrollLeft >= v52.offsetWidth) {  //offsetWidth  这个是获取元素的宽度，必须放在window.οnlοad=function(){}里面
                v51.scrollLeft = 0;    //当向左滚动的长度等于元素的宽度时，设置滚动的水平位置为0
            } else {
                v51.scrollLeft++;    //进行水平滚动
            }
        }
        var fun5 = setInterval(fun51, 10);
        v51.onmouseover = function () {//鼠标经过时  清除定时器  停止图片的滚动
            clearInterval(fun5)
        };
        v51.onmouseout = function () {//鼠标离开后  继续滚动图片
            fun5 = setInterval(fun51, 10)
        };
	}

比较实用的一种图片滚动。

第三种：
窗口只显示单张图片，用淡入fadeIn()淡出fadeOut()效果。
html

	<div class="div2">
        <div style="width: 1200px;margin: auto;overflow: hidden;height: 300px">
            <ul class="div2ul" id="div2ul" style="width: 6000%">
                <li><img src="images/tqbb_02.jpg" alt="" /></li>
                <li><img src="images/xx2.jpg" alt="" /></li>
                <li><img src="images/xx1.jpg" alt="" /></li>
            </ul>
        </div>
    </div>

	var div2ul = $("#div2ul li").length;
    var ik = 0;
    setInterval(function() {
        ik++;
        if (ik >= div2ul) {
            $(".div2ul li:nth-child(" + ik + ")").fadeOut();
            $(".div2ul li:nth-child(" + 1 + ")").fadeIn();
            ik = 0;
        } else {
            $(".div2ul li:nth-child(" + ik + ")").fadeOut();
            $(".div2ul li:nth-child(" + (ik + 1) + ")").fadeIn();
        }
    }, 5000);