用jquery作一个简单的图片轮播效果

时间 2019-11-15

标签 jquery 一个简单图片效果栏目 JQuery 繁體版

原文原文链接

第一步:javascript

1.建立一个js文件夹，把jquery文件放入其中。我这里用的是jquery-1.9.1.min.js版本css

2.建立一个images文件夹，放入轮播时所需的图片。(注意，图片大小尽可能差很少大)html

第二步:
java

1.新建一个html文档，jquery

如：web

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>轮播效果演示</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>

</body>
</html>

2.在body元素中，添加所需元素chrome

如：函数

<div id="div">
    <div id="div1">
        <img src="images/one.jpg" width="310" height="471" alt="one" />
        <img src="images/two.jpg" width="310" height="466" alt="two" />
        <img src="images/three.jpg" width="310" height="393" alt="three" />
        <img src="images/four.jpg" width="310" height="465" alt="four" />
        <img src="images/five.jpg" width="310" height="465" alt="five" />
    </div>
    <div id="div2">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</div>

3.加入css样式效果动画

如：ui

<style>
        #div{
            position: absolute;
            width: 307px;
            height: 422px;
            overflow: hidden;
            left: 500px;
        }
        #div1{
            position: absolute;
            width: 1550px;
            height: 400px;
        }
        img{
            float: left;
            width: 310px;
            height: 400px;
        }
        #div2{
            position: absolute;
            top: 360px;
        }
        #div span{
            float: left;
            padding: 10px 10px;
            font-weight: bolder;
        }
    </style>

4.添加javascript动态效果

如：

<script>
    $(document).ready(showDiv1);//页面加载完成后，调用方法
    $(document).ready(showDiv2);
    var i=0,j=0,k=0;/*i变量控制left，j变量控制每次轮播时移动的多少像素，k变量控制各span中的背景色*/
    function showDiv1(){
        $("#div1").animate({left: i}, 1000);//animate是用于建立自定义动画的函数。
        j=j+310;
        i=-j+"px";
        if(j>=310*4)j=-310;
        setTimeout(showDiv1, 2000);//隔2000毫秒，执行一次showDiv1函数
    }
    function showDiv2(){
        $("#div2").children().eq(k).css("background-color","blue");//把当前正显示的图片编号背景色设置为blue
        k++;
        if(k==5)k=0;
        if(k==0||k==1){
            var y=k+3;
            $("#div2").children().eq(y).css("background-color","");
        }else{
            var y=k-2;
            $("#div2").children().eq(y).css("background-color","");
        }
        setTimeout(showDiv2, 2000);//隔2000毫秒，执行一次showDiv2函数
    }
    $("#div2 > span").mouseover(function(){//用于图片编号的mouseover事件处理函数
        var x = parseInt(this.innerHTML)-1;//获得当前图片位置
        $.each($("#div2 > span"),function(y){
            if(y==x){
                i=-x*310+"px";
                j=x*310,k=x;
                if(x==4)j=-310;
            }else
                $("#div2").children().eq(y).css("background-color","");//除当前显示图片编号一位，其他背景色为透明
        })
    });
</script>

注：在IE8.0版，chrome版本 33.0.1750.154 m，Firefox 28.0中运行都没问题。

完整的代码以下：

效果：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>轮播效果演示</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <script src="js/jquery-1.9.1.min.js"></script>
    <style>
        #div{
            position: absolute;
            width: 307px;
            height: 422px;
            overflow: hidden;
            left: 500px;
        }
        #div1{
            position: absolute;
            width: 1550px;
            height: 400px;
        }
        img{
            float: left;
            width: 310px;
            height: 400px;
        }
        #div2{
            position: absolute;
            top: 360px;
        }
        #div span{
            float: left;
            padding: 10px 10px;
            font-weight: bolder;
        }
    </style>
</head>
<body>
<div id="div">
    <div id="div1">
        <img src="images/one.jpg" width="310" height="471" alt="one" />
        <img src="images/two.jpg" width="310" height="466" alt="two" />
        <img src="images/three.jpg" width="310" height="393" alt="three" />
        <img src="images/four.jpg" width="310" height="465" alt="four" />
        <img src="images/five.jpg" width="310" height="465" alt="five" />
    </div>
    <div id="div2">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</div>
<script>
    $(document).ready(showDiv1);//页面加载完成后，调用方法
    $(document).ready(showDiv2);
    var i=0,j=0,k=0;/*i变量控制left，j变量控制每次轮播时移动的多少像素，k变量控制各span中的背景色*/
    function showDiv1(){
        $("#div1").animate({left: i}, 1000);//animate是用于建立自定义动画的函数。
        j=j+310;
        i=-j+"px";
        if(j>=310*4)j=-310;
        setTimeout(showDiv1, 2000);//隔2000毫秒，执行一次showDiv1函数
    }
    function showDiv2(){
        $("#div2").children().eq(k).css("background-color","blue");//把当前正显示的图片编号背景色设置为blue
        k++;
        if(k==5)k=0;
        if(k==0||k==1){
            var y=k+3;
            $("#div2").children().eq(y).css("background-color","");
        }else{
            var y=k-2;
            $("#div2").children().eq(y).css("background-color","");
        }
        setTimeout(showDiv2, 2000);//隔2000毫秒，执行一次showDiv2函数
    }
    $("#div2 > span").mouseover(function(){//用于图片编号的mouseover事件处理函数
        var x = parseInt(this.innerHTML)-1;//获得当前图片位置
        $.each($("#div2 > span"),function(y){
            if(y==x){
                i=-x*310+"px";
                j=x*310,k=x;
                if(x==4)j=-310;
            }else
                $("#div2").children().eq(y).css("background-color","");//除当前显示图片编号一位，其他背景色为透明
        })
    });
</script>
</body>
</html>