2. 程式人生 > >JavaScript實現圖片輪播和滑鼠懸停顯示

JavaScript實現圖片輪播和滑鼠懸停顯示

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

例：

提前放好了四張圖片，並編號。

<!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>
  <title> loaction </title>
  <meta charset="utf-8" />
  <meta name="generator" content
 
="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
    .one{
        color:red;
        border:1px solid blue;
        cursor:hand;
    }
    label{
        margin-left:80px;
    }
 

  </style>
 </head>
<script type="text/javascript">
<!--
var n = 0;
var x = 0;
    function func(){

        var i = document.getElementById("i");
//此句不通用，只要能獲取當前的圖片編號即可。
        n = i.src.charAt(54)*1;
        n++;
        if(n==5){
            n=1;
        }
        i.src = "images/"
 
+n+".jpg";
        setTimeout("func()",2000);
    }
    function func1(x){  
        var i = document.getElementById("i");
        i.src = "images/"+x+".jpg";
    }
//-->
</script>
 <body onload = "func()" >
    <center>
    <img src="images/1.jpg" width="1000" height="600" alt="" id = "i" />

    <div>
    <h1>
        <label onmouseover = "func1(1)">1</label>
        <label onmouseover = "func1(2)">2</label>
        <label onmouseover = "func1(3)">3</label>
        <label onmouseover = "func1(4)">4</label>
    </h1>
    </div>
    </center>
 </body>
</html>

以上內容作為個人學習記錄，僅供參考。

相關推薦

JavaScript實現圖片輪播和滑鼠懸停顯示

例： 提前放好了四張圖片，並編號。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

viewPager+photoView實現圖片輪播和手勢縮放功能 支援手勢縮放的imageView 如何實現相簿左右滑動和手勢縮放 如何讓圖片自適應控制元件大小 photoView如何使用(上)

import uk.co.senab.photoview.IPhotoView; import uk.co.senab.photoview.PhotoViewAttacher; import uk.co.senab.photoview.PhotoViewAttacher.OnMatrixChangedList

用javascript實現圖片輪播

有兩點需要注意：①css中的left屬性不能用xxx.style.left獲得，把該屬性寫在html中的style中就可以獲得。②自定義屬性獲取方法：   如 <span index="2"></span>可以用var currentIndex=par

原生javascript實現圖片輪播效果

         最近學習javascript實現動畫效果，就用原生的javascript程式碼實現了圖片輪播的效果，供大家參考學習。 1.首先設定圖片輪播的地方（id=banner） 2.然後是一個圖片組 3.然後是一個按鈕層，用來定點陣圖片組( ul-->li)

Android使用ViewPager實現圖片輪播和手勢滑動

ViewPager常用來實現圖片的輪播，比如淘寶首頁，會把一些促銷的商品的圖片和描述資訊來回的播放，這就是典型的使用ViewPager實現的。 ViewPager屬於佈局管理器，允許使用者通過頁面翻轉檢視左右的資料，下面通過一個例項來講解ViewPager實現圖片輪播和手

JavaScript實現圖片輪播圖

<!DOCTYPE html> <html> <head> <script > var time; function init(){ //設定定時操作 time=setInterval("show()",0); //3秒執行一

JavaScript 實現圖片輪播

今天給大家介紹下怎麼用 JS 實現圖片輪播效果。 原理描述： 使用JS實現輪播的原理是這樣的：  假設初始的情況，下圖一個網格代表一個圖，初始時，顯示1 ： 當進行一次輪播後，顯示變為下圖 顯示2： 依次類推。 程式碼實現： 1 JS 程式碼： &

jquery實現圖片向左慢慢輪播（滑鼠懸停圖片停止輪播版）

window.onload=function(){ function $(id){ return document.getElementById(id); } var num=0; function autopl

使用原生javascript和css實現圖片輪播效果

<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>圖片輪播</title>

javascript 超簡單程式碼實現圖片輪播功能

一  利用setInterval()方法 1. <script type="text/javascript"> var tus=["1.jpg","2.jpg","3.jpg","4.jp

【Android基礎知識】使用Gallery和ImageSwitcher實現圖片輪播效果

使用Gallery和ImageSwitcher實現滑動Gallery，切換ImageSwitcher的圖片。 佈局檔案 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

JS實現圖片輪播效果（自動和手動）

本次輪播效果圖如下：具有以下功能：1.自動播放（滑鼠進入顯示區域時停止播放） 2.左右焦點切換  3.底下小按鈕切換以下為實現程式碼：首先是html程式碼：<!DOCTYPE html> <html lang="en"> <head>

JavaScript學習之用陣列實現圖片輪播

js程式碼： <script type="text/javascript"> //定義num為0 var num=0; //定義一個數組，其中元素為要實現輪播的圖片

iOS開發項目實戰——Swift實現圖片輪播與瀏覽

0.10 上網 timer類 開發項目 cas hub string obj tle 近期開始開發一個新的iOS應用，自己決定使用Swift。進行了幾天之後，發現了一個非常嚴峻的問題。那就是無論是書籍，還是網絡資源，關於Swift的實在是太少了，隨便一

JavaScript實現的輪播圖

n) undefined add tom als one lin 例如 fun 當初學習JavaScript的時候，想學習輪播圖是怎麽寫的，結果在百度搜了半天也很難搜出一個完整的輪播圖案例。現在就分享一個用js寫的輪播圖供大家參考和學習，有什麽錯誤的地方或有更好

CSS/HTML/JS實現圖片輪播

class fff 瀏覽器 tro back 全局 實現圖 func 原理 實現原理 將點擊的a標簽的href屬性值賦給img標簽的src屬性，這樣有個好處，就是如果瀏覽器不支持js的話，點擊a標簽也可跳轉到圖片地址看到圖片，不會影響內容的呈現 註：需要導入jquery

原生JavaScript實現無縫輪播圖

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

使用JQuery實現圖片輪播效果

left 簡述 flow href 集合 jpg -i round 輪播 【效果如圖】 【原理簡述】 這裏大概說一下整個流程： 1，將除了第一張以外的圖片全部隱藏， 2，獲取第一張圖片的alt信息顯示在信息欄，並添加點擊事件 3，為4個按鈕添加點擊偵聽，點擊相應的按鈕，用

原生JS實現圖片輪播

讓其 gin 偏移量 adding char 效率 lin doc 動畫效果 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

Flexslider插件實現圖片輪播、文字圖片相結合滑動切換效果

remove 12px body 類型 ons art cal 選項 csharp 插件下載： 　　點擊下載 密碼: fbeg Flexslider具有以下特性： 支持滑動和淡入淡出效果。 支持水平、垂直方向滑動。 支持鍵盤方向鍵控制。 支持觸控滑動。 支