基於jQuery的自適應圖片左右切換

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

基於jQuery編寫的橫向自適應幻燈片切換特效

全屏自適應jquery焦點圖切換特效，在IE6這個蛋疼的瀏覽器相容性問題上得到了和諧，相容IE6。

適用瀏覽器：IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲遊、搜狗、世界之窗.

程式碼如下：

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" 
>
  5 <title>jQuery自適應滿屏圖片輪播切換 - 何問起</title>
  6 <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.12.0.min.js"></script>
  7 <script type="text/javascript" src="http://hovertree.com/texiao/jquery/30/js/hoverslide.js"></script>
  8 </head>
  9 
 <body>
 10 <style type="text/css">        
 11 * {
 12     margin:0;
 13     padding:0;
 14     list-style:none;
 15 }
 16 body {
 17     background:#fff;
 18     font:normal 12px/22px 宋體;
 19     width:100%;
 20 }
 21 img {
 22     border:0;
 23 }
 24 a {
 25     text-decoration 
:none;
 26     color:#333;
 27 }
 28 a:hover {
 29     color:#1974A1;
 30 }
 31 #footer {
 32     text-align:center;
 33 }
 34 .fullSlide {
 35     width:100%;
 36     position:relative;
 37     height:410px;
 38     background:#000;
 39 }
 40 .fullSlide .bd {
 41     margin:0 auto;
 42     position:relative;
 43     z-index:0;
 44     overflow:hidden;
 45 }
 46 .fullSlide .bd ul {
 47     width:100% !important;
 48 }
 49 .fullSlide .bd li {
 50     width:100% !important;
 51     height:410px;
 52     overflow:hidden;
 53     text-align:center;
 54 }
 55 .fullSlide .bd li a {
 56     display:block;
 57     height:410px;
 58 }
 59 .fullSlide .hd {
 60     width:100%;
 61     position:absolute;
 62     z-index:1;
 63     bottom:0;
 64     left:0;
 65     height:30px;
 66     line-height:30px;
 67 }
 68 .fullSlide .hd ul {
 69     text-align:center;
 70 }
 71 .fullSlide .hd ul li {
 72     cursor:pointer;
 73     display:inline-block;
 74     *display:inline;
 75     zoom:1;
 76     width:42px;
 77     height:11px;
 78     margin:1px;
 79     overflow:hidden;
 80     background:#000;
 81     filter:alpha(opacity=50);
 82     opacity:0.5;
 83     line-height:999px;
 84 }
 85 .fullSlide .hd ul .on {
 86     background:#f00;
 87 }
 88 .fullSlide .prev,.fullSlide .next {
 89     display:block;
 90     position:absolute;
 91     z-index:1;
 92     top:50%;
 93     margin-top:-30px;
 94     left:15%;
 95     z-index:1;
 96     width:40px;
 97     height:60px;
 98     background:url(http://hovertree.com/texiao/jquery/30/images/slider-arrow.png) -126px -137px #000 no-repeat;
 99     cursor:pointer;
100     filter:alpha(opacity=50);
101     opacity:0.5;
102     display:none;
103 }
104 .fullSlide .next {
105     left:auto;
106     right:15%;
107     background-position:-6px -137px;
108 }
109 
110 </style>
111 <div class="fullSlide">
112   <div class="bd">
113     <ul>
114       <li _src="url(http://hovertree.com/texiao/jquery/30/images/a.jpg)" style="background:#E2025E center 0 no-repeat;"><a target="_blank" href="http://hovertree.com/code/"></a></li>
115       <li _src="url(http://hovertree.com/texiao/jquery/30/images/b.jpg)" style="background:#DED5A1 center 0 no-repeat;"><a target="_blank" href="http://hovertree.com/tiku/"></a></li>
116       <li _src="url(http://hovertree.com/texiao/jquery/30/images/d.jpg)" style="background:#B8CED1 center 0 no-repeat;"><a target="_blank" href="http://tool.hovertree.com/"></a></li>
117       <li _src="url(http://hovertree.com/texiao/jquery/30/images/d.jpg)" style="background:#98918E center 0 no-repeat;"><a target="_blank" href="http://run.hovertree.com/code/"></a></li>
118       <li _src="url(http://hovertree.com/texiao/jquery/30/images/e.jpg)" style="background:#FEFF19 center 0 no-repeat;"><a target="_blank" href="http://keleyi.com"></a></li>
119     </ul>
120   </div>
121   <div class="hd">
122     <ul>
123     </ul>
124   </div>
125   <span class="prev"></span> <span class="next"></span> </div>
126 <script type="text/javascript">
127 jQuery(".fullSlide").hover(function() {
128     jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)
129 },
130 function() {
131     jQuery(this).find(".prev,.next").fadeOut()
132 });
133 jQuery(".fullSlide").hoverslide({
134     titCell: ".hd ul",
135     mainCell: ".bd ul",
136     effect: "fold",
137     autoPlay: true,
138     autoPage: true,
139     trigger: "click",
140     startFun: function(i) {
141         var curLi = jQuery(".fullSlide .bd li").eq(i);
142         if ( !! curLi.attr("_src")) {
143             curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")
144         }
145     }
146 });
147 </script>
148 <div style="text-align:center;clear:both; font-size:12px;">
149 <p><a href="http://hovertree.com" target="_blank">何問起</a>分享網站整理</p>
150 <p>適用瀏覽器：IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲遊、搜狗、世界之窗. </p>
151 <p>來源：何問起</p>
152 </div>
153 </body>
154 </html>

基於jQuery的自適應圖片左右切換

基於jQuery編寫的橫向自適應幻燈片切換特效全屏自適應jquery焦點圖切換特效，在IE6這個蛋疼的瀏覽器相容性問題上得到了和諧，相容IE6。適用瀏覽器：IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲遊、搜狗、世界之窗. 程式碼如下：

jquery 圖片左右切換，一長條的顯示，點選左右移動。

菜鳥啊，想了一天才寫出來，唉。 ps: 生活無樂趣，程式碼更加無樂趣！ .hdjs{display:inline-block; width:100%; margin-top:4px; position: relative; height:101px; background: url(".

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

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

jQuery自適應-3D旋轉輪播圖

3D旋轉輪播圖本例源於（站長之家例項http://sc.chinaz.com/jiaoben/170215391070.htm）其他相似示例（https://www.cnblogs.com/incredible-x/p/9688333.html）自己研究重寫了一遍。一、先寫靜態的初始樣式的cs

基於領域自適應的語義分割（DA-based SS）

文章目錄 1. 預備知識 1.1 域適應 (Domain Adaptation, DA) 1.2 語義分割 (Semantic Segmentation, SS) 2. 相關論文 2.1 CVPR 18-Learni

移動端常見自適應圖片載入時頁面塌陷問題解決方案

OpenCV基於區域性自適應閾值的影象二值化

在影象處理應用中二值化操作是一個很常用的處理方式，例如零器件圖片的處理、文字圖片和驗證碼圖片中字元的提取、車牌識別中的字元分割，以及視訊影象中的運動目標檢測中的前景分割，等等。較為常用的影象二值化方法有：1）全域性固定閾值；2）區域性自適應閾值；3）OTSU等。全域性固

如何讓彈出視窗自適應圖片的大小

解決思路：主要思路是用window.open()方法開啟一個視窗，然後再根據圖片的大小resizeTo()視窗大小，必要時再用moveTo()方法調整視窗位置。現在問題在於如何獲取圖片的大小。具體步驟：方法一。我們知道，DHTML裡有個Image()物件，只要設定圖片源

html+css+jQuery實現多種圖片簡單切換功能大綜合

學習滑鼠滑動監聽事件，順便了複習一些其他相關的事件，記錄下來以備下次實現類似功能時參考。擁有以下功能： 1.向左向右無縫滑動2.自動輪播3.滑鼠左右滑動，img移動4.滑鼠懸浮img，img停止輪播功能5.滑鼠移動到底部原點，顯示哪張圖片 1.html程式碼如下：

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

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

jQuery實現等比例縮放大圖片讓大圖片自適應頁面佈局

在佈局頁面時，有時會遇到大圖片將頁面容器“撐破”的情況，尤其是載入外鏈圖片（通常是通過採集的外站的圖片）。那麼本文將為您講述使用jQuery如何按比例縮放大圖片，讓大圖片自適應頁面佈局。通常我們處理縮圖是使用後臺程式碼（PHP、.net、Java等）根據大圖片生成一定尺寸的縮圖，來供前臺頁面呼叫，當然也

JQuery載入圖片自適應DIV大小

程式碼如下: .divImg{ max-height:200px; max-width:200px; width: expression(this.width > 200 && this.width > this.height ? 2

原創jQuery外掛之圖片自適應

效果圖如下：功能：使圖片自適應居中位於容器內限制：容器需要給定大小使用方法： 1、引入jQuery，然後引入fitimg外掛 2、給需要圖片自適應的容器固定寬高 3、header .account .img { width: 40px; height: 40px

Android 基於ImageSwitcher實現的左右切換圖片

左右切換圖片控制元件大家都用ViewPager, ViewFipper比較多吧，我之前也用ViewPager實現了，有興趣的可以去看下，今天介紹的是基於ImageSwitcher實現的左右切換圖片，先上截圖吧好了，接下來來看程式碼吧，第一張圖是一個

Jquery使容器自適應瀏覽器窗口

cti -s meta 方法 jquer charset mar utf-8 ava 一、幾個關鍵點 1：當文檔大小改變時可以通過哪個事件來觸發？ resize([Data], fn) 可傳入data供函數fn處理。示

左右定寬中間自適應布局

padding adding head idt class 適應 htm meta clas <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8">

jQuery實現圖片左右輪播

https src play 頁面 body block relative over 圖片 <!DOCTYPE html> <html> <head> <title></title> <st

如何通過 WebP 自適應方案減少圖片資源大小

ont 圖片文件 display zip 副本 org 占比會有 xhtml 前言我們知道，理想的網頁應該在 1 秒內打開，而在頁面的整體大小中，圖片往往是所占比例最大的一部分（大約占到 60% 以上，更多了解請點擊），也可以參照如下圖所示。優化圖片不僅可以加快頁面顯示

Winfrom PictureBox 設置圖片自適應

bitmap cnblogs oms system from mage blog style pre 初始狀態 1 Bitmap bm = new Bitmap(Image.FromStream(System.Net.WebRequest.Create(n

基於Opencv的自適應中值濾波函數selfAdaptiveMedianBlur（）

blog com begin clas logs opencv2 cal return mat 終於搞出來了：） #include <iostream> #include <opencv2/opencv.hpp> #include &l

基於jQuery的自適應圖片左右切換

相關推薦