橫向滾動輪播圖

阿新 • • 發佈：2018-09-20

圓點 event char tran color 數組 translate amp osi

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <style type="text/css">
    .slider_main {
        width: 790px;
        height: 340px;
        margin: 20px auto;
        position: relative;
        overflow: hidden;
    }

    .slider_list {
        position: relative;
        left: 0px;
    }

    .item {
         
float: left;
    }

    .item:first-child {
        display: block;
    }

    .item a img {
        display: block;
    }

    .circle_dot {
        position: absolute;
        left: 50%;
        bottom: 20px;
        margin: auto;
        font-size: 0;
        padding: 4px 8px;
        border-radius: 12px;
        background 
-color: hsla(0, 0%, 100%, .3);
        z-index: 1;
        transform: translateX(-50%);
    }

    .dot {
        display: inline-block;
        margin: 0 5px;
        width: 12px;
        height: 12px;
        border-radius: 100%;
        background-color: #fff;
        cursor: pointer;
    }

    .dot.active {
        background 
-color: #db192a;
    }

    .arrow {
        display: none;
        position: absolute;
        z-index: 1;
        top: 50%;
        margin-top: -30px;
        width: 30px;
        height: 60px;
        background-color: rgba(0, 0, 0, .1);
        line-height: 60px;
        text-align: center;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
    }

    .arrow:hover {
        background-color: rgba(0, 0, 0, 0.5);
    }

    .prev {
        left: 0;
    }

    .next {
        right: 0;
    }
    </style>
</head>

<body>
    <div id="slider" class="slider_main">
        <ul class="slider_list clearfix">
            <li class="item">
                <a href="#">
                    <img class="item_img" src="img/1.jpg" />
                </a>
            </li>
            <li class="item">
                <a href="#">
                    <img class="item_img" src="img/2.jpg" />
                </a>
            </li>
            <li class="item">
                <a href="#">
                    <img class="item_img" src="img/3.jpg" />
                </a>
            </li>
            <li class="item">
                <a href="#">
                    <img class="item_img" src="img/4.jpg" />
                </a>
            </li>
            <li class="item">
                <a href="#">
                    <img class="item_img" src="img/5.jpg" />
                </a>
            </li>
            <li class="item">
                <a href="#">
                    <img class="item_img" src="img/6.jpg" />
                </a>
            </li>
            <li class="item">
                <a href="#">
                    <img class="item_img" src="img/7.jpg" />
                </a>
            </li>
            <li class="item">
                <a href="#">
                    <img class="item_img" src="img/8.jpg" />
                </a>
            </li>
        </ul>
        <!--指示器-->
        <div class="circle_dot">
        </div>
        <!--箭頭-->
        <div class="prev arrow">&lt;</div>
        <div class="next arrow">&gt;</div>
    </div>
</body>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function Slider(option) {
    // 默認參數
    this.defaultOpt = {
        //容器
        wrap: ".slider_main",
        //輪播間隔
        duration: 3000,
        //切換速度
        speed: 1000
    }
    this.opt = $.extend({}, this.defaultOpt, option);

    this.wrap = $(this.opt.wrap);
    this.$list = this.wrap.find(‘.slider_list‘);
    this.prevBtn = this.wrap.find(‘.prev‘);
    this.nextBtn = this.wrap.find(‘.next‘);
    this.dotBox = this.wrap.find(‘.circle_dot‘);
    this.li = this.$list.find(‘li‘);
    //定時器obj
    this.time = null;
    //當前圖片停留時的索引
    this.index = 0;
    //自動運行
    this.init();
}
Slider.prototype = {
    constructor: Slider,
    init: function() {
        var self = this;
        this.createDot();
        //取得每次移動距離
        this.step = this.wrap.width();
        //設置list的總寬度
        this.$list.width(this.step * (this.li.length + 1));
        //獲取指示器li數組
        this.dot = this.dotBox.find(‘.dot‘);
        this.indicator(this.index);
        //取得第一個元素，插入到末尾
        var $copyLi = this.li.eq(0).clone(true);
        this.$list.append($copyLi);
        //綁定事件
        this.bindEvent();
        //自動輪播
        this.play();
    },
    createDot: function() {
        var self = this;
        this.li.each(function(i) {
            //生成指示器的點
            var $li = $(‘<div class="dot"></div>‘);
            self.dotBox.append($li);
        });
    },
    animate: function(step) {
        var now = this.$list.position().left;
        var hope = now + step;
        // 第一張
        if (hope > 0) {
            this.$list.stop(true, true).animate({
                left: this.step * (1 - this.li.length)
            }, this.opt.speed);
            return;
        }
        // 最後一張
        if (hope <= -this.step * this.li.length) {
            this.$list.animate({
                left: hope
            }, this.opt.speed, function() {
                $(this).css({
                    left: 0
                });
            });
            return;
        }
        this.$list.stop(true, true).animate({
            left: hope
        }, this.opt.speed);
    },
    bindEvent: function() {
        var self = this;
        //右邊箭頭點擊
        this.nextBtn.click(function() {
            self.index++;
            if (self.index > (self.li.length - 1)) {
                self.index = 0;
            }
            self.animate(-self.step);
            self.indicator(self.index);
        });
        //左邊箭頭點擊
        this.prevBtn.click(function() {
            self.index--;
            //判斷臨界值
            if (self.index < 0) {
                self.index = self.li.length - 1;
            }
            self.animate(self.step);
            self.indicator(self.index);
        });
        //輪播圖hover事件
        this.wrap.hover(function() {
            self.prevBtn.stop(true, true).fadeIn();
            self.nextBtn.stop(true, true).fadeIn();
            self.stop();
        }, function() {
            self.prevBtn.stop(true, true).fadeOut();
            self.nextBtn.stop(true, true).fadeOut();
            self.play();
        });
        //指示器點擊事件
        this.dotBox.on("click", ".dot", function() {
            //計算需要位移的距離，self.index當前圖片索引，$(this).index()點擊的指示器索引
            var index = $(this).index();
            self.indicator(index);
            var distance = self.step * (self.index - index);
            self.animate(distance);
            //存放鼠標點擊後的位置，用於小圓點的正常顯示
            self.index = index;
        });
    },
    stop: function() {
        clearInterval(this.time);
    },
    play: function() {
        var self = this;
        this.time = setInterval(function() {
            self.nextBtn.trigger("click");
        }, this.opt.duration);
    },
    indicator: function(index) {
        //修改指示器的樣式
        this.dot.removeClass(‘active‘);
        this.dot.eq(index).addClass(‘active‘);
    }
}
$(document).ready(function() {
    var mySlider = new Slider({
        duration:1600
    });
});
</script>

</html>

橫向滾動輪播圖

圓點 event char tran color 數組 translate amp osi <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l

簡單的左右滾動輪播圖

nsf javascrip pan position 個數 webkit translate over gin <!DOCTYPE html> <html lang="en"> <head> <meta chars

vue慕課網音樂項目手記：5-手寫滾動輪播圖（上）

flow overflow box cor 慕課 efs PE osi 通過在這一節，會封裝一些公用的函數來添加classname，改變image的寬度。具體如下：首先：封裝一個slider的組件 <template> <div cl

無縫滾動輪播圖（3）

我吃了炫邁做出來的輪播圖，停不下來的那種一、結構 <div class="box" id="screen"> <ul> <li><img src="http://img.mp.itc.cn/upload/20161107/033

原生javascript寫的無縫滾動輪播圖

html程式碼 <div id="box"> <ul> <li><img src="imgs/1.jpg" /></li>

無縫滾動輪播圖

即實現無縫滾動，又擁有普通輪播圖的的功能。無縫滾動原理：首先宣告圖片向左滑動的； 1.HTML，開始我們要在輪播圖容器內第一張圖片前新增我們需要顯示圖片的最後一張，同樣在最後一張的後面新增我們需要顯示圖片的第一張； 2.CSS，剛開始我們需要顯示第一張圖片

原生js實現無縫滾動輪播圖（移動端）-自動輪播

想不依賴任何外掛和庫，就用原生js實現移動端自動輪播，發現網上的都不盡如人意，乾脆自己寫一個，程式碼有部分參考，廢話少說，上程式碼。 head部分，沒什麼好說的： <meta charset="utf-8"> <me

JS實現無縫滾動輪播圖的原理

NPU func etl () initial body position com hidden 用JS實現無縫滾動輪播圖的方法有很多，我自己瞎琢磨了一個，原理非常簡單，就是點擊按鈕的一瞬間，把 ul 拉到某一個位置，然後再滑動，這樣就成了無縫滑動為

vue裡面上下輪播圖（app，廣告提示，手機號滾動等）

vue-seamless-scroll 外掛 1.下載外掛 npm install vue-seamless-scroll --save 2. 在main.js裡面引入使用 import scroll from 'vue-seamless-scroll' Vue.use

web前端技術課程講解之關於輪播圖水平無縫滾動

製作這個簡單的輪播圖之前，你必須掌握html、css、以及JavaScript中的節點操作，定時器的使用，條件語句的使用以及JS修改樣式和動畫原理。輪播圖對於網頁來說是個常見也可以說是必備的部分，而輪播圖的形式也是各式各樣，有簡約的也有炫酷的。當然，這裡我就只說簡約的全屏輪播圖水平無縫滾動。首先是給出

潭州課堂25班：Ph201805201 django 專案第二十二課文章主頁新聞列表頁面滾動載入，輪播圖後臺實現 (課堂筆記）

新建static/js/news/index.js檔案，主要用於向後臺傳送請求， // 新建static/js/news/index.js檔案 $(function () { // 新聞列表功能 let $newsLi = $(".news-nav ul li"); let iPa

潭州課堂25班：Ph201805201 django 項目第二十二課文章主頁新聞列表頁面滾動加載，輪播圖後臺實現 (課堂筆記）

後臺 add bubuko 打印 data src mov auth tap 新建static/js/news/index.js文件，主要用於向後臺發送請求， // 新建static/js/news/index.js文件 $(function () { // 新

輪播圖---左右切換無長滾動效果輪播圖-中級難度版

左右切換無長滾動輪播圖思路：首先設有全域性變數position（確定當前圖片是第幾張），arr陣列：存放圖片地址，方向：direction，及lis小圓點陣列，prev，記錄小圓點的前一個， moveBool是否進入運動函式等1、點選事件：點選左邊的leftBn，設定direction="right"，p