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 相关文章推荐
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
JS实现的tab页切换效果完整示例
Dec 18 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 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
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
Python脚本实现网卡流量监控
2015/02/14 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
开展批评与自我批评发言材料
2014/05/15 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
小学运动会开幕词
2016/03/04 职场文书
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android