尤明明Blog

网站建设 | 前端切图,技术不仅是一种专业,更是一种责任!

您的当前位置: 首页 » 前端学习 » js常用代码 »

swiper箭头跟随鼠标切换效果

2024-11-28   Umming   js常用代码    评论(0)    浏览(29)


swiper箭头跟随鼠标切换效果


<style type="text/css">
.nycga .slide-cp .sbtn{margin-top: .4rem}
.nycga .slide-cp .sbtn a{display: block;width: .5rem;height: .5rem;border: 1px solid #ccc;text-align: center;line-height: .48rem;border-radius: 50%;font-size: .18rem;margin: 0 .1rem}
.nycga .slide-cp .sbtn a:hover{background: #cf0202;border-color: #cf0202;color: #fff}
.nycga .slide-c .item{padding: 0 2vw}
.nycga .slide-c .pic{height: 3.65rem;margin-bottom: .2rem}
.nycga .slide-c .txt h4{font-size: .36rem;color: #be9e5d;line-height: 1.2em;margin-bottom: .2rem}
.nycga .slide-c .txt h4 a{color: #be9e5d;display: block\0;max-height: .86rem\0}
.nycga .slide-c .txt p{font-size: .18rem;line-height: 1.8em;color: #444;max-height: .96rem\0}
.nycga .slide-c:before{content: '';position: absolute;left: 0;top: 0;bottom: 0;width:25%;background: linear-gradient(90deg,#fff,rgba(255,255,255,.95) 20%,rgba(255,255,255,0) 100%);;z-index: 2}
.nycga .slide-c:after{content: '';position: absolute;right: 0;top: 0;bottom: 0;width: 25%;background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95) 80%,#fff 100%);;z-index: 2}
@media screen and (max-width:980px ){
.nycga .slide-c:before{display: none}  
.nycga .slide-c:after{display: none} 
.nycga .slide-c .pic{height: 40vw;} 
}
@media screen and (max-width:640px ){ 
.nycga .slide-c .pic{height: 50vw;} 
}
</style>
 <div class="slide-cp">
                 <div class="swiper-container slide-c"  >
                    <div class="swiper-wrapper">
                          <div class="swiper-slide ">
                            <div class="item bg-mask ">
                                  <div class="pic"><span class="a" style="background-image: url(images/c.png);"><img src="images/c.png" alt="" class="none"></span></div>
                              <div class="txt">
                                <h4 class="din"><a href="https://www.iconfont.cn/" class="l2 titlin_h"><span class="titline_h">Ode to the Red Candle: Wen Yiduo and Wen Lipeng Art Exhibition</span></a></h4>
                                <p class="l3">Although Wen Yiduo's name lived in history as a poet, a scholar, and a martyr to the cause of national liberation and democratic movement, he also left a large number of artistic works. </p>
                              </div>
                            </div>
                          </div>
                    </div>
                 </div>
                 <div class="sbtn">
                    <a href="javascript:;" class="prev iconfont icon-arrbal"></a>
                    <a href="javascript:;" class="next iconfont icon-arrbar"></a>
                 </div>
              </div>
<script type="text/javascript">
function isIE(){
    if(!!window.ActiveXObject || "ActiveXObject" in window){
        return true;
    }else{
        return false;
    }
}

$(function(){
var slideLec = new Swiper('.slide-c', {
speed: 1000,
centeredSlides:true,
centeredSlidesBounds: true,
loop: true,
spaceBetween: 10,
autoplay: {delay: 5000,stopOnLastSlide: false,disableOnInteraction: false,},
 breakpoints: { 
    480: {  
      slidesPerView: 1,
      spaceBetween: 5
    },
    768: {  
      slidesPerView: 1,
      spaceBetween:1
    },
    980: {  
      slidesPerView:2,
      spaceBetween: 1
    }
  },
navigation: {
nextEl: '.slide-cp .next',
prevEl: '.slide-cp .prev',
},

});

if (!isIE()) {
  if ($(window).width() >1200) {
  $('.slide-c').on('click', function(e) {
  var clientX = e.clientX;
  var conW = $(this).width();
  if (clientX < parseInt(conW / 2)) {
  slideLec.slidePrev();return false;
  } else {
  slideLec.slideNext();return false;
  }
  })
  $('.slide-c a').click(function(event){
    var url = $(this).attr('href');
    window.location.href=url;
    //新窗口打开
    //window.open(url,'_blank');
    return false;
  })
  $('.slide-c').on('mousemove', function(e) {
      var conWw = $(this).offset(),conW = $(this).width();
      var clientX = e.clientX;
      var clientXx=parseInt(clientX-conWw.left)
      if (clientXx < parseInt(conW / 2)) {
         $(this).css('cursor',"url(images/arrow-left.svg)30 30, w-resize");
           return false;
      } else {
        $(this).css('cursor',"url(images/arrow-right.svg)30 30, w-resize");
           return false;
      }
    })
  }
}

})
</script>


标签: js代码 swiper

本文链接:https://www.umming.com/js/371.html

声明:本站信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!


发表评论:

//