jquery-幻灯片组件

css：

a {
           text-decoration: none;
       }

       .banner-slider {
           float: left;
           width: 544px;
           height: 414px;
           background-color: #8edff3;
       }

       .ui-slider {
           width: 544px;
           height: 414px;
           position: relative;
           overflow: hidden;
       }

       .ui-slider-wrap {
           width: 99999px;
           height: 414px;
           position: absolute;
           left: 0;
           right: 0;
           transition: all .5s;
       }

       .ui-slider-wrap .item {
           display: block;
           float: left;
           width: 544px;
           height: 414px;
       }

       .ui-slider-arrow {
           width: 544px;
           height: 40px;
           position: absolute;
           top: 50%;
           margin-top: -20px;
       }

       .ui-slider-arrow .item {
           display: block;
           width: 40px;
           height: 40px;
           position: absolute;
           top: 0;
           background: url(img/ui-slider-arrow.png) no-repeat;
       }

       .ui-slider-arrow .left {
           left: 0;
       }

       .ui-slider-arrow .right {
           right: 0;
           background-position: -40px 0;
       }

       .ui-slider-process {
           width: 544px;
           height: 12px;
           text-align: center;
           position: absolute;
           left: 0;
           bottom: 20px;
       }

       .ui-slider-process .item {
           display: inline-block;
           width: 16px;
           height: 16px;
           background: url(img/ui-slider-process.png) no-repeat;
       }

       .ui-slider-process .item_focus,
       .ui-slider-process .item:hover {
           background-position: -23px 0;
       }

html：

// 幻灯片

//图片

//箭头

//小圆点

</div>

js:

// ui-slidder

           //   1. 左右箭头需要能控制翻页
           //   2. 翻页的时候，进度点，要联动进行focus
           // 3. 翻到第三页的时候，下一页需要回到第一页，翻到第一页的时候，同理

// 4. 进度点，在点击的时候，需要切换到对应的页面

// 5. 没有（进度点点击、翻页操作）的时候需要进行自动滚动

// 6. 滚动过程中，屏蔽其他操作（自动滚动、左右翻页、进度点点击）

// 7. 高级-无缝滚动

$.fn.UiSlider = function() {

var ui = $(this);

var wrap = $('.ui-slider-wrap');

var btn_prev = $('.ui-slider-arrow .left', ui);
var btn_next = $('.ui-slider-arrow .right', ui);

var items = $('.ui-slider-wrap .item', ui);
var tips = $('.ui-slider-process .item', ui);

// 预定义

               var current = 0;
               var size = items.size();
               var width = items.eq(0).width();
               var enableAuto = true;

               //   设置自动滚动感应（如果鼠标在 wrap 中，不要自动滚动）
               ui
                   .on('mouseover', function() {
                       enableAuto = false;
                   })
                   .on('mouseout', function() {
                       enableAuto = true;
                   })

               //   具体操作
               wrap
                   .on('move_prev', function() {
                       if(current <= 0) {
                           current = size;
                       }
                       current = current - 1;
                       wrap.triggerHandler('move_to', current);
                   })
                   .on('move_next', function() {
                       if(current >= size - 1) {
                           current = -1;
                       }
                       current = current + 1;
                       wrap.triggerHandler('move_to', current);
                   })
                   .on('move_to', function(evt, index) {
                       wrap.css('left', index * width * -1);
                       tips.removeClass('item_focus').eq(index).addClass('item_focus');
                   })
                   .on('auto_move', function() {

                       setInterval(function() {
                           enableAuto && wrap.triggerHandler('move_next');
                       }, 2000);

})
.triggerHandler('auto_move');

               //   事件
               btn_prev.on('click', function() {
                   wrap.triggerHandler('move_prev');
               });
               btn_next.on('click', function() {
                   wrap.triggerHandler('move_next');
               });
               tips.on('click', function() {
                   var index = $(this).index();
                   wrap.triggerHandler('move_to', index);
               })

           }
           // 页面的脚本逻辑
           $(function() {
               $('.ui-slider').UiSlider();
           });

图片下载地址：https://pan.baidu.com/s/15ZFC5MRcfxh7TJ2xGk0BOQ 密码：7e3l

猜你喜欢