jQuery渐变式轮播图(原创)

所属分类:-

 3752  67  查看评论 (0)
分享到微信朋友圈
X
jQuery渐变式轮播图(原创) ie兼容11

1.html代码:

<div class="slider">
    <ul>
        <li>
            <a href="#"><img src="images/1.png" alt=""></a>
        </li>
        <li>
            <a href="#"><img src="images/2.png" alt=""></a>
        </li>
        <li>
            <a href="#"><img src="images/3.png" alt=""></a>
        </li>
        <li>
            <a href="#"><img src="images/4.png" alt=""></a>
        </li>
    </ul>
    <!-- 左右箭头 -->
    <div class="arrow">
        <span class="arrow_left">&lt;</span>
        <span class="arrow_right">&gt;</span>
    </div>
    <div class="tab">
        <span class="show"></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

2.js代码:

$(function() {
    var index = 0;
    var timer = null;
    // 定时器自动播放
    function sliderTimer() {
        timer = setInterval(function() {
            index++;
            if (index == $('.slider li').length) {
                index = 0;
            }
            sliderIndex(index)
        }, 2000)
    }
    sliderTimer()
    // 根据索引值点亮小圆点并显示对应图片
    function sliderIndex(index) {
        // 对应图片显示
        $('.slider li').eq(index).fadeIn(600).siblings().fadeOut(600);
        // 小圆点点亮
        $('.tab span').eq(index).addClass('show').siblings().removeClass('show')
    }
    // 小圆点点击事件
    $('.tab span').click(function() {
        clearInterval(timer)
        index = $(this).index()
        sliderIndex(index)
    })
    // 左侧按钮点击事件
    $('.arrow_left').click(function() {
        index--;
        if (index == -1) {
            index = $('.slider li').length - 1;
        }
        sliderIndex(index)
    })
    // 右侧按钮点击事件
    $('.arrow_right').click(function() {
        index++;
        if (index == $('.slider li').length) {
            index = 0;
        }
        sliderIndex(index)
    })
    // 鼠标移入轮播区域关闭定时器
    $('.slider').mouseenter(function() {
        clearInterval(timer);
    })
    // 鼠标移出轮播区域开启定时器
    $('.slider').mouseleave(function() {
        sliderTimer();
    })
})
相关插件-

iframe fixed失效问题兼容ios

iframe在安卓、ios中滚动,头部、底部也能固定。主要解决iframe在苹果手机iphone(ios)中滚动时头部与底部不能固定及滚动时出现卡顿的情况。本Demo演示iframe中固定父页面头部、底部,子页面正常滚动。兼容PC和移动端,尤其是苹果ios系统(如iphone手机)
 
 13090  180

极简的焦点图

极简的焦点图多种轮播效果。
 
 23554  217

轻量级JS库TypeLighter实现打字机效果

轻量级JS库TypeLighter.js实现打字机效果
 
 4137  88

最好用的拼音查询,全拼,简拼,汉字查询

支持全拼,简拼,汉字查询。
 
 33814  218

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

取消回复