jQuery编写的Banner首页轮播图插件

查看演示立即下载

插件描述：使用超简单，仅需定义一个div的宽高，将代码拷贝到其内即可，自适应网页大小,代码注释全。

更新时间：2020-01-14 01:02:10

使用方法：

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="banners">
    <!--受保护块，不建议修改》》》-->
    <div class="click_left"><img class="get_height" onclick="banner_left_right('left')" src="../images/banner_left.png"></div>
    <div class="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('/',true)">
        <img class="banner_img2" src="../images/Texture 2.jpg" onclick="link('/',false)">
        <img class="banner_img3" src="../images/Texture 3.jpg" onclick="link('/',true)">
        <img class="banner_img4" src="../images/Texture 4.jpg" onclick="link('/',false)">
        <img class="banner_img5" src="../images/Texture 5.jpg" onclick="link('/',true)">
        <!--<<<在此位置内添加img标签即可-->
    </div>
    <!--此段代码不可移动位置-->
    <script type="text/javascript">
        loads();
    </script>
    <!--此段代码不可移动位置-->
</div>
<!--《《《主要内容-->

3、注意事项

注意img标签的格式

假如要设置10个banner

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

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery树型选择插件leg_tree2.1(原创)
下一个特效： js六位数字框自动跳格