Jquery 圖片輪播實現原理總結
以前要做圖片輪播效果的時候,總是在網上找一段jquery的複製貼上進去,只索取不奉獻,今個就把我對這個的實現原理講解一下。
首先說下,我在網上找的例子全是用的UL 實現,其實大可不必,只要是能包含img標籤的HTML標籤都可以做輪播效果。利用jquery的淡入淡出函式(fadeIn和fadeOut)。廢話也不多說,邊上程式碼邊講解。最後附上demo效果地址。
先HTML佈局:
<!--整體容器--> <div class="imgbox"> <!--圖片列表,除第一張顯示外,其餘隱藏--> <ul> <li style="display: block;" title="清靈少女宛如夢境仙女"><a href="#"> <img src="http://p.dddddd.net/uploads/allimg/110927/11-11092G32227.jpg" /></a></li> <li title="美女海邊性感透視裝誘惑"><a href="#"> <img src="http://tu.dushiys.com/uploads/allimg/130621/1-130621145931-50.jpg"/></a></li> <li title="夏小薇:百變小魔女變身性感數碼寶貝"><a href="#"> <img src="http://p.dddddd.net/uploads/allimg/130620/19-130620115013.jpg" /></a></li> <li title="夏小薇化身《殺破狼》粉色妖姬鮮嫩欲滴"><a href="#"> <img src="http://imgtu.5239.com/uploads/allimg/130315/5-130315135240.jpg"/></a></li> </ul> <div class="title_bg common"><!--圖片標題背景--> </div> <!--圖片顯示標題--> <div class="title common"></div> <!--圖片序號--> <div class="pager common"> <ul> <li>4</li> <li>3</li> <li>2</li> <li style="background: #FF70Ad;">1</li> </ul> </div> </div>
CSS部分:
img{border-style:none;} .imgbox{width:530px;margin:100px;height:350px;} .imgbox img{width:530px;height:350px;} .imgbox ul{list-style-type:none;margin:0px;padding:0px;} .imgbox ul li{display:none;} .title_bg{z-index:1;background-color:#000;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;} .title{z-index:2;color:#FFF;text-indent:10px;font-size:14px;line-height:40px;} .pager{z-index:3;} .common{position:relative;height:40px;margin-top:-43px;}
.pager ul{margin-top:5px;} .pager ul li{float:right;color:#FFF;font-size:15px;display:block;border:2px solid #e5eaff;width:25px;height:25px;margin-right:4px;margin-top:5px;text-align:center;line-height:25px;background-color:#6f4f67;cursor:pointer;}
指令碼:
$(document).ready(function () { (new CenterImgPlay()).Start(); }); function CenterImgPlay() { this.list = $(".imgbox").children(":first").children(); this.indexs = []; this.length = this.list.length; //圖片顯示時間 this.timer = 3000; this.showTitle = $(".title"); var index = 0, self = this, pre = 0, handid, isPlay = false, isPagerClick = false; this.Start = function () { this.Init(); //計時器,用於定時輪播圖片 handid = setInterval(self.Play, this.timer); }; //初始化 this.Init = function () { var o = $(".pager ul li"), _i; for (var i = o.length - 1, n = 0; i >= 0; i--, n++) { this.indexs[n] = o.eq(i).click(self.PagerClick); } }; this.Play = function () { isPlay = true; index++; if (index == self.length) { index = 0; } //先淡出,在回撥函式中執行下一張淡入 self.list.eq(pre).fadeOut(300, "linear", function () { var info = self.list.eq(index).fadeIn(500, "linear", function () { isPlay = false; if (isPagerClick) { handid = setInterval(self.Play, self.timer); isPagerClick = false; } }).attr("title"); //顯示標題 self.showTitle.text(info); //圖片序號背景更換 self.indexs[index].css("background-color", "#FF70Ad"); self.indexs[pre].css("background-color", "#6f4f67"); pre = index; }); }; //圖片序號點選 this.PagerClick = function () { if (isPlay) { return; } isPagerClick = true; clearInterval(handid); var oPager = $(this), i = parseInt(oPager.text()) - 1; if (i != pre) { index = i - 1; self.Play(); } }; };
輪播的指令碼是個人的一點小習慣,一般不輕易向jquery中寫入擴充套件函式.諸位莫要在意。
通過以上的程式碼,實現輪播的核心主要是對jquery的fadeIn和fadeOut函式的呼叫,另外考察的就是CSS佈局的功力了。
在上面顯示圖片標題的地方不能用絕對定位,於是用的relative定位,這個地方是佈局的核心部分,否則無法將標題和圖片序號放在圖片之上。
title_bg 這個類及對應的div主要是為了實現標題的背景色透明,因為直接在標題上設定背景色透明,會造成文字也是有透明度的。
相關推薦
Jquery 圖片輪播實現原理總結
以前要做圖片輪播效果的時候,總是在網上找一段jquery的複製貼上進去,只索取不奉獻,今個就把我對這個的實現原理講解一下。 首先說下,我在網上找的例子全是用的UL 實現,其實大可不必,只要是能包含img標籤的HTML標籤都可以做輪播效果。利用jquery的淡入淡出函式(fadeIn和fadeOut)。廢
無限輪播 實現原理
1 // 2 // YYViewController.m 3 // 07-無限滾動(迴圈利用) 4 // 5 // Created by apple on 14-8-3. 6 // Copyright (c) 2014年 yangyong. All rights reserved. 7 // 8
一個簡單的jquery圖片輪播外掛
前提佈局: 左浮li標籤,支援左右切換,自動輪播,原始碼: 引數:ul: 需要動畫的ul prev:上一個切換按鈕 next: 下一個切換按鈕function rotation(ul, prev, next) { var li = $(ul).find("li
基於Bootstrap框架的圖片輪播實現
前面介紹過原生的javascript實現圖片輪播效果:http://blog.csdn.net/shoushou71/article/details/51628678,本節通過Bootstrap框架實現圖片輪播效果。 1.Bootstrap介紹 Bo
jQuery圖片輪播特效
這款特效有縮圖,包含文字說明和連結,可以自動播放,也可以手動切換。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery適合風景
jquery圖片輪播,三種方式
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http:
jquery圖片輪播,點選左右按鈕輪播,可控制是否自動播放,是否迴圈輪播(自寫)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>輪播</title> <
JQuery 圖片輪播
alt lis addclass splay width () ima -c this 準備工作: 1、準備幾張大小相同的圖片 完成功能: 1、自動輪播 2、手動輪播 3、點擊二側按鈕前後切換圖片 效果圖: 完整代碼: 1 <
使用JQuery實現圖片輪播效果
left 簡述 flow href 集合 jpg -i round 輪播 【效果如圖】 【原理簡述】 這裏大概說一下整個流程: 1,將除了第一張以外的圖片全部隱藏, 2,獲取第一張圖片的alt信息顯示在信息欄,並添加點擊事件 3,為4個按鈕添加點擊偵聽,點擊相應的按鈕,用
使用Ajax+jQuery來實現前端收到的數據在console上顯示+簡單的主頁設計與bootstrap插件實現圖片輪播
value size 靠譜 實現圖 active length oot function 想要 1.實現前端輸入的數據在console上顯示 上一篇是解決了在前端的輸入信息在cygwin上顯示,這次要給前臺們能看見的數據,因為數據庫裏插入的數據少,所以寫的語句翻來覆去就那幾
分別使用js和JQuery實現html首頁圖片輪播以及廣告圖片定時彈出
主要使用setInterval方法設定更新週期,clearInterval清除週期。(如果不清除會一直週期迴圈執行下去,而setTimeout只是在指定時間後執行一次,這裡完全可以替換為setTimeout方法) 一、js首頁輪播 第一步:確定事件(onload)併為
jquery實現圖片輪播圖效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding:0; margin:0; list-style:n
圖片輪播 --原理到實現
圖片輪播不是什麼新玩意了,我想做個FULL STACK工程師,覺得前端好好玩,H5和CSS3功能強大,故想拿一些東西來練下手,原理搞明即可,在此不求細節。 圖片輪播主要技術點為: 一、<ul> <li> 來作導航欄; 二、<div>通過
五滴水:使用Ajax+jQuery來實現前端收到的資料在console上顯示+簡單的主頁設計與bootstrap外掛實現圖片輪播
前言嘚吧嘚 三天沒更博了,嘻嘻嘻打自己:3 最近的狀態比開始的時候好太多,能看懂cygwin和console上報的錯誤了,知道到底是縮進出了問題還是我的程式碼邏輯不完整了,找資源也知道哪裡是我要的,也可以找到想要的了·······慢慢來,給自己立個flag :
用jquery實現圖片輪播
CSS樣式: *{ margin: 0; padding: 0; } ul{ list-style:none; } .slideShow{ width: 620px; height: 700px; /*其實就是圖片的高度*/
用jquery面向物件實現的簡單的圖片輪播,還能學習一下閉包哦
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title
iOS開發項目實戰——Swift實現圖片輪播與瀏覽
0.10 上網 timer類 開發項目 cas hub string obj tle 近期開始開發一個新的iOS應用,自己決定使用Swift。進行了幾天之後,發現了一個非常嚴峻的問題。那就是無論是書籍,還是網絡資源,關於Swift的實在是太少了,隨便一
實現廣告圖片輪播效果-AndroidImageSild
left anim wpa img listener pri des indicator ext 在AS中的使用: 1.在build文件中進行配置 compile ‘com.squareup.picasso:picasso:2.3.2‘ comp
JS實例之圖片輪播,實現圖片播放效果
utf length pla get eight code func nsh java 1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g
CSS/HTML/JS實現圖片輪播
class fff 瀏覽器 tro back 全局 實現圖 func 原理 實現原理 將點擊的a標簽的href屬性值賦給img標簽的src屬性,這樣有個好處,就是如果瀏覽器不支持js的話,點擊a標簽也可跳轉到圖片地址看到圖片,不會影響內容的呈現 註:需要導入jquery