js实现三张图(文)片一起切换的banner焦点图


Posted in Javascript onAugust 25, 2015

本文实例讲述了js实现三张图(文)片一起切换的banner焦点图。分享给大家供大家参考。具体如下:
这是一款基于javascript实现的三张图(文)片一起切换的banner焦点图,带有左右箭头,同一个焦点图,三个位置的图片可以同时实现切换,图片中间可以穿插文字说明。
运行效果图:-------------------查看效果 下载源码-------------------

js实现三张图(文)片一起切换的banner焦点图

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的js实现三张图(文)片一起切换的banner焦点图代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三张图(文)片一起切换的banner焦点图</title>
<link href="css/jiaobenzhijia.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div class="lanrenzhijia">
 <div class="b b1">
 <ul class="lst lst1">
 <li><img src="images/1.jpg" /></li>
 <li><img src="images/2.jpg" /></li>
 <li><img src="images/3.jpg" /></li>
 <li><img src="images/4.jpg" /></li>
 <li><img src="images/5.jpg" /></li>
 </ul>
 </div>
 <div class="b b2">
 <ul class="lst lst2">
 <li><img src="images/2.jpg" /></li>
 <li><img src="images/3.jpg" /></li>
 <li><img src="images/4.jpg" /></li>
 <li><img src="images/5.jpg" /></li>
 <li><img src="images/1.jpg" /></li>
 </ul>
 </div>
 <div class="b3">
 <ul class="lst lst3">
 <li><img src="images/3.jpg" /></li>
 <li><img src="images/4.jpg" /></li>
 <li><img src="images/5.jpg" /></li>
 <li><img src="images/1.jpg" /></li>
 <li><img src="images/2.jpg" /></li>
 </ul>
 </div>
 <div class="cen">
 <h3 class="cenTit">美文摘抄</h3>
 <p class="wrd">花是如此柔弱,再美再艳,依然经不起朝来寒雨晚来风,春红谢匆匆,只剩满怀愁情。花却又是美丽的战士,风雨中尽管渐渐绿肥红瘦,终究不肯低头。生命也是一样,像精致的玻璃酒杯,常常经不起天灾人祸的撞击,粉碎成一地璀璨,每一片都是透明的心,生命又常常像昙花,用许多年的泪与汗,掺上心血浇灌,才会有笑看天下的一刻…<a target="_blank" href="https://3water.com/">【查看更多】</a></p>
 </div>
 <div class="cen1">JS网页特效收集网站</div>
 <span class="arr lef"></span>
 <span class="arr rig"></span>
</div>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.tools.min.js"></script>
<script>
$(function(){

 $(".b").scrollable({
 size:1,
 items:".b ul",
 loop:true,
 next:".lef",
 prev:".rig",
 clickable:false,
 circular:true
 }); 
 
 $(".b3").scrollable({
 size:1,
 items:".b3 ul",
 loop:true,
 next:".lef",
 prev:".rig",
 vertical:true,
 clickable:false,
 circular:true
 }); 
 
})
</script>
</body>
</html>

更多精彩内容大家还可以参考《jQuery焦点图特效汇总》进行学习,希望大家喜欢。

以上就是为大家分享的js实现三张图(文)片一起切换的banner焦点图代码,希望大家可以喜欢。

Javascript 相关文章推荐
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
js切换光标示例代码
Oct 10 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
js模拟实现烟花特效
Mar 10 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 Javascript
js焦点文字滚动效果代码分享
Aug 25 #Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 #Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 #Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 #Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 #Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 #Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 #Javascript
You might like
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
js获取视频时长代码
2014/04/10 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
this在vue和小程序中的使用详解
2019/01/28 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
Python下线程之间的共享和释放示例
2015/05/04 Python
Django中URLconf和include()的协同工作方法
2015/07/20 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
简单了解python单例模式的几种写法
2019/07/01 Python
使用python实现kNN分类算法
2019/10/16 Python
opencv python图像梯度实例详解
2020/02/04 Python
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
高一地理教学反思
2014/01/18 职场文书
入党介绍人评语
2014/05/06 职场文书
电工技术比武方案
2014/05/11 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
2014教师年度工作总结
2014/11/10 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers