JS实现简单的图片轮转

忘是亡心i 2022-08-27 04:42 135阅读 0赞

图片轮转或者轮播特效在各种网页上都随处可见，但是每次我对于这种特效的写法都是很疑惑，不知道是怎么实现的。最近静下心来，好好研究了一番，发现各种大神的各种写法，由于比较多和比较混乱，我就整理了一些写法。

第一种写法：

调用了jquery1.9.1.js和外部的几张图片(有兴趣的大家可以粘贴后调试下，这边图片大家自行替换)

注意点：这边图片的命名用了数字：0,1,2,3,4，这是为了后期判断和修改。

(这个采用的是改变图片的索引源的方式，让图片达到轮转的效果，效果有一些粗糙)

(这个是所有的图片都显示出来的)

<html>
    <head>
        <title>图片轮转显示</title>
    <script type="text/javascript" src="Js/jquery1.9.1.js"></script>
    </head>
    <body>
    <script type="text/javascript">
            var i = 0;//定义一个全局变量,也就对应着图片的名称，这里有5张图片
            $(function () {
                var myInterval = setInterval("func()", 1000);//设置每隔1000毫秒调用一个func()函数
            });
                function getIndex(index) {//函数的目的是判断全局变量i是否超出范围
                    if (index >= 5) {//如果超出范围，除以5取余即可(这种方法很常见也很重要!)
                        return index % 5;
                    }
                    else {
                        return index;//没有超出范围，就返回本身
                    }
                }
                function func() {//利用attr对image的src属性进行修改
                    $("#img1").attr("src", "Images/" + getIndex(i) + ".jpg");
                    $("#img2").attr("src", "Images/" + getIndex(i + 1) + ".jpg");
                    $("#img3").attr("src", "Images/" + getIndex(i + 2) + ".jpg");
                    $("#img4").attr("src", "Images/" + getIndex(i + 3) + ".jpg");
                    $("#img5").attr("src", "Images/" + getIndex(i +4) + ".jpg");
                    i++;
                }   
        </script>
    <div id="chanPin" style="margin: 0px; padding: 0px">
            <span><strong>产品展示</strong></span>
            <div>
            <img id="img1" height="130px" src="Images/0.jpg"/>
            <img id="img2" height="130px" src="Images/1.jpg" />
            <img id="img3" height="130px" src="Images/2.jpg" />
            <img id="img4" height="130px" src="Images/3.jpg" />
            <img id="img5" height="130px" src="Images/4.jpg" />
            </div>
        </div>
    </body>
    </html>

第二种写法：

(滑动比第一种平滑一点，没有很突兀，采用的是margin-left这个重要的方式实现的)

(这个是只有一个图片被显示出来，其他图片被隐藏)

第三种方法:

这里采用点击事件让图片滑动，往往这种方法是联合第二种方法一起使用的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片轮播</title>
    <style>
    .trans_box{
        width: 400px;
    	height:300px;
        margin: 20px;
        overflow: hidden;
    }
    .trans_image_box {
        width: 1600px;
        height: 300px;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
    }
    .trans_image {
        width: 400px;
    	height:300px;
        float: left;
    }
    .trans_image_trigger {
        padding-top: 10px;
        text-align: center;
    }
    </style>
    </head>
    
    <body>
    <div class="trans_box">
        <div id="transImageBox" class="trans_image_box">
            <img class="trans_image" src="images/1.jpg" />
            <img class="trans_image" src="images/2.jpg" />
            <img class="trans_image" src="images/3.jpg" />
            <img class="trans_image" src="images/4.jpg" />
        </div>
    </div>
    <div id="transImageTrigger" class="trans_image_trigger">
            <a href="#1">图片1</a>　<a href="#2">图片2</a>　<a href="#3">图片3</a>　<a href="#4">图片4</a>
    </div>
    <script>
    window.onload = (function() {
        var $ = function(id) {
            return document.getElementById(id);
        };
    	
        var oBox = $("transImageBox");
    	//返回的oTrigger是a标签的数组
        var oTrigger = $("transImageTrigger").getElementsByTagName("a");
    	//lTrigger是oTrigger数组的长度
        var lTrigger = oTrigger.length;
            
        if (oBox && lTrigger) {
            for (var i = 0; i<lTrigger; i+=1) {
                oTrigger[i].onclick = function() {
    				//将href中的#换成空字符串，这样才能取到1,2,3,4这样的数字
                    var index = Number(this.href.replace(/.*#/g, "")) || 1;	
    				//根据取出来的index来判断需要margin-left多少像素
                    oBox.style.marginLeft = (1 - index) * 400 + "px";
                    return false;
                };	
            }
        }
    })();
    </script>
    </body>
    </html>

大家有更加简便和更好的方法，可以一起交流下啊。