原生js點選輪播點選切換圖片

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>點選輪播圖</title>
</head>
<style>
        .container {
            position: relative;
            width: 600px;
            height: 400px;
            margin:100px auto 0 auto;
            box-shadow: 0 0 5px green;
            overflow: hidden;
        } 
        .wrap {
            position: absolute;
            width: 4200px;
            height: 400px;
            z-index: 1;
        }
        .container .wrap img {
            float: left;
            width: 600px;
            height: 400px;
        }
         .container .buttons {
            position: absolute;
            right: 40%;
            bottom:20px;          
            z-index: 2;
        }   
        .container .buttons span {
            margin-left: 10px;
            display: inline-block;
            width: 7px;
            height: 7px;          
            background-color: #D4D4D4;
            text-align: center;
            color:white;
            cursor: pointer;           
        }
        .container .buttons span.on{
            background-color: #558949;
        }
        .container .arrow {
            position: absolute;
            top: 35%;
            color: green;
            padding:0px 14px;
            border-radius: 50%;
            font-size: 50px;
            z-index: 2;
            display: none;
        }
</style>
<body>
    <div class="container">
        <div class="wrap" style="left:-600px;">
            <img alt="">
            <img src="./img/jd_app3.png" alt="">
            <img src="./img/jd_app4.png" alt="">
            <img src="./img/jd_app5.png" alt="">
            <img src="./img/jd_app6.png" alt="">
            <img src="./img/jd_app7.png" alt="">       
        </div>
        <div class="buttons">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>   
    </div>
    
    <script>
    	var wrap = document.querySelector(".wrap");         
        var index = 0;
        var dots = document.getElementsByTagName("span");
        function showCurrentDot () {
            for(var i = 0, len = dots.length; i < len; i++){
                dots[i].className = "";
            }
            dots[index].className = "on";
        }
        index++;
            if(index > 4){
                index = 0;
            }
        index--;
        if(index < 0){
            index = 4;
        }
        showCurrentDot();
         for (var i = 0, len = dots.length; i < len; i++){
            (function(i){
                dots[i].onclick = function () {
                    var dis = index - i;
                    if(index == 4 && parseInt(wrap.style.left)!==-3000){
                        dis = dis - 5;     
                    }
                    //和使用prev和next相同，在最開始的照片5和最終的照片1在使用時會出現問題，導致符號和位數的出錯，做相應地處理即可
                    if(index == 0 && parseInt(wrap.style.left)!== -600){
                        dis = 5 + dis;
                    }
                    wrap.style.left = (parseInt(wrap.style.left) +  dis * 600)+"px";
                    index = i;
                    showCurrentDot();
                }
            })(i);            
        }
    </script>
</body>
</html>

原生js點選輪播點選切換圖片

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>點選輪播圖</title> </head> <

原生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,

原生JS例項之輪播圖《由簡單到炫酷》系列二

本文主要講述JavaScript原生輪播圖例項，如需JavaScript基礎請到菜鳥教程自己補習。目錄結構目標與思路本文講述最基礎的版本: 頁面載入完成後自動輪播實現思路：思路： 1、獲取圖

原生JS例項之輪播圖《由簡單到炫酷》系列一

本文主要講述JavaScript原生輪播圖例項，如需JavaScript基礎請到菜鳥教程自己補習。目錄結構目標與思路本文講述最基礎的版本: 點選圖片切換到下一張圖片實現思路：思路： 1、獲取圖片標

用原生JS寫無縫輪播

琢磨了幾個小時終於寫出來了，上程式碼這是佈局結構 <div id="box"><ul><li><a href="javascript:;"><img src="images/1.jpg" alt=""></

焦點輪播圖（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="#"

Android 輪播圖Banner切換圖片的效果

Android XBanner使用詳解 2018年03月14日 08:19:59 AND_Devil 閱讀數：910 前言:現如今的很多APP都

js點選輪播或者自動輪播圖程式碼

<!DOCTYPE html> <html> <head lang="en"> <meta charset="gbk"> <tit

小程式點選輪播圖跳轉到tab導航介面

需求：小程式點選輪播圖跳轉到tab導航介面，效果如下所示點選輪播圖的圖片，跳轉到我的介面上先實現以下的程式碼，在以下的基礎上，開始實現需求微信小程式底部導航欄https://www.jianshu.com/p/89a63dc99839 微信小程式輪播

仿小紅書圖片-橫條-文字聯動點選輪播

"大三暑假找了個做APP的公司實習，當時說好有大牛帶著做Android，工作內容卻變成了前端，並且技術主管要求我儘可能用Vue.js來做網站。那時候我只會一點點HTML，CSS也只會一些很基礎的內容，別說Vue了，JS我都不懂，並且整個公司的前端就只有我一個人，遇到不會的

點選輪播圖片左右按鈕，實現輪播效果

點選左右按鈕，實現圖片輪播效果，js程式碼如下： $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_c

仿京東首頁點選輪播圖進入唱片頁面

* tuijian : {"list":[{"bargainPrice":11800,"createtime":"2017-10-10T17:33:37","detailUrl":"https://item.m.jd.com/product/4338107.html?utm#_source=andr

類似酷狗主頁面的輪播點選效果

第一步，實現自動輪播 var index = 0; var stop = false; function xianshi() { if (stop) { return; } if (index < 3) { index++; }

JS原生帶小白點輪播圖

adding 完成 ext == 毫秒 oat auto margin add 咱們剛剛說了js原生輪播圖，現在給他加上可以隨著一起走動的小圓點吧！ css代碼： *{ margin:0px; padding: 0px; } ul{ widt

vue2.x實戰移動端音樂app的better-scroll 使用1.10.0版本遇到的坑設定dot的輪播點和輪播圖片不對應（二）

1.dots的長度//這裡不變 console.log(this.dots)長度為5 _initDots(){ this.dots=new Array(this.children.length) console.log(this.dots)

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

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

圖片輪播點擊輪播（二）

-s pad mat gin += col urn 圖片輪播輪播自定義點擊左右滾動 HTML部分 <div id="img-slider"> <button id="prev"><img src="image/left

原生js點選輪播 點選切換圖片

相關推薦

原生js點選輪播點選切換圖片