jQuery渐变式轮播图(原创)

所属分类:-

 7549  155  查看评论 (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();
    })
})
相关插件-

jquery控制滚动条下拉后DIV容器在页面中的位置

jquery控制滚动条下拉后DIV容器在页面中的位置
 
 27995  301

+iCal风格的漂亮日历

+iCal风格的漂亮日历
 
 28734  266

jQuery扔进垃圾桶效果

jQuery扔进垃圾桶效果
 
 22236  251

一个很不错的bootstrap后台模板

一个很不错的bootstrap后台模板,具备了优秀的bootstrap插件和视觉效果
 
 39600  413

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

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复