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

 查看演示  website  立即下载

更新时间：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('http://www.baidu.com',true)">
        <img class="banner_img2" src="../images/Texture 2.jpg" onclick="link('http://www.baidu.com',false)">
        <img class="banner_img3" src="../images/Texture 3.jpg" onclick="link('http://www.baidu.com',true)">
        <img class="banner_img4" src="../images/Texture 4.jpg" onclick="link('http://www.baidu.com',false)">
        <img class="banner_img5" src="../images/Texture 5.jpg" onclick="link('http://www.baidu.com',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('http://www.baidu.com',true)">
?
?
?
<img class="banner_img10" src="../images/Texture 5.jpg" onclick="link('http://www.baidu.com',true)">

PREVIOUS:
NEXT:
js六位数字框自动跳格
jQuery树型选择插件leg_tree2.1(原创)