2. 程式人生 > >jq和js輪播廣告的小事例

jq和js輪播廣告的小事例

阿新 • • 發佈：2018-12-09
var num = 1; var time = null; // 一開始就載入圖片裝在圖片陣列中 function getImg(pNum) { // 儲存圖片的陣列 var img_Array = new Array(); for (var i = 0; i < 6; i++) { img_Array[i] = "images/adver0" + (i + 1) + ".jpg"; } return img_Array[pNum - 1]; } // 定義滑鼠進入圖片的三角形的顯示和隱藏
$(".adver").mouseover( function () { $(".arrowLeft,.arrowRight").show(); }); $(".adver").mouseout( function () { $(".arrowLeft,.arrowRight").hide(); }); $(function () { // 定義滑鼠單擊三角的方法 $(".arrowRight").click(function
() { num++; clickImg(num); }); $(".arrowLeft").click(function () { num--; clickImg(num); }); $(".adver ul li").css("cursor", "pointer"); // 按下面的數字來切換圖片 $(".adver ul li").click(function () { // 獲取單擊的哪個數字的內容
var clickNum = $(this).text(); clickImg(clickNum); }); $(".adver ul li").mouseover(function(){ stopSwitch(); var strNum=$(this).text(); var vNum= parseInt(strNum); clickImg(vNum); }); $(".adver ul li").mouseout(function(){ var strNum=$(this).text(); var vNum= parseInt(strNum); num = vNum; startSwitch(); }); $(".arrowLeft").mouseover(function(){ stopSwitch(); }); $(".arrowLeft").mouseout(function(){ startSwitch(); }); $(".arrowRight").mouseover(function(){ stopSwitch(); }); $(".arrowRight").mouseout(function(){ startSwitch(); }); }); // 切換圖片 function clickImg(pNum) { if (pNum > 6) { pNum = 1; } if (pNum < 1) { pNum = 6; } num = pNum; $(".adver").css("background", "url(" + getImg(pNum) + ")"); $("li:nth-of-type(" + pNum + ")").css({ "backgroundColor": "orange", "color": "white" }); $("li:nth-of-type(" + pNum + ")").siblings().css({ "backgroundColor": "#333333", "color": "white" }); } // 然後自動切換圖片 function autoSwicht() { num++; if (num > 6) { num = 1; } clickImg(num); } // 開始自動切換圖片 function startSwitch() { time = setInterval("autoSwicht()", 1000); } // 停止自動切換圖片 function stopSwitch() { clearInterval(time); } $(function () { startSwitch(); });

相關推薦

jq和js輪播廣告的小事例

var num = 1; var time = null; // 一開始就載入圖片裝在圖片陣列中 function getImg(pNum) { // 儲存圖片的陣列 var img_Array = new Array();

2017-05-17 js動態生成輪播圖小圓點

輪播圖 鼠標 borde images author eight 復習 innerhtml pad 從今天開始，把自己做的筆記轉移到博客園： 今晚復習了一下動態創建輪播圖小圓點做了一下小的筆記： 1 <!DOCTYPE html> 2 <html l

bootstrap-輪播廣告頁(帶圖片和文字)

技術 name query bootstra graph 處理器 icon utf cap <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8">

側拉+TabLayout切換fragment+Viewpager輪播圖小圓點和圖片上顯示標題+多條目+上拉載入+下拉重新整理

1.MainActivity主頁面 package com.example.zonghelianxi01; import android.annotation.SuppressLint; import android.support.annotation.Nullable; impor

js輪播圖自動播放和手動控制

html檔案 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

[springboot 開發單體web shop] 6. 商品分類和輪播廣告展示

目錄 商品分類&輪播廣告 商品分類|ProductCategory 需求分析 開發梳理 編碼實現 輪播廣告|SlideAD 需求分析

自寫：js輪播圖 鼠標劃過下方按鈕，繼續下一個

就會 定時器 pac color lis hover 路線 css 輪播圖 自寫：js輪播圖 鼠標劃過下方按鈕，繼續下一個 定時器關閉後再開啟一般都會按照原來的路線繼續走，不會因為你點了3而下個就會是4 $(".focus-rad>ul>li").hover(

jq和js插件的各個文件夾裏放置的內容

目錄 run 語言 runt 引入 小功能 ros style 測試文件 1. demo文件夾，存放各種實例。 2. dist文件夾，全稱是distribution。在某些框架中，因為開發和發布的內容或者代碼形式是不一樣的（比如利用Grunt壓縮等等)，這時候就需要一個存放

用jq實現簡單輪播

cti 標簽 function radi har mil ott ava 懸停 一個簡單的實例： css代碼： <style type="text/css">@charset "utf-8";*{ padding:0px; border:

js輪播圖

輪播圖 定時器 .com logs images lun script img doc <script> var i = 0; //創建一個定時器 function init(){ setInterval(changeImg,2000); } //定義切換圖片的

【解決火車輪播圖小圓點跳的問題】傳統輪播圖-三位法

ctype clear 位置 padding head doctype image class 改變 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <met

純js輪播測試版

post wid 背景 切換 round 效果 定時器 asc text 這是一個純js寫的輪播測試版，代碼有待改進 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&

js輪播

++ post translate idt clas div highlight pre ott <body onload="banner()"> <div id="kunag"> <img src="0.png" c

原生JS輪播-各種效果的極簡實現

star element length for sha 部分 wid 方式 高度 寒假持續摸魚中~此為老早以前博客的重寫，當時還是分開寫的，這裏匯總重寫，正好復習一遍~ 春招我來了！ 所有有意思的，一股腦先扔進收藏，然後再也不看哈哈，真是糟糕。 今日事，今日畢，說起來容易

原生js輪播圖實現

索引 獲取 mouseout abs length ati point css ack 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta chars

JavaScript的案例（數據校驗，js輪播圖，頁面定時彈窗）

頁面 span one align 數據校驗 lse 格式 用戶輸入 ade 1.數據校驗 步驟 1.確定事件（onsubmit）並綁定一個函數 2.書寫這個函數，獲取數據，並綁定id

自動生成輪播圖小圓點

自動 分享圖片 輪播圖 alt 技術 png image bsp info 自動生成輪播圖小圓點

js輪播圖封裝

banner.js結合move.js實現封裝輪播圖 banner.js程式碼 var swiper = (function() { var timer = null; return { init(ele) { if(typeof ele == 'string') { e

jq實現碎片輪播

效果如下： 實現原理：將背景圖片分成100等分 實現寬高從0到他們本身的寬高的動 畫 html <div id="banner"> <div id="pic"> <ul> <li class="ac

android應用的首頁引導輪播圖和banner輪播框架的使用

一、引導頁輪播圖 說明：專案中的輪播圖不要求太多的效果，所以使用了guideshow的jar包 Git地址：https://github.com/javajavadog/guideshow 專案中使用的步驟 1、開啟專案的地址，下載其中的jar包，複製到專案中的lib下並右鍵新增到依