js实现三张图(文)片一起切换的banner焦点图
作者:lijiao 发布时间:2024-06-20 04:17:16
标签:js,图片切换,焦点图
本文实例讲述了js实现三张图(文)片一起切换的banner焦点图。分享给大家供大家参考。具体如下:
这是一款基于javascript实现的三张图(文)片一起切换的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://www.aspxhome.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焦点图特效汇总》进行学习,希望大家喜欢。
0
投稿
猜你喜欢
- 首先使用内置模块os.>>> import os>>> code = os.system("p
- 一. 新建服务器用户: 用户管理,主要的工作就是建立一个合法的用户帐户、设置和管理用户的密码、修改用户帐户的属性以及在必要时删除已
- blankzheng的blog:http://www.planabc.net/经常有朋友问我,网站要在哪些浏览器上测试?要达到怎样的兼容?我
- docx2txt的Github地址docx2txt是基于python的从docx文件中提取文本和图片的库。代码是从python-docx中获
- 等间距取值a = np.linspace(float(-pi), float(pi), 100)从-pi到pi取100个值对区间进行等间距取
- 一、偏好资源的积累利用DreamWeaver 4制作网页会应用到许多各种类型的要素,比如色彩、图片、模板、脚本等。利用站点资源面板将这些东东
- 前言本文中代码运行的python版本一律采取2.7.13科普:经典类:classic class新式类:new-style classpyt
- 简介:上文中已经介绍如何安装Pycharm已经环境变量的配置。现在软件已经安装成功,现在就开始动手做第一个Python项目。第一个“Hell
- Go语言中strconv包实现了基本数据类型和其字符串表示的相互转换。strconv包实现了基本数据类型与其字符串表示的转换,主要有以下常用
- 一、概述mysql主从是常用的高可用架构之一,也是使用最广泛的的系统架构。在生产环境中mysql主从复制有时会出现复制错误问题。MySQL主
- 回车和换行的历史:机械打字机有回车和换行两个键作用分别是:换行就是把滚筒卷一格,不改变水平位置。 (即移到下一行,但不是行首,而是和上一行水
- 记录一下今天被坑了一下午的BUG就从半个月前说起吧当时...........................................
- 环境:numpy,pandas,python3在机器学习和深度学习的过程中,对于处理预测,回归问题,有时候变量是时间,需要进行合适的转换处理
- 页面上有些重要内容需要提醒客户,可采用的方法有很多。提醒用户关注某一区域(div),可以给该div加上边框闪烁的效果,达到吸引用户眼球的效果
- 最近在使用Testlink时,发现导入的用例是xml格式,且没有合适的工具转成excel格式,xml使用excel打开显示的东西也太多,网上
- 一、前言最近忙里偷闲,做了一个部署数据库及IIS网站站点的WPF应用程序工具。 二、内容此工具的目的是:根据.sql文件在本机上部
- 小朋友你可能有很多问号~,上一小节不是已经一顿操作猛如虎搭建好 Python + PyCharm 可用开发环境了吗?为什么这节又来个项目运行
- 前言这篇文章主要介绍了JS大坑之19位数的Number型精度丢失问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习
- 一、需求:有三张表,学生表、成绩表和课程表,我们可以通过连表查询出学生姓名、课程及对应的成绩: 所需表sql-- -------------
- 目的:在numpy数组中知道指定元素的索引函数: np.argwhere>>>x>>>array([[0