純js實現無縫輪播圖

阿新 • • 發佈：2019-01-12

很多時候我們都會用到無縫輪播圖，那麼下面我就把無縫輪播獻給大家

1.左右無縫輪播

<!DOCTYPE html >
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>圖片左右無縫滾動的效果</title>
    <style type="text/css">
        #list {
            overflow: hidden;
            height 
: 231px;
            width: 680px;
            margin: 0 auto;
            padding-top: 20px;
        }
        img{
            width:155px;
            height:190px;
            padding-left: 10px;
        }
        img:hover{
            -o-transform: scale(1.6);
            -ms-transform: scale(1.6);
            -moz-transform 
: scale(1.6);
            -webkit-transform: scale(1.6);
            transform: scale(1.6);
        }

    </style>
</head>
<body>
<div id="list">
    <table>
    <tr>
        <td id="list1">
            <table style="border: 0;" cellpadding="0" cellspacing="0" 
>
                <tr id="pic">
                   <td><img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="無縫滾動" /></td>
                    <td><img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="無縫滾動" /></td>
                    <td> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="無縫滾動" /></td>
                    <td>  <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="無縫滾動" /></td>
                    <td>  <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="無縫滾動" /></td>
                    <td> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="無縫滾動" /></td>
                    <td> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="無縫滾動" /></td>
           </tr>
            </table>
                </td>
        <td id="list2"></td>
    </tr>
        </table>
</div>

<script type="text/javascript">
//   圖片滾動效果

    window.onload = function () {
        var speedpic = 20;//速度數值越大速度越慢
        document.getElementById("list2").innerHTML = document.getElementById("list1").innerHTML;
        function Marqueepic() {
            if (document.getElementById("list2").offsetWidth
                    - document.getElementById("list").scrollLeft <= 0) {
                document.getElementById("list").scrollLeft -= document
                        .getElementById("list2").offsetWidth;
            } else {
                document.getElementById("list").scrollLeft++;
            }
        }
        var MyMarpic = setInterval(Marqueepic, speedpic);
        document.getElementById("list").onmouseover = function() {
            clearInterval(MyMarpic);
        };
        document.getElementById("list").onmouseout = function() {
            MyMarpic = setInterval(Marqueepic, speedpic);
        };
    }
</script>
</body>
</html>

2.上下無縫輪播

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>圖片上下無縫滾動的效果</title>
    <style type="text/css">
        #marquee {
            position: relative;
            height: 300px;
            width: 200px;
            overflow: hidden;
            border: 10px solid #369;
            padding:0;
            margin:0;
        }
        #marquee img {
            display: block;
        }
        #marquee dd {
            margin: 0;
            padding: 0;
        }
    </style>
    </head>
<body>
    <dl id="marquee">
        <dt>
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="無縫滾動" />
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="無縫滾動" />
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="無縫滾動" />
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="無縫滾動" />
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="無縫滾動" />
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="無縫滾動" />
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="無縫滾動" />
        </dt>
        <dd>
        </dd>
    </dl>
    <script type="text/javascript">
        var Marquee = function (id) {
            var container = document.getElementById(id),
                    original = container.getElementsByTagName("dt")[0],
                    clone = container.getElementsByTagName("dd")[0],
                    speed = arguments[1] || 10;
            clone.innerHTML = original.innerHTML;
           alert(arguments[1] );
            alert(container.scrollTop);
            alert(clone.offsetTop);
            var rolling = function () {
                if (container.scrollTop == clone.offsetTop) {//我現在糾結的就是container.scrollTop和clone.offsetTop的區別為什麼clone.offsetTop是1050，而外面的container.scrollTop卻是0
                    container.scrollTop = 0;
                } else {
                    container.scrollTop++;
                }
            };
            var timer = setInterval(rolling, speed);
            container.onmouseover = function () { clearInterval(timer); };
            container.onmouseout = function () { timer = setInterval(rolling, speed); };
        };
        window.onload = function () {
            Marquee("marquee");
        }
    </script>
</body>
</html>

純js實現無縫輪播圖

很多時候我們都會用到無縫輪播圖，那麼下面我就把無縫輪播獻給大家 1.左右無縫輪播 <!DOCTYPE html > <html> <head> <

純css3實現無縫輪播圖效果

主要就是利用css3中的動畫了，看完整實現程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>純

原生JavaScript實現無縫輪播圖

原生原生js ted 結束阻止 time == 實現圖 put 無縫輪播圖是頁面常用的特效之一，然而在實際的開發過程中，大部分的開發者都會使用插件來對輪播圖進行開發，那麽它的底層到底是怎麽實現的呢，本文章將圍繞這一問題展開探討。在討論如何利用原生JS實現圖片之間無縫切

原生js實現無縫輪播

cli spl city ive ont eve 通過動畫 change 原生js實現無縫輪播　　因為要做到無縫，所以就要把第一張圖片和最後一張連接起來，在此處采用js克隆了第一張圖片的節點，添加到最後，顯示圖片序號的小圓按鈕也是使用js動態添加的。 html部分

原生js實現簡單輪播圖效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首頁</title> <style> .father{

原生JS實現旋轉輪播圖+文字內容切換

window.onload = function () { var arr = [ { // 1 width:120, top:11, left:87, opacity:20,

zepto框架以及原生方法實現無縫輪播圖

注：zepto實現在pc端模擬有一定的bug，把裡面的start=false註釋掉即可 Zepto實現。 HTML程式碼： <div class="homePageBanner"> <ul> <li><a hr

jQuery外掛slides實現無縫輪播圖特效

初始化外掛： slides是一款基於jQuery無縫輪播圖外掛,支援圖內元素動畫，可以自定義動畫型別 1 2 3 4 5 6 7 8 9 10 $(".slideInner").slide({

js特效-無縫輪播圖，簡單上手

首先，讓大家看效果：然後給大家介紹一下無縫輪播圖的原理 1.我們在一個ul中會使用很多的li，每一個li中嵌入一個圖片，如果把輪播圖比喻成慢視訊的話，每一張圖片就是一幀(注意:很多新手會認為一些圖

jq 實現無縫輪播圖

工作中經常會用到輪播圖，這裡記載兩種輪播圖，供大家參考一、自動播放的無縫輪播圖（一張圖片佔滿屏）首先是HTML， <div class='bannerCon'> <ul class="bannerContainer" id="ban

焦點輪播圖（7）原生JS實現焦點輪播圖--完整程式碼

輪播圖終於更完了，附上完整程式碼： <html> <head> <meta charset="utf-8" /> <title>焦點輪播圖</title> <style type=

用原生JS實現旋轉輪播圖

html程式碼<div class="wrap" id="wrap"> <div class="slide" id="slide"> <ul> <li><a href="#"

用js實現旋轉輪播圖

首先我們需要明白3d輪播圖的原理移動的原理: 首先每一站圖片對應這一個樣式向左移動: 我們可以將第一張圖片樣式給刪除，新增到最後一張(第五張)樣式的後面，這樣就實現了向左圖片的切換向右移動: 我們可以將最後一張(第五張)圖片樣式給刪除，新增到第一張樣式的前面，

JS 無縫輪播圖1-節點操作

idt radius nbsp black -o flow 開開接下來 con 無縫輪播圖 (使用節點操作) <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

關於js物件中兩個函式互相呼叫，其中一個為定時器宣告，定時器迴圈報錯問題（記錄一次嘗試新寫法的報錯經歷）附帶無縫輪播圖程式碼

先上之前的錯誤程式碼吧，注意計時器這個方法（是想把之前寫的的輪播圖演示重構一下） var obj = { sleepTime: 2000,//輪播延時 cont: 0,//第幾張 origin: document.getElementsByClassName('main-

JS寫一個最簡單的無縫輪播圖

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d

js面向物件---無縫輪播圖（附面向過程程式碼）

window.onload = function(){ var t1 = new Lb("box"); t1.l(); //設定包含圖片的ul寬度 t1.dot(); //點哪個圓,相對應的圖片顯示

Bootstrap實現基於carousel.js框架的輪播圖效果（無過渡動畫）

宣告式觸發需要使用到的幾個data-*屬性 1.data-ride：作用在最外層容器上，固定值:carousel 2.data-target：作用在class=carousel-indicator

例子---JS無縫輪播圖

DuangDuang，今天我們來一起說說JS實現無縫輪播。沒錯，顧名思義，就是我們腦子中浮現的類似淘寶主頁面中間部分的那個滾動圖。這個輪播圖的使用頻率還是很大的，所以還是很有必要好好研究一下的。哈哈，按照慣例我們先來說一下它的實現原理吧。第一步，需要

jQuery實現的無縫輪播圖

其實只要原生js學好了，能夠實現輪播圖無縫切換，再用jQuery寫，感覺簡單多了，嗯、為了熟悉jQuery的用法，還是動手把它實現了，廢話不多說，看程式碼吧，實現的過程都註釋在程式碼中了，嗯、要養成註釋的好習慣個人認為，無縫輪播，最主要解決的就是當圖片在第一張（或最後一張），

純js實現無縫輪播圖

相關推薦