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 相关文章推荐
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 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 Google的translate API代码
2008/12/10 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
js 对象是否存在判断
2009/07/15 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
关于Python如何避免循环导入问题详解
2017/09/14 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
Python如何实现邮件功能
2020/05/27 Python
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
完美主义个人的自我评价
2014/02/17 职场文书
销售会计岗位职责
2014/03/15 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python
python简单验证码识别的实现过程
2021/06/20 Python
Python语言中的数据类型-序列
2022/02/24 Python
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB