JS实现简略的图片轮转-JavaSript-爱易网页

JS实现简略的图片轮转

日期：2014-05-16　浏览次数：20372 次

JS实现简单的图片轮转

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

第一种写法：

调用了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">
&l

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

JS实现简略的图片轮转

相关资料更多>

推荐阅读更多>