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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
一个可复用的vue分页组件
May 15 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 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
虫族 Zerg 魔法科技
2020/03/14 星际争霸
MYSQL数据库初学者使用指南
2006/11/16 PHP
php面向对象的方法重载两种版本比较
2008/09/08 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
python将图片文件转换成base64编码的方法
2015/03/14 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
Python3.4解释器用法简单示例
2019/03/22 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
大学生实习证明范本
2014/01/15 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
浅析MongoDB之安全认证
2021/06/26 MongoDB
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python
MySQL Server层四个日志的实现
2022/03/31 MySQL
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript