首页 前端源码 js/jQuery自适应Banner轮播图插件

js/jQuery自适应Banner轮播图插件

2023-05-14 16:05:29 前端源码 前端哥 862 346 我要收藏
js/jQuery自适应Banner轮播图插件下载地址: https://www.qianduange.cn/index.php/art/download/id/53.html

js/jQuery自适应Banner轮播图插件是一款使用超简单,仅需定义一个div的宽高,将代码拷贝到其内即可,自适应网页大小,代码注释全。

使用方法:

1、在页面head内引入以下内容(注意路径是否与你项目是否符合)

<link rel="stylesheet" type="text/css" href="css/banner.css"><script type="text/javascript" src="js/jquery-3.4.1.min.js"></script><script type="text/javascript" src="js/banner.js"></script>

2、复制以下内容到你自己页面的定义好大小的div框内,无需再为以下内容设置css样式,直接增加img标签或减少img标签即可

<div class="frame">	<!--使用该插件请查看根目录《使用方法.txt》-->	<!--主要内容》》》-->		<div class="banners">			<!--受保护块,不建议修改》》》-->			<div class="click click_left"><img class="get_height" onclick="banner_left_right('left')" src="images/banner_left.png"></div>			<div class="click click_right"><img onclick="banner_left_right('right')" src="images/banner_right.png"></div>			<div class="number">				<div class="numbers"></div>				<div style="clear: both;"></div>			</div>			<!--《《《受保护块,不建议修改-->			<!--onlick事件调用函数link(参数1,参数2)>>>参数1:跳转链接; 参数2:跳转方式(true:在新的窗口打开链接,false:在当前窗口打开链接)-->			<div class="banner_img">				<!--在此位置内添加img标签即可>>>-->				<img class="banner_img1" src="images/Texture-1.jpg" onclick="link('https://www.qianduange.cn/',true)">				<img class="banner_img2" src="images/Texture-2.jpg" onclick="link('https://www.qianduange.cn/',false)">				<img class="banner_img3" src="images/Texture-3.jpg" onclick="link('https://www.qianduange.cn/',true)">				<!--<<<在此位置内添加img标签即可-->			</div>			<!--此段代码不可移动位置-->			<script type="text/javascript">				console.log("前端哥个人博客");				loads();			</script>			<!--此段代码不可移动位置-->		</div>	</div>

3、注意事项

注意img标签的格式

假如要设置10个banner

<img class="banner_img1" src="../images/Texture 5.jpg" onclick="link('http://www.baidu.com',true)">???<img class="banner_img10" src="../images/Texture 5.jpg" onclick="link('http://www.baidu.com',true)">

演示效果图:

转载请注明出处或者链接地址:https://www.qianduange.cn/article/53.html
评论
会员中心 联系我 留言建议 回顶部
复制成功!