网页制作用JavaScript实现不同风格的图片切换效果

1.资源下载

首先需要下载一个myFocus库（资源包），里面包含数种不同风格的实现效果。

下载地址：http://download.csdn.net/detail/antaomen/9704831

2.引入myFocus库，找到存放的位置

myfocus-2.0.1.min.js存放在js文件夹中

<script type="text/javascript" src="文件路径/myfocus-2.0.1.min.js"></script>

3.设置效果

在my-pattern中有各种效果的css，可以直接修改pattern属性值来更换效果

<script type="text/javascript">

myFocus.set({

id:'banner',//焦点图div的id

pattern:'mF_name',//风格应用的名称

time:3,//切换时间间隔(秒)

trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)

width:450,//设置图片区域宽度(像素)

height:296,//设置图片区域高度(像素)

txtHeight:'default'//文字层高度设置(像素),'default'为默认高度，0为隐藏

});

</script>

set方法中前两行即可修改效果，后面的可以省去。

4.设置div

注意要使用列表形式存放图片

<div id="banner" style="visibility:hidden">

<div class="loading"><span>请稍候...</span></div>

<ul class="pic">

<li><a href="#"><img src="img/1.jpg" thumb="" alt="标题1" text="详细描述1" /></a></li>

<li><a href="#"><img src="img/2.jpg" thumb="" alt="标题2" text="详细描述2" /></a></li>

<li><a href="#"><img src="img/3.jpg" thumb="" alt="标题3" text="详细描述3" /></a></li>

<li><a href="#"><img src="img/4.jpg" thumb="" alt="标题4" text="详细描述4" /></a></li>

<li><a href="#"><img src="img/5.jpg" thumb="" alt="标题5" text="详细描述5" /></a></li>

</ul>

</div>

thumb=图片的略缩图地址(需要风格支持，可以省略，如果省略即把大图地址作为它的地址)；
alt=图片的描述文字；
text=图片更详细的描述文字(需要风格支持，可以省略)

myFocus属性的API文档

id

焦点图盒子ID[string(字符串)]，无默认值，必填项
pattern
风格应用名称[string(字符串)]，默认值：'mF_fscreen_tb'
time
切换时间间隔[num(数字，单位秒)]，默认值：4
width
图片区域宽度[num(数字，单位像素)]，无默认值，留空则从CSS样式获取大小
height
图片区域高度[num(数字，单位像素)]，无默认值，留空则从CSS样式获取大小
txtHeight
文字层高度['default'(默认高度)|0(隐藏)|num(数字，单位像素)]，默认值：'default'
trigger
触发切换模式['click'(鼠标点击)|'mouseover'(鼠标悬停)]，默认值：'click'
wrap
是否保留边框(有的话)[true|false]，默认值：true
auto
是否自动播放[true|false]，默认值：true
index
开始显示的图片序号(从0算起)[num(数字)]，默认值：0
delay
触发切换模式中'mouseover'模式下的切换延迟[num(数字,单位毫秒)]，默认值：100
css
是否需要程序定义CSS[true|false]，默认值：true
waiting(1.2.0新增)
Loading画面的最长等待时间(即从开始载入--图片加载完--开始播放之间的等待时限，如果超过这个时限，即使图片没加载完都一律播放)[true(一直等待，直到所有焦点图片全部加载完)|false(完全不等待，直接播放)|num(时限,单位秒)]，默认值：20
path(1.2.0新增)
风格应用文件的目录路径[string(字符串)]，默认值：'http://www.chhua.com/myfocus/js/pattern/'。注意此路径是指向风格文件父目录而不是某个风格文件，例如mF_slide3D这款风格文件在pattern文件夹目录下，那么path应该为'pattern/'。
autoZoom(1.2.1新增)
是否允许图片按比例缩小并居中以适应图片区域大小(注意：某些风格可能不支持)[true|false]，默认值：false。

来源： http://www.chhua.com/myfocus/api.html

网页制作用JavaScript实现不同风格的图片切换效果相关推荐

php多张图片切换效果,怎么把多张图片制作成gif动图可设置图片切换效果及显示时间...
小编在微信上跟朋友斗图的时候发现,有些表情包是用很多张图片不断切换制作成的,这种动图是怎么制作出来的呢?要是学会了,可以将自己或者朋友的照片制作成gif动图,想想就很有意思呀!那么在此小编给大家推荐一 ...
JavaScript实现爆炸碎片的图片切换效果
说明和大家分享一个看上去很酷的效果,先来看效果图吧! 解释实现这个效果的思路就是,一个大的div元素,设置好一个背景,生成一定数量小的div元素,背景设置成同样的图片,但是每个小div元素的 ba ...
JavaScript实现爆炸碎片的图片切换效果 1
说明和大家分享一个看上去很酷的效果,先来看效果图吧! 解释实现这个效果的思路就是,一个大的div元素,设置好一个背景,生成一定数量小的div元素,背景设置成同样的图片,但是每个小div元素的 ba ...
html网页切换效果，css图片切换效果
<title>html网页切换效果,css图片切换效果</title><link rel="stylesheet" href="./fami ...
click 点击图片不起作用_JavaScript 练手小案例：基于SVG的图片切换效果
最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解 ...
网页制作用html和sc,实验二:html的基本标签和javasc
实验二:html的基本标签和javasc [2021-02-08 07:48:17] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace( ...
实现flash的图片切换效果【可以切换多个网页或者图片】
这个是得到改进后的代码,可以切换多个页面需要完整代码的朋友可以留下email如需再添加切换页面,只要按照下边代码部分的样式添加内容即可切换导航td的id要顺序排那个div的TOP为为上边一个di ...
JavaScript练习--[使用js语言实现网页切换图片的效果]
图片切换效果需求; (1)在网页中设计图片的切换效果;打开网页时,只能看到图片; (2)当鼠标移到图片上时,两个按钮就会显示出来; (3)当鼠标点击上;就会切换到上一张图片;点击下;就会切换到下一张图 ...
JavaScript图片切换
本次使用的是图片切换的效果主要javaScript来实现功能. 一.什么是HTML,HTML怎么作用法,HTML具体能做什么? HTML是超文本标签语言(Hyper Text Markup Labgu ...

网页制作用JavaScript实现不同风格的图片切换效果

网页制作用JavaScript实现不同风格的图片切换效果相关推荐

最新文章

热门文章