swiper箭头跟随鼠标切换效果
2024-11-28 Umming js常用代码 评论(0) 浏览(29)
<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使用localStorage和元素属性完成多语言切换功能
下一篇: 简单的视频弹窗播放效果
本文链接:https://www.umming.com/js/371.html
声明:本站信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
也许你还会对下面的内容感兴趣:
发表评论: