寫一個圖片輪播效果的Demo(自動播放)附程式碼

阿新 • • 發佈：2019-02-11

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js圖片輪播切換</title>
    <style type="text/css">
        .imgCon {
            width: 450px;
            height: 300px;
            border: 2px solid #DCDCDC;
            margin: 100px auto;
            position 
: relative;
        }

        .imgCon span {
            display: block;
            position: absolute;
            left: 0;
            width: 100%;
            height: 30px;
            background: #808080;
            text-align: center;
            font-size: 18px;
            line-height: 30px;
        } 


        .numStyle {
            top: 0;
        }

        .textStyle {
            bottom: 0;
        }

        .imgCon strong {
            font-size: 30px;
            color: #000000;
            position: absolute;
            top: 50%;
            display: block;
            background: gray;
            cursor 
: pointer;
        }

        .imgCon .prev {
            left: 10px;
        }

        .imgCon .next {
            left: 425px;
        }

        img {
            width: 450px;
            height: 300px;
        }
    </style>
</head>
<body>
　　
<div class="imgCon">
    　　　　<span id="numCon" class="numStyle">載入中...</span>
    　　　　<span id="textCon" class="textStyle">載入中...</span>
    　　　　<strong id="prev" class="prev"><</strong>
    　　　　<strong id="next" class="next">></strong>
    　　　　<img src="" id="imgChange" class="imgChange"/>
</div>
<script language="JavaScript" src="jquery-2.2.3.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var numCon = document.getElementById('numCon');
        var textCon = document.getElementById('textCon');
        var imgChange = document.getElementById('imgChange');
        var imgArr = ['img/ad1.jpg', 'img/ad2.jpg', 'img/ad3.jpg', 'img/ad4.jpg'];
        var imgText = ['第一張', '第二張', '第三張', '第四張'];
        var num = 0;
        //數字 圖片變化函式
        function imgTab() {
            numCon.innerHTML = num + 1 + '/' + imgArr.length; //數字變化
            textCon.innerHTML = imgText[num]; //底部文字內容變化
            imgChange.src = imgArr[num]; //圖片變化
        }

        function nextPage() {
            num++;
            if (num == imgArr.length) {
                num = 0;
            }
            imgTab();
        }

        var t;
        t = window.setInterval(nextPage, 1000);
        $("html").click(function (e) {
            //alert(e.target);
            if (e.target == $("#prev")[0]) {
                window.clearInterval(t);
                num--;
                if (num == -1) {
                    num = imgArr.length - 1;
                }
                imgTab();
                t = window.setInterval(nextPage, 1000);
            }
            else if (e.target == $("#next")[0]) {
                window.clearInterval(t);
                num++;
                if (num == imgArr.length) {
                    num = 0;
                }
                imgTab();
                t = window.setInterval(nextPage, 1000);
            }
        });
    });
</script>
</body>
</html>

寫一個圖片輪播效果的Demo(自動播放)附程式碼

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js圖

JS實現圖片輪播效果（自動和手動）

本次輪播效果圖如下：具有以下功能：1.自動播放（滑鼠進入顯示區域時停止播放） 2.左右焦點切換 3.底下小按鈕切換以下為實現程式碼：首先是html程式碼：<!DOCTYPE html> <html lang="en"> <head>

寫了一個簡單輪播效果實現

char line query span size html ef6 ava top <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

實現廣告圖片輪播效果-AndroidImageSild

left anim wpa img listener pri des indicator ext 在AS中的使用： 1.在build文件中進行配置 compile ‘com.squareup.picasso:picasso:2.3.2‘ comp

使用JQuery實現圖片輪播效果

left 簡述 flow href 集合 jpg -i round 輪播【效果如圖】【原理簡述】這裏大概說一下整個流程： 1，將除了第一張以外的圖片全部隱藏， 2，獲取第一張圖片的alt信息顯示在信息欄，並添加點擊事件 3，為4個按鈕添加點擊偵聽，點擊相應的按鈕，用

RollViewPager圖片輪播效果開源框架的使用

ntp end drawable setimage ada create emc 效果好方案 RollViewPager是一個自動輪播的Viewpager，支持無限循環。觸摸時會暫停播放，直到結束觸摸一個延遲周期以後繼續播放。看起來就像這樣。指示器可以為點可以為數字

簡單的圖片輪播效果

ear mar enter etc block height att 代碼 tag 用js代碼來實現一個簡單的圖片輪播效果鼠標移入圖片後顯示左右箭頭按鈕，點擊就可以實現圖片的切換。以下分別是html代碼和js代碼，歡迎批評和討論！ <!DOCTYPE html

JS實現定時操作圖片輪播效果（setInterval）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload=functi

jq + css 實現簡單的圖片輪播效果

jq + css 實現簡單的圖片輪播效果開發過程中需要用到圖片輪播的外掛，在網上找了幾個外掛之後還是決定自己碼一個，比較簡潔的功能，以後說不定還會有用。 ps：功能比較簡單，整個框並不能根據圖片的大小自動調節，這裡所用的圖片是1170*500的，如果需要改成其他大小的圖片，自行

使用js實現html首頁圖片輪播效果

第一步：確定事件(onload)併為其繫結一個函式瀏覽器是邊載入邊執行的，先載入head 再載入body。瞭解body的onload事件的執行時間是非常重要的。onload事件是在網頁載入完畢時執行的。當我們在JavaScript中想要操作某元素時而此元素還沒有載入完成（

簡單實現一個圖片輪播

（注意要將圖片替換為你自己的圖片） public class MainActivity extends Activity { private ViewPager mViewPaper; private List<ImageView> images; private List&

html中使用JS實現圖片輪播效果

HTML 部分 <div id="bannner" class="main_center_bannar">

html+css+js簡單實現圖片輪播效果

用java程式碼寫的圖片輪播，方便呼叫

package com.sxt.view; import java.util.List; import com.sxt.net.img.ImageLoad; import android.content.Context; import android.graphics.Bi

ScrollRect滑動優化(四)_Unity—Item圖片輪播效果

直接看效果好了，我只弄了兩張圖片。支援左右滑動。大致實現原理是滑動快結束時進行每個item下一位置的計算，之後再次滑動。待會我會上傳demo，喜歡的就直接去下載好了。註釋自己寫了不少，方便我調整，如果有更好實現的方式，麻煩請告知，網上看無限滑動的例子很多都

+【CSS3】使用純css程式碼實現圖片輪播效果

使用純CSS3程式碼實現簡單的圖片輪播。基本思路：以5張圖片為例： 1.基本佈局：將5張圖片左浮動橫向並排放入一個div容器（#photos）內，圖片設定統一尺寸，div寬度設定5個圖片的總尺寸，然後放入相框容器div（#frame），相框設定1個圖片

安卓首頁圖片輪播效果(淘寶、京東首頁廣告效果)

直奔主題： 1、主要原理就是利用定時任務器定時切換ViewPager的頁面。 2、裡面用了一個讀取網路圖片的外掛，做客戶端使用本地圖片輪播的也很少。先上個效果圖：專案程式碼結構截圖：自定義View 的佈局檔案layout_slideshow.xml： &l

原生javascript實現圖片輪播效果

最近學習javascript實現動畫效果，就用原生的javascript程式碼實現了圖片輪播的效果，供大家參考學習。 1.首先設定圖片輪播的地方（id=banner） 2.然後是一個圖片組 3.然後是一個按鈕層，用來定點陣圖片組( ul-->li)

【Android基礎知識】使用Gallery和ImageSwitcher實現圖片輪播效果

使用Gallery和ImageSwitcher實現滑動Gallery，切換ImageSwitcher的圖片。佈局檔案 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

HTML+CSS+JQ實現圖片輪播效果

焦點圖廣泛運用於主頁的醒目位置放置廣告，簡單好用，加上效果也很好看。實現的效果： 5張圖片每兩秒輪播一次，右下角的數字隨圖片而變換，滑鼠放在數字上圖片停止，移走滑鼠繼續播放。實現步驟： 1

寫一個圖片輪播效果的Demo(自動播放)附程式碼

相關推薦