JQuery 大图轮播还有遮罩效果

最新推荐文章于 2021-11-03 15:00:00 发布

BandaYung

最新推荐文章于 2021-11-03 15:00:00 发布

阅读量1.3k

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/qq_30552993/article/details/50635266

版权

这篇博客分享了一种在微信大屏幕上看到的大图轮播效果，通过JQuery实现，并带有遮罩。作者提取了代码，供读者参考和使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下图：

Html:

    <!DOCTYPE html>  
    <html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="en">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
    <title>jquery中的大图轮播还有遮罩效果</title>  
    <script src=" http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  
    </head>  
    <body>  
    <script type="text/javascript" src="http://wxscreen.alltosun.net/js/jquery.carouFredSel-6.2.1-packed.js"></script>  
    <script>  
    $(function(){   
      $('.case-list li:nth-child(3n)').css('marginRight', 0);  
        
      //顶部轮播  
      $('#caseList3,#caseLeft3, #caseRight3').mouseover(function(){  
        $('#caseLeft3, #caseRight3').css({ opacity:'1',zIndex:'10' });  
      }).mouseout(function(){  
        $('#caseLeft3, #caseRight3').css({ opacity:'0',zIndex:'-10' });  
      });  
      $('#caseList3').carouFredSel({  
        direction:"left",  
        //width: '260',  
        circular:true,  
        prev: '#caseLeft3',  
        next: '#caseRight3',  
        pagination  : {  
            container: "#casePager3",  
            anchorBuilder: false  
        },  
        items: {  
          visible: 1,  
          width: 900,  
          height: 518  
        },  
        scroll:{  
          items:1

最低0.47元/天解锁文章