jquery 自适应的全屏淡入淡出焦点图控制时间

JavaScript018

jquery 自适应的全屏淡入淡出焦点图控制时间,第1张

把var SPEED = 5000改成2500就行了

如果设置成5000是10秒 ，那你改成一半就好了

肯定是程序里那个设置 导致 了双倍的延迟

具体是哪个得慢慢找了

快速的解决办法 就像上面说的。

使用hiSlider.js幻灯片插件需要引入jquery.hiSlider.css和jQuery以及jquery.hiSlider.js文件。

hiSlider.js幻灯片插件使用的是无序列表的HTML结构。

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化hiSlider.js幻灯片插件。

hiSlider.js焦点图插件的可用配置参数

1

before-after焦点图插件，可以拖动分割条查看对比图片，兼容主流浏览器，！

使用方法：

1、head区域引用头部必要的js和css代码

2、在文件中加入<!-- 代码 开始 --><!-- 代码 结束 -->区域代码

3、复制images文件夹里的图片到相应的路径

4、src属性对应之前的图片，alt属性对应之后的图片

<img src="images/beforeafter/8before.jpg" alt="images/beforeafter/8after.jpg" />

HTML

<li><img src="images/beforeafter/7before.jpg" alt="images/beforeafter/7after.jpg" />

<div id="textbox_7">

<div id="logo_7b" class="faderight"><img src="images/anim/flower_1_white_bg_30fps.gif" alt="" /></div>

<div id="logo_7" class="faderight"><img src="images/tatoologo.png" alt="" /></div>

<div id="description_7" class="fadeup">Pericula sapentim ei ius.<br>

<a href="http://wwww.codecanyon.net/user/freshline" target="_new">www.tatoo.fr</a></div>

</div>

</li>

2

使用jQuery来等比例缩放图片。我们分两种情况来讲述：

1.已知图片尺寸

<div id="demo1">

<img src="a.jpg" width="800" height="300" alt="">

</div>

当页面加载的图片<img>中含有属性width和height值，则可以使用几句简单的jQuery代码实现等比例缩放。

$(function(){

var w = $("#demo1").width()//容器宽度

$("#demo1 img").each(function(){//如果有很多图片，我们可以使用each()遍历

var img_w = $(this).width()//图片宽度

var img_h = $(this).height()//图片高度

if(img_w>w){//如果图片宽度超出容器宽度--要撑破了

var height = (w*img_h)/img_w//高度等比缩放

$(this).css({"width":w,"height":height})//设置缩放后的宽度和高度

}

})

})

2.未知图片尺寸

当页面加载的图片尺寸未知的情况下，上述代码则不能进行有效的缩放，这种情况多出现在采集的外部链接图片。

<div id="demo2">

<img src="http://ww1.sinaimg.cn/large/63826f14jw1e1w67g8tdfj.jpg" alt="">

</div>

autoIMG可以快速对文章图片进行尺寸自适应，它利用浏览器获取图片文件头尺寸数据，无需等待图片加载完成。

autoIMG兼容：Chrome | Firefox | Sifari | Opera | IE6 | IE7 | IE8 | ...

autoIMG地址：http://www.planeart.cn/?p=1157 下载autoIMG

调用autoIMG插件方法相当简单：

$(function(){

$("#demo2").autoIMG()

})