js簡單圖片切換

阿新 • • 發佈：2017-09-21

opened view img play display ima onclick show back

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8"/>
 5         
 6         <title>
 7 
 8         </title>
 9         
10     </head>
11         <style>
12             #zp img{
13                 margin:0 auto;
14             } 

15         </style>
16     <body>
17         <div id="zp">
18         <img src="iamges/46.png" width="300" height="200" id="img1"/>
19         </div>
20         
21         <input type="button" value="上一張" onclick="sz()"/>
22         
23         <input type="button" 
 value="下一張" onclick="xz()"/>
24     </body>
25     
26     <script type="text/javascript">
27             var picArr=new Array("iamges/46.png","iamges/47.png","iamges/48.png","iamges/49.png","iamges/50.png");
28             
29             var xp=0;
30             
31             function 
 sz(){
32                 
33                 xp++;
34                 if(xp==picArr.length){
35                     xp=0;
36                 }
37                 document.getElementById("img1").src=picArr[xp];
38             }
39             
40             function xz(){
41                     xp--;
42                     if(xp<0){
43                         xp=picArr.length-1;
44                     }
45                     document.getElementById("img1").src=picArr[xp];
46             }
47         </script>
48 </html>

View Code

效果圖

技術分享

js簡單圖片切換

opened view img play display ima onclick show back 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <met

利用JS實現圖片切換

事件舉例: 1.要求實現效果：當滑鼠懸停在照片上時更換為另一張照片；當滑鼠離開時，還原為本來的圖片。說明： 1.一般來說對於一個事件問題處理起來分為三個步驟：（1）獲取事件（2）繫結事件（3）書寫事件驅動程式程式碼如下 <!doctype html> <htm

js簡單圖片版時鐘，帶翻轉效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>時鐘</title> <style type="text/css">

JS實現圖片切換

<!DOCTYPE html> <html> <head> <meta charset="utf-8">  <title>Bo

js通過圖片切換實現開關按鈕（一）

簡單的切換圖片實現開關按鈕：<style> .box1{ width: 100px; height: 50px; border: 1px solid #ccc; background: url(img/closed.png)

原生js解決圖片點擊左右切換（簡單輪播圖）

邏輯關系 element logs 內容點擊切換 osi 圖片 width eight 想寫一個綜合性的小案例，主要會運用到數組和判斷以及我前面幾篇博客所復習到的js的知識。今天案例想要實現的效果圖如下圖所示：效果是：點擊“循環切換”按鈕，那麽“一號”位置的文案就要

js簡單的通過點選“上一張”“下一張”圖片切換

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x

jQuery圖片切換插件jquery.cycle.js

eno csdn ron fontsize tle java on() -m 暫停 Cycle是一個很棒的jQuery圖片切換插件,提供了很好的功能來幫助大家更簡單的使用插件的幻燈功能下載cycle插件並引入,此時,註意把引入它的代碼放在引入jQuery主文件之後。<

簡單的圖片切換代碼（無按鈕）

uri new clas arr tint pan interval rip chang 1 <script language =javascript > 2 var curIndex=0; 3 //時間間隔單位毫秒 4 var timeInt

JS函數傳參實例應用：多組圖片切換實例

name 實現 nts box tel 文字 .cn back 先來之前的博客有一個圖片切換的例子，實現了簡單輪播圖的點擊切換的案例，今天就說一下多組輪播切換，前提是布局差不多，通過函數傳參的形式減少代碼應用，但是同時還能實現效果。先來看一下之前那個例子的實現圖片：那

html+css+js(+JQuery)制作撲克牌圖片切換效果

css jquery 要實現的效果圖：先把靜態頁面寫出來： index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

js練習----圖片輪播切換

all fcc align num width adding mage bsp alpha css代碼： .d1 { /*大的div樣式*/ width: 443px; height: auto; overflow: hidden; border:

js的用setAttribute圖片切換

<ul> <li> <a href="images/1.jpg" title="asd1" onclick="showPic(this);return false;">Firrworks<

JS練習：切換圖片

程式碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script>

簡潔風個人主頁（3） js背景圖片隨機切換

靜態頁面做完了，現在用js做一個背景圖片隨機切換的效果。 1.點選‘個人網站'這個字樣，實現body背景的切換。所以，首先獲取這兩個節點。 var body = document.body; var change_btn = document.getElementById("change

js實現圖片自動切換

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片切換</title> <sty

原生js簡單實現廣告圖片彈出消失

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

簡單的ajax+express+superagent抓取cnode.js的圖片（瞎幾把抓）

寫這篇部落格的原因：本小白學完在cnode的node課程中學到正則的應用，30分鐘入門正則，看著樣例手癢，於是抓了cnode上的所有圖片，也不知道有沒有侵犯肖像權，23333，無意冒犯~~抓取的物件：利用原生AJAX進行互動的時候，多次卡在響應頭設定，導致出

jq簡單的淡入淡出圖片切換

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http

html+css+js簡單實現圖片輪播效果

js簡單圖片切換

相關推薦