站长资源
中国站长网站

jQuery轮播图/焦点图插件之-jquery.slideBox

jQuery轮播图/焦点图插件之-jquery.slideBox

jQuery图片轮播(焦点图)插件jquery.slideBox兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定默认显示第N张,自由设定,代码简洁,运行效率高,用户体验良好

使用方法

引入插件

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

HTML部分(提供四个示例供大家参考)

<div id="demo1" class="slideBox">
  <ul class="items">
    <li><a href="https://wangdahai.cn/" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
    <li><a href="https://wangdahai.cn/" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
    <li><a href="https://wangdahai.cn/" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
    <li><a href="https://wangdahai.cn/" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
    <li><a href="https://wangdahai.cn/" title="这里是测试标题五"><img src="img/5.jpg"></a></li>
  </ul>
</div>
<h3>二、上下轮播,滚动持续0.3秒,滚动延迟5秒,滚动效果linear,初始焦点第2张,点选按键自动隐藏</h3>
<div id="demo2" class="slideBox">
  <ul class="items">
    <li><a href="https://wangdahai.cn/" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
    <li><a href="https://wangdahai.cn/" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
    <li><a href="https://wangdahai.cn/" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
    <li><a href="https://wangdahai.cn/" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
    <li><a href="https://wangdahai.cn/" title="这里是测试标题五"><img src="img/5.jpg"></a></li>
  </ul>
</div>
<h3>三、左右轮播,滚动持续0.3秒,滚动延迟5秒,滚动效果linear,初始焦点第1张,点选按键不隐藏,按键边框半径10px(圆形)</h3>
<div id="demo3" class="slideBox">
  <ul class="items">
    <li><a href="https://wangdahai.cn/" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
    <li><a href="https://wangdahai.cn/" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
    <li><a href="https://wangdahai.cn/" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
    <li><a href="https://wangdahai.cn/" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
    <li><a href="https://wangdahai.cn/" title="这里是测试标题五"><img src="img/5.jpg"></a></li>
  </ul>
</div>
<h3>四、隐藏底栏</h3>
<div id="demo4" class="slideBox">
  <ul class="items">
    <li><a href="https://wangdahai.cn/" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
    <li><a href="https://wangdahai.cn/" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
    <li><a href="https://wangdahai.cn/" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
    <li><a href="https://wangdahai.cn/" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
    <li><a href="https://wangdahai.cn/" title="这里是测试标题五"><img src="img/5.jpg"></a></li>
  </ul>
</div>

JS调用

jQuery(function($) { 
    $('#demo1').slideBox(); 
    $('#demo2').slideBox({ 
        direction: 'top', 
        //left,top#方向 
        duration: 0.3, 
        //滚动持续时间,单位:秒 
        easing: 'linear', 
        //swing,linear//滚动特效 
        delay: 5, 
        //滚动延迟时间,单位:秒 
        startIndex: 1 //初始焦点顺序 
    }); 
    $('#demo3').slideBox({ 
        duration: 0.3, 
        //滚动持续时间,单位:秒 
        easing: 'linear', 
        //swing,linear//滚动特效 
        delay: 5, 
        //滚动延迟时间,单位:秒 
        hideClickBar: false, 
        //不自动隐藏点选按键 
        clickBarRadius: 10 
    }); 
    $('#demo4').slideBox({ 
        hideBottomBar: true //隐藏底栏 
    }); 
});

具体效果请点击下方预览按钮


免费下载  在线演示  
×

站长资源极速下载通道: jQuery轮播图/焦点图插件之-jquery.slideBox

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » jQuery轮播图/焦点图插件之-jquery.slideBox

评论 抢沙发

评论前必须登录!