2. 程式人生 > >簡易圖片自動輪播

簡易圖片自動輪播

阿新 • • 發佈：2017-05-09
pan -h function interval :hover osi 好的 pointer rip

根據前段時間學的大圖輪播，自己做了一個簡單的圖片自動輪播

代碼如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #body
            {
                width: 90%;
                border: 1px solid red;
                height
 
: 1000px;
                margin: 0px auto;
            }
            #stage
            {
                width: 1000px;
                height: 500px;
                border: 10px solid black;
                position: absolute;
                left: 150px;
                top: 200px;
                overflow:
 
 hidden;
            }
            #left-btn
            {
                position: absolute;
                left: 0px;
                top:0px;
                height: 500px;
                width: 40px;
                background-color: black;
                color: white;
                opacity: 0.5
 
;
                line-height: 500px;
                text-align: center;
                font-size: 30px;
                z-index: 999;
            }
            #right-btn
            {
                position: absolute;
                right: 0px;
                top:0px;
                height: 500px;
                width: 40px;
                background-color: black;
                color: white;
                opacity: 0.5;
                line-height: 500px;
                text-align: center;
                font-size: 30px;
                z-index: 999;
            }
            #left-btn:hover
            {
                cursor: pointer;
                opacity: 0.7;
            }
            #right-btn:hover
            {
                cursor: pointer;
                opacity: 0.7;
            }
            #ad-banner
            {
                height: 500px;
                width: 5000px;
                position: relative;
                background-color: blue;
            }
            .ad{
                width: 1000px;
                height: 500px;
                float: left;
                text-align: center;
                line-height: 500px;
                font-size: 100px;
            }
        </style>
    </head>
    <body>
        <div id="body">
            <div id="stage">
                <div id="left-btn"><</div>
                <div id="right-btn">></div>
                <div id="ad-banner">
                    <div class="ad" style="background-color: red">1</div>
                    <div class="ad" style="background-color: green">2</div>
                    <div class="ad" style="background-color: blue">3</div>
                    <div class="ad" style="background-color: pink">4</div>
                    <div class="ad" style="background-color: white">5</div>
                </div>
            </div>
        </div>
    </body>
</html>
<script>
var speed = 10; 
var count = 1;
var banner = document.getElementById(‘ad-banner‘);
var arr = Array();
window.onload=function(){setInterval(‘change()‘,3000);}
function change()
{
arr.push(window.setInterval(‘moveLeft()‘,10));
}
function moveLeft()
{
var banner_left = banner.offsetLeft;
    if(count<5)
    {
        if(banner_left>(count*(-1000)))
        {
        banner.style.marginLeft = banner_left - speed + ‘px‘
        }
        else
        {
            for(var i in arr)
            {
                window.clearInterval(arr[i]);
            }
        
            if(count<5)
            {
            count++;
        
            }
         }
    }
    else if(count==5)
    {
        banner.style.marginLeft = banner_left + 4000 + ‘px‘;
                for(var i in arr) {
                        window.clearInterval(arr[i]);
                    }
                count=1
    }
}

其中有個體驗不好的地方是從最後一張到第一張速度太快，沒有輪播效果。這個問題有待解決。

簡易圖片自動輪播

相關推薦

簡易圖片自動輪播

pan -h function interval :hover osi 好的 pointer rip 根據前段時間學的大圖輪播，自己做了一個簡單的圖片自動輪播 代碼如下 <!DOCTYPE html> <html> <head>

圖片自動輪播

oot type utf-8 rev tle inner int val css <!DOCTYPE html><html><head><meta charset="UTF-8"><title></title

mui 圖片自動輪播

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">  &

JS練習：替換式圖片自動輪播

程式碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script>

簡單的一個圖片自動輪播

學習前端有一段時間了，把自己做的一個效果貼出給大家共享，哪裡寫的不好的請指正。先把程式碼貼出來給大家瞧！ <style> ul,li{ list-style:none; margin:0; padding:0;} ul{ width:913px; margin:20px auto;

js實現圖片自動輪播

今天有人問我這個問題，我就順便把這個記下來，分享給大夥。 如圖，就是圖片自己輪播，並且圖中中下方的白點也發生變化，圖片到哪，白點就到哪，就直接上程式碼了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

bootstrap實現圖片自動輪播

效果圖 程式碼實現： <!DOCTYPE html> <html lang="zh-CN"> <head> <link rel="stylesheet" href="bootstrap.min.css

圖片自動輪播（仿淘寶？？）

先上效果圖（給美宅瘋狂打call~） 是不是你們要找的效果，是的話就繼續往下看hahaha 上重點（敲黑板）！！！ js <script> $(function () { var containl

jquery圖片自動輪播效果

HTML程式碼如下： <div id="container"> <img src="icon1.jpg" class="left"> <img src="icon2.jpg" c

android 實現廣告圖片自動輪播帶文字，可從最後一張滑到第一張，而不是回到第一張。

   之前做了個專案，要實現首頁頂部廣告輪播，於是去網上找了許多資料進行修改，實現到是實現了，但是最後一張滑到第一張的時候是從右到左快速回去。是的，是回去。客戶表示不滿意啊。咋辦，沒辦法客戶是大爺嘛，那就繼續改唄。於是做出了現在的這個。以下進入正文。先上效果圖 以上三張圖

自動輪播本地圖片觸摸暫停輪播

listen linear down raw post callback android color let 第一步自己創建自動輪播視圖： 1 public class AutoShowView extends FrameLayout { 2 privat

從網路中獲取圖片進行自動輪播

MainActivity package com.example.lunbotu2; import android.annotation.SuppressLint; import android.os.Handler; import android.os.Message; impor

ViewPager新增圖片橫向自動輪播

1、Dot_focus.xml程式碼 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/andr

Android使用ViewPager實現圖片輪播(高度自適應，左右迴圈，自動輪播)

效果 前言 該效果實現是基於我的第一篇部落格 Android使用ViewPager實現引導頁（帶小點提示）進行改進的，因此部分相同的地方我不會再重複描述，有意全面瞭解的可以先看完該篇部落格。 實現 為實現自定義一個通用的控制元件，我們首先建立一個類繼承ViewPager

自動輪播，類似字幕或圖片自動滾動播放

功能：ListView沒隔一段時間自動滾動一段距離，當滾動到底部時，又從頭開始顯示，類似於原始資料為0123，而滾動起來則是012301230123...一直重複顯示，這樣就達到了資訊輪播的功能。 本功能採用擴充套件ListView來實現的， public class Au

關於banner獲取網路圖片設定自動輪播

1、首先匯入依賴包 compile 'com.youth.banner:banner:1.4.9' 2、在佈局檔案中建立banner的控制元件 <com.youth.banner.Banner android:layout_width="match_parent"

ViewPager圖片橫向自動輪播方法2

public class MainActivity extends AppCompatActivity { private static ViewPager viewPager; private RadioGroup group; //圖

原生JS實現圖片滿屏自動輪播求助，大神趕緊來吧！

上週去面試前端開發，那個程式猿大哥就直接讓我上機操練了，做一個“簡單”的網頁，當然，對我來說是很難的，畢竟剛開始學習。模板網頁的地址在這裡，有兩個： 搞了好長時間都沒弄出來，真的快要崩潰了，我就直接上程式碼吧，哪位大神看到支支招，給一些關鍵的建議，主要是滿屏圖片輪播

android 視訊和圖片切換並進行自動輪播

剛入android沒多久，遇到的比較鬱悶的問題就是子執行緒主執行緒的問題，更改UI介面，本想做一個圖片的輪播但是比較簡單，然後就試試實現視訊跟圖片切換播放進行不停的迴圈播放。也用過不少控制元件，但是知其然不知其所以然，後來自己寫了一段來實現圖片視訊互相切換輪播。在這寫下一篇

圖片輪播、自動輪播、點擊輪播（一）

新的 set ttr n) settime document .get offset span HTML部分 <div id="slide_two" class="slide"> <ul style="transform: translateX(-