2. 程式人生 > >JavaScript實現簡單的圖片輪播（通過點選左右焦點切換）

JavaScript實現簡單的圖片輪播（通過點選左右焦點切換）

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

最終實現效果圖

這裡寫圖片描述

程式碼塊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body, ul, ol, li, img {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width
 
: 490px;
            height: 270px;
            padding: 5px;
            position: relative;
            border: 1px solid #ccc;
            margin: 100px auto 0;
        }

        .ad {
            width: 490px;
            height: 270px;
            overflow: hidden;
            position: relative;
        }
 


        #box img {
            width: 490px;
        }

        .ad ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

        .ad ol li {
            width: 20px;
            height: 20px;
            line-height: 20px;
            border: 1px solid #ccc;
            text-align
 
: center;
            background: #fff;
            float: left;
            margin-right: 10px;
            cursor: pointer;
            _display: inline;
        }

        .ad ol li.current {
            background: yellow;
        }

        .ad ul li {
            float: left;
        }

        .ad ul {
            position: absolute;
            top: 0;
            width: 2940px;
        }

        .ad ul li.current {
            display: block;
        }

        #arr {
            display: none;
        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑體';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
</head>
<body>
<div id="box" class="all">
    <div class="ad">
        <ul id="imgList">
            <li><img src="images/1.jpg"/></li>
            <li><img src="images/2.jpg"/></li>
            <li><img src="images/3.jpg"/></li>
            <li><img src="images/4.jpg"/></li>
            <li><img src="images/5.jpg"/></li>
        </ul>
    </div>
    <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>


<script type="text/javascript">
    //需求 點選左右箭頭 以動畫效果移動ul到指定位置
    //找人
    var box = document.getElementById("box");
    var ad = box.children[0];
    var ul = document.getElementById("imgList");
    var lis = ul.children;
    var arr = document.getElementById("arr");
    var left = document.getElementById("left");
    var right = document.getElementById("right");
    var imgWidth = ad.offsetWidth;


    //滑鼠經過arr時，顯示arr內的元素，滑鼠離開時隱藏
    box.onmouseover = function(){
        arr.style.display = "block";
    }
    box.onmouseout = function(){
        arr.style.display = "none";
    }

    //點選右箭頭，以動畫的形式，把ul移動到指定的位置
    var pic = 0;    //記錄當前顯示位置的索引
    right.onclick = function(){
        //先判斷       如果是最後一個圖片的索引，就不能再執行了
        if(pic===lis.length-1){
            return;
        }
        pic++;

        //目標    和pic有關，和圖片寬度有關 而且是負數
        var target = -pic*imgWidth;
        animate(ul,target);
    }


    //點選左箭頭，以動畫的形式，把ul移動到指定的位置
    left.onclick = function(){
        //先判斷       如果是第一個圖片的索引，就不能再執行了
        if(pic===0){
            return;
        }
        pic--;

        //目標    和pic有關，和圖片寬度有關 而且是負數
        var target = -pic*imgWidth;
        animate(ul,target);
    }



    function animate(obj, target) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var step = 20;
            var step = obj.offsetLeft < target ? step : -step;
            if (Math.abs(obj.offsetLeft - target) > Math.abs(step)) {
                obj.style.left = obj.offsetLeft + step + "px";
            } else {
                obj.style.left = target + "px";
                clearInterval(obj.timer);
            }
        }, 15)
    }
</script>
</body>
</html>

相關推薦

JavaScript實現簡單的圖片輪播（通過點選左右焦點切換）

最終實現效果圖 程式碼塊 <!DOCTYPE html> <html lang="en"> <head> <meta charset

使用javascript實現簡單的輪播圖效果

最近在做公司的網站，有一個輪播圖的功能，網上倒是有現成的js元件，我用了一下swiper,但是發現嵌入進去時不太好用，好在公司的網站要求也不是很高，索性就使用純的js做一下唄。 1.首先新建一個html頁面，先把簡單的佈局做出來 我的html部分如下 <body&g

android自定義組合控制元件圖片輪播+小圓點+點選跳轉廣告頁面

1.寫一個佈局,用於自定義組合控制元件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/and

簡單實現一個圖片輪播

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

html簡單圖片輪播的實現

這裡的圖片輪播方法是我從網上參考的方法，只是自己做了一些改進 先來貼一發程式碼 <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" type="text/css" href

JS實現簡單的輪播圖（非常簡單，一看就懂）

主要思路：先將需要輪播的4張圖使用絕對定位讓其重疊在banner這個盒子中，然後遍歷所有的圖片將其隱藏，再獲取當前圖片的index值，根據當前的index值設定當前的圖片顯示出來。設定間歇定時器setI

Android之——史上最簡單圖片輪播廣告效果實現

如今的Android開發需求越來越來多，實現效果越來越酷炫，很多Android APP都要實現PC網站上那樣的圖片輪播效果，那麼，這些圖片的輪播效果是如何實現的呢？下面，我就跟大家一起來實現這些酷炫的功能。 一、原理 首先，將這些要輪播的圖片和一些文字分別放置在不同的資料集合中，程式啟動的時候預設

JS製作簡單圖片輪播--通過調整margin製作

圖片輪播在網頁中使用的非常廣泛，製作的方法有很多，介紹一下我用調整margin來實現3張圖片輪播功能。 設計思路： 自動跳轉。三張圖片每隔3秒跳轉一張，第三張圖片跳轉完成後，3秒後跳轉至第一張圖片

javascript push()、shift()、pop()、unshift()實現簡單導航輪播效果

 最近做一個本來只有三期活動的頁面，後面偉大的需求說後面需求可能增加到n期，所以有一個以三期活動為一組的輪播，實現輪播的外掛太多了，但是後端說不希望用外掛，因為他那邊可能要變動，所以就手動實現了一個簡單的輪播效果 var length=$('.ul-nav li').le

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

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

JavaScript實現簡單圖片滾動 --9張圖告訴你，C羅欲哭無淚

charset () element edit fas 簡單圖 pad jpg sni 源代碼下載：http://download.csdn.net/detail/u011043843/7510425 昨晚德國和葡萄牙的焦點之戰你看了嗎？北京時間淩晨的比賽

js實現簡單的輪播效果

utf int ack load blog 輪播 HA 實現簡單 interval <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

jQuery實現簡單的輪播圖

jQuery先看效果，如果是你想要的，可以看看總體思路： 1.自動輪播2.指定輪播3.左右翻動 詳細步驟：jQuery部分 設置第一張圖片顯示，其他的兄弟元素隱藏 自動輪播的時候，指定第一張的索引為 i=0，然後 i++, 使其對應的 i 索引的圖片顯示，其他的隱藏，當 i=5（即第六張圖片的時候，使其為

vue練習demo 實現簡單的輪播圖,方法簡單快捷,使用到transition-group標籤增加使用者體驗 以及vue中的class與style繫結

結構程式碼:   　　 <div class="slider"> <div class="slidershow"> <!-- <transition-group tag="ul">

Android--圖片輪播（banner）

使用步驟 Step 1.依賴banner Gradle dependencies{ compile 'com.youth.banner:banner:1.4.10' //最新版本 } 或者引用本地lib compile project(':bann

原生JS做圖片輪播（自動或手動）

前言     前端基本上靠用現成的封裝好的控制元件的我，今天也算是自己改了一回程式碼，也自己寫了寫原生JS，改了一下響應程式碼。需求是這樣的，頁面的記錄中有多個附件，如果附件是圖片的話，檢視圖片時要多張圖片進行輪播，實際需求是不能自動，要手動控制圖片切換。說起來也不難，用

如何使用setInterval實現簡單的輪播圖效果？

<div> <img src="./images/1.jpg" id="imgS" /> </div> <button type="button">下一張</button> <button type="button"&

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

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

wpf圖片輪播（未釋放資源）

今天有個臨時需求，做圖片輪播，以前做了一個，找不到了。 想了個簡單的方法臨時拿著用，這裡先記著有空再來改。 上程式碼-----》 using System; using System.IO; using System.Windows; using System.Windo

Android ViewPager實現的圖片輪播

Android ViewPager實現的簡單圖片輪播 HoriziontalBannerView hsv = (HoriziontalBannerView) findViewById(R.i