<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jQuery横向图片焦点图滚动效果，属于站长常用代码，更多焦点图代码请访问脚本之家JS脚本下载。" />
<title>jQuery横向图片焦点图滚动效果_脚本之家</title>
<link rel="stylesheet" href="css/jb51.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jb51.js"></script>
</head>
<body><br />
<!-- 代码 开始 -->
<div id="header">
<div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href="http://www.jb51.net/" target="_blank"><img id="slide-img-1" src="images/a1.jpg" class="slide" alt="" /></a>
<a href="http://www.jb51.net/" target="_blank"><img id="slide-img-2" src="images/a2.jpg" class="slide" alt="" /></a>
<a href="http://www.jb51.net/" target="_blank"><img id="slide-img-3" src="images/a3.jpg" class="slide" alt="" /></a>
<a href="http://www.jb51.net/" target="_blank"><img id="slide-img-4" src="images/a4.jpg" class="slide" alt="" /></a>
<a href="http://www.jb51.net/" target="_blank"><img id="slide-img-5" src="images/a5.jpg" class="slide" alt="" /></a>
<a href="http://www.jb51.net/" target="_blank"><img id="slide-img-6" src="images/a6.jpg" class="slide" alt="" /></a>
<a href="http://www.jb51.net/" target="_blank"><img id="slide-img-7" src="images/a4.jpg" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text"><strong></strong><span></span></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>
</div>
<script type="text/javascript">
if(!window.slider) {
var slider={};
}
slider.data= [
{
"id":"slide-img-1", // 与slide-runner中的img标签id对应
"client":"标题1",
"desc":"这里修改描述 这里修改描述 这里修改描述" //这里修改描述
},
{
"id":"slide-img-2",
"client":"标题2",
"desc":"add your description here"
},
{
"id":"slide-img-3",
"client":"标题3",
"desc":"add your description here"
},
{
"id":"slide-img-4",
"client":"标题4",
"desc":"add your description here"
},
{
"id":"slide-img-5",
"client":"标题5",
"desc":"add your description here"
},
{
"id":"slide-img-6",
"client":"标题6",
"desc":"add your description here"
},
{
"id":"slide-img-7",
"client":"标题7",
"desc":"add your description here"
}
];
</script>
</div>
</div>
<!-- 代码 结束 -->
<div style="text-align:center;margin:30px 0">
<p>来源：<a href="http://www.jq22.com/" target="_blank">jq22.com</a> 代码整理：<a href="http://www.jb51.net/" target="_blank">脚本之家</a> 感谢：<a href="http://blog.hexccc.com/service/" target="_blank" rel="nofollow">wordpress Xcoder</a></p>
<p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
<p></p>
<p><p>jQuery横向图片焦点图滚动效果，标题有打字机效果，兼容主流浏览器，脚本之家推荐下载！</p><p><br /></p><p>使用方法：</p><p>1、head区域引用以下代码</p><p><link rel="stylesheet" href="css/lrtk.css" type="text/css" media="screen" /></p><p><script type="text/javascript" src="js/jquery.min.js"></script></p><p><script type="text/javascript" src="js/lrtk.js"></script></p><p><br /></p><p>2、在body中加注释区域代码</p><p><br /></p><p>3、在JS的slider.data 中配置标题和描述。</p></p>
<p style="margin:20px 0"></p>
</div>
</body>
</html>
jQuery横向图片焦点图滚动特效源码.zip
版权申诉
30 浏览量
2022-11-06
23:56:07
上传
评论
收藏 345KB ZIP 举报
jQuery横向图片焦点图滚动特效源码.zip （13个子文件） 
132692095346932449 css 
jb51.css 2KB images 
a1.jpg 83KB a2.jpg 72KB
slide-bg.png 3KB a6.jpg 59KB a5.jpg 43KB a4.jpg 22KB a3.jpg 31KB silde-nav.png 4KB
index.html 4KB js jquery.min.js 94KB jb51.js 4KB html5.js 2KB资源评论
