swiper箭头跟随鼠标切换效果
2024-11-28 Umming js常用代码 评论(0) 浏览(1452)
<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
声明:本站信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
也许你还会对下面的内容感兴趣:
发表评论: