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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。