Jquery圖片輪播和CSS圖片輪播

時間 2019-11-14

標籤 jquery 圖片 css 欄目 JQuery 简体版

原文原文鏈接

學習Jquery之後，不少時候以爲比寫源生代碼要簡單一點。咱們用JQuery作了一個圖片輪播的動畫，感受比寫CSS要簡單一些。下面我來具體講一下是怎麼用JQuery來寫。javascript

<body>

<div class="img_div">

    <img class="img1" src="../image/img1.jpg" />
    <img class="img2" src="../image/img2.jpg" />

</div>

</body>

這個在body的時候很簡單。如上所示，在div 裏面加上兩個img 就好了。css

下面要開始寫javascript了。首先不要忘記引入Jquery文件。以下：html

<script src="../js/jquery-1.9.1.min.js">

這個沒有什麼說的，只是有時候注意一下不要把路徑寫錯了。java

 var ary = [
            "../image/img1.jpg",
            "../image/img2.jpg",
            "../image/img3.jpg",
            "../image/img4.jpg"
        ];

如上，咱們須要把須要移動到的圖片先存放在一個數組裏面。jquery

        var index = 2;
        function move_image(image_obj){
            if(parseInt(image_obj.css("left")) == 0){

                image_obj.animate({left:"-940px"},1000,function(){
                    image_obj.css({left:"940px"});
                    image_obj.attr("src",ary[index]);
                    index++;
                    if(index >= ary.length){
                        index = 0;
                    }
                });

            }else{
                image_obj.animate({left:"0"},1000);
            }
        }

如上，咱們寫了一個圖片移動的函數。web

由於咱們開始在body裏面就寫了兩個圖片進去，因此index定義等於2，咱們須要移動的只是div裏面的兩個img,可是裏面的圖片會變化。每次移動後那個img空下來後就取一個數組裏面的加進去。爲了避免加得無限多，一旦index大於等於數組長度，index就等於0，再從新開始。數組

$(function(){
            setInterval(function(){

                move_image($(".img1"));
                move_image($(".img2"));
            },2000);
        });

頁面加載咱們就能夠進行上面的函數。瀏覽器

下面是效果圖：ide

下面是完整的代碼：函數

<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        .img_div{
            width:940px;
            height:423px;
            border:1px solid red;
            position: relative;
            overflow: hidden;
        }


        .img_div .img1{
            position: absolute;
            top:0;
            left:0;
        }
        .img_div .img2{
            position: absolute;
            top:0;
            left:940px;
        }

    </style>
    <script src="../js/jquery-1.9.1.min.js">

    </script>
    <script>
        $(function(){
            setInterval(function(){

                move_image($(".img1"));
                move_image($(".img2"));
            },2000);
        });
        
        var ary = [
            "../image/img1.jpg",
            "../image/img2.jpg",
            "../image/img3.jpg",
            "../image/img4.jpg"
        ];
    var index = 2;
        function move_image(image_obj){
            if(parseInt(image_obj.css("left")) == 0){

                image_obj.animate({left:"-940px"},1000,function(){
                    image_obj.css({left:"940px"});
                    image_obj.attr("src",ary[index]);
                    index++;
                    if(index >= ary.length){
                        index = 0;
                    }
                });

            }else{
                image_obj.animate({left:"0"},1000);
            }
        }
    </script>
</head>
<body>

<div class="img_div">

    <img class="img1" src="../image/img1.jpg" />
    <img class="img2" src="../image/img2.jpg" />

</div>

</body>
</html>

View Code

以上是JQuery作的圖片輪播，下面我再講一下用CSS來作圖片輪播：

css來寫，首先在body裏面寫個div ，div裏面寫入移動的圖片。

代碼以下：

<body>
<div id="center-top-center">
        <div id="adanimation">
            <ul>
                <li><img src="ad01.jpg" width="100%" /></li>
                <li><img src="ad02.jpg" width="100%" /></li>
                <li><img src="ad03.jpg" width="100%" /></li>
                <li><img src="ad04.jpg" width="100%" /></li>
            </ul>
        </div>
</div>
</body>

View Code

而後就開始寫CSS了。我寫的是谷歌瀏覽器能適用的。寫的代碼以下：

 <style type="text/css">
        *{margin: 0px;padding: 0px;}
        #center-top-center{
            width: 670px;
        }
        #adanimation { width: 100%; overflow: hidden; position: relative; }
        #adanimation ul li { float: left; width: 25%; }
        #adanimation ul { width: 400%; -webkit-animation:adplayer 10s linear infinite;list-style-type: none }

        @-webkit-keyframes adplayer
        {
            from,25% { margin-left: 0px; }
            30%,50% { margin-left: -100%; }
            60%,75% { margin-left: -200%; }
            80%,100% { margin-left: -300%; }
        }

    </style>

View Code

效果圖以下：

全部代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        *{margin: 0px;padding: 0px;}
        #center-top-center{
            width: 670px;
        }
        #adanimation { width: 100%; overflow: hidden; position: relative; }
        #adanimation ul li { float: left; width: 25%; }
        #adanimation ul { width: 400%; -webkit-animation:adplayer 10s linear infinite;list-style-type: none }

        @-webkit-keyframes adplayer
        {
            from,25% { margin-left: 0px; }
            30%,50% { margin-left: -100%; }
            60%,75% { margin-left: -200%; }
            80%,100% { margin-left: -300%; }
        }

    </style>
</head>
<body>
<div id="center-top-center">
        <div id="adanimation">
            <ul>
                <li><img src="ad01.jpg" width="100%" /></li>
                <li><img src="ad02.jpg" width="100%" /></li>
                <li><img src="ad03.jpg" width="100%" /></li>
                <li><img src="ad04.jpg" width="100%" /></li>
            </ul>
        </div>
</div>
</body>
</html>

View Code

相關標籤/搜索

每日一句

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