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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 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/11/05 PHP
laravel学习教程之存取器
2016/07/30 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
Django开发中的日志输出的方法
2018/07/02 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
联想英国官网:Lenovo英国
2019/07/17 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
大学生求职推荐信
2013/11/27 职场文书
学习决心书
2014/03/11 职场文书
项目建议书怎么写
2014/05/15 职场文书
车辆委托书范本
2014/10/05 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
Python的property属性详细讲解
2022/04/11 Python