用户名: 用QQ登录本站
密 码: 注册
验证码:
首页 软件 编程 笑话 知识 公告 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
广告位招租中
2021年 劳动节 12
2021年 端午节 56
2022年 元 旦 257
2022年 春 节 288
 
  • 您现在的位置:首页 >> JS >> 内容

    javascript实现滚轮轮播图片

    内容摘要: HTML:div class='slide-container' view-count='4'ulli img src='images/women/15444293310974910.jpg' alt=''//lili img src='images/women/15444293312083674.jpg' alt=''//lili img src='ima......

      HTML:

    <div class="slide-container" view-count="4">

    <ul>

    <li>

    <img src="images/women/15444293310974910.jpg" alt=""/>

    </li>

    <li>

    <img src="images/women/15444293312083674.jpg" alt=""/>

    </li>

    <li>

    <img src="images/women/15444293313734437.jpg" alt=""/>

    </li>

    <li>

    <img src="images/women/15444293315979953.jpg" alt=""/>

    </li>

    <li>

    <img src="images/women/15444293316955485.jpg" alt=""/>

    </li>

    <li>

    <img src="images/women/15444293317767707.jpg" alt=""/>

    </li>

    </ul>

    </div>

    CSS:

    .slide-container {

    max-width: 1230px;

    margin: auto;

    overflow: hidden;

    }


    .slide-container ul {

    transition: all 0.5s linear;

    }


    .slide-container li {

    float: left;

    }


    .slide-container img {

    width: 100%;

    }

    JS:

    (function () {


    let slider = $('.slide-container'),

    li = slider.find('li'),

    length = li.length,

    curImgIndex = 0; //当前图片索引


    //设置ul宽度和li的宽度

    function initSlider() {

    slider.find('ul').css({

    'width': length / slider.attr('view-count') * 100 + '%'

    });

    li.css({

    'width': 'calc(' + 100 / length + '% - 10px)',

    'margin': '0 5px'

    });

    }


    //统一处理滚轮滚动事件

    function wheel(event) {

    var delta = 0;

    if (!event) event = window.event;

    if (event.wheelDelta) { //IE、chrome浏览器使用的是wheelDelta,并且值为“正负120”

    delta = event.wheelDelta / 120;

    if (window.opera)


    //因为IE、chrome等向下滚动是负值,FF是正值,为了处理一致性,在此取反处理

    delta = -delta;

    } else if (event.detail) { //FF浏览器使用的是detail,其值为“正负3”

    delta = -event.detail / 3;

    }

    if (delta) {

    handle(delta);


    //阻止事件冒泡重复执行和屏幕向下滚动

    event.preventDefault() && event.stopPropagation();

    }


    }


    //上下滚动时的具体处理函数

    function handle(delta) {


    //滚轮向上滚动

    if (delta < 0) {

    curImgIndex++;

    } else if (delta > 0) { //向下滚动

    curImgIndex--;

    }

    move();

    }


    function move() {


    //到达两端则不移动

    if (curImgIndex > li.length - slider.attr('view-count') || curImgIndex < 0){

    if(curImgIndex > 0 ){

    curImgIndex--;

    }else{

    curImgIndex++;

    }

    return false;

    }

    slider.find('ul').css({

    'transform': 'translateX( -' + 100 / length * curImgIndex + '% )'

    })

    }


    initSlider();


    //绑定滚轮事件兼容性写法

    if (window.addEventListener)

    slider.get(0).addEventListener('DOMMouseScroll', wheel, false);

    slider.get(0).onmousewheel = wheel;

    }());

      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2020/12/15 发布时间:16:36:37 点击:809 录入:齐天大圣
  • 上一篇:使用js获取身份证年龄的示例代码
  • 下一篇:Ajax实现无闪烁定时刷新页面
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V5.01 Build 21.03.31(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    齐天大圣® 制 作 ©2000-2021