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

最新推荐文章于 2022-09-03 10:39:40 发布

weixin_34409741

最新推荐文章于 2022-09-03 10:39:40 发布

阅读量82

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/1443572/blog/221776

版权

2019独角兽企业重金招聘Python工程师标准>>>

第一步:

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

2.创建一个images文件夹，放入轮播时所需的图片。(注意，图片大小尽量差不多大)

第二步:

1.新建一个html文档，

如：

<!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元素中，添加所需元素

如：

<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样式效果

如：

<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>

转载于:https://my.oschina.net/u/1443572/blog/221776