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技巧来提高你的代码
Jan 08 Javascript
Javascript 函数中的参数使用分析
Mar 27 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
jquery.cookie用法详细解析
Dec 18 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
7个JS基础知识总结
Mar 05 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
常见的浏览器Hack技巧整理
Jun 29 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
ant design 日期格式化的实现
Oct 27 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
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
javascript中的array数组使用技巧
2010/01/31 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
简述安装Slackware Linux系统的过程
2012/05/08 面试题
公司周年庆典邀请函
2014/01/12 职场文书
接待员岗位责任制
2014/02/10 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
个人安全生产责任书
2014/07/28 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书