您的位置：首页 > Web前端 > JQuery

jquery中的大图轮播还有遮罩效果

2016-02-04 15:47 543 查看 
    <!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,  
          fx: 'scroll',  
          pauseOnHover:true,  
          pauseDuration:3000,  
        }  
      });  
        
      //案例轮播  
      $('#caseList').carouFredSel({  
        circular:true,  
        items: {  
          visible: 1,  
          width: 602,  
          height: 350  
        },  
        direction:"left",  
        pagination:'#casepages',  
        scroll:{  
          items:1,  
          //easing:"elastic",  
          //duration:700,                           
          pauseOnHover:true,  
          pauseDuration:10000  
          //fx: 'uncover'  
        }  
      });  
        
      //推荐案例  
      $('#caseList2').carouFredSel({  
        direction:"left",  
        //width: '260',  
        circular:true,  
        prev: '#casePrev2',  
        next: '#caseNext2',  
        pagination: "#casePager2",  
        items: {  
          visible: 1,  
          width: 260,  
          height: 195  
        },  
        scroll:{  
          items:1,  
        pauseOnHover:true,  
          fx: 'scroll'  
        }  
    });  
        
        
    });  
    </script>  
    <style type="text/css">  
    .detail-scroll {  
        width: 900px;  
        height: auto;  
        position: relative;  
    }  
    #caseLeft3 {  
        left: 0px;  
    }  
    #caseRight3 {  
        right: 0px;  
    }
    #caseLeft3:hover em,#caseRight3:hover em {  
        display: block;
    }  
    #caseLeft3, #caseRight3 {  
        width: 50%;  
        height: 520px;  
        position: absolute;  
        top: 0px;  
        z-index: 12;  
        opacity: 1;  
        cursor: pointer;  
    }
    #caseLeft3 em {  
        left: 10px;  
        background-position: 0px 0px;  
    }  
    #caseRight3 em {  
        right: 10px;  
        background-position: right top;  
    }  
    #caseLeft3 em, #caseRight3 em {  
        display: none;
        width: 60px;  
        height: 60px;  
        background-image: url("http://wxscreen.alltosun.net/images/official/btns2.png");  
        background-repeat: no-repeat;  
        position: absolute;  
        top: 50%;  
        margin: -50px 0px 0px;  
        cursor: pointer;  
    }  
    .caroufredsel_wrapper {  
        display: block; float: none; z-index: auto; width: 900px; height: 518px; margin: 0px 0px 10px; overflow: hidden;  
    }  
    .detail-scroll .list1 {  
        position: absolute; top: 0px; left: 0px; margin: 0; padding:0;width: 10120px; height: 518px; z-index: auto;  
    }  
    .detail-scroll .list1 li {  
        float: left;  
        width: 900px;  
        height: 518px;  
        background: #F3F4F5 none repeat scroll 0% 0%;  
        overflow: hidden;  
        position: relative;  
    }  
    .detail-scroll .list1 li img {  
        width: 100%;  
        cursor: pointer;  
    }  
    .detail-scroll .list1 li p {  
        position: absolute;  
        left: 0px;  
        bottom: 0px;  
        z-index: 1000;  
        width: 890px;  
        padding: 0 15px;  
        margin: 0;  
        color: #FFF;  
        line-height: 40px;  
        height: 40px;  
        font-size: 16px;  
        background: transparent url("http://wxscreen.alltosun.net/images/official/mayer2.png") repeat scroll 0% 0%;  
    }  
    .detail-scroll .list2 {  
        height: auto;  
        text-align: center;  
    }  
    .detail-scroll .list2 a {  
        display: inline-block;  
        cursor: pointer;  
        opacity: 0.5;  
    }  
    .detail-scroll .list2 .selected {  
        opacity: 1;     
    }  
    </style>  
    <div class="detail-scroll">  
        <div id="caseLeft3" style="display: block; opacity: 0; z-index: -10;"><em></em></div>  
        <div id="caseRight3" style="display: block; opacity: 0; z-index: -10;"><em></em></div>  
        <div class="caroufredsel_wrapper">  
            <ul id="caseList3" class="list1">  
                <li><img src="http://wxscreen.alltosun.net/static/upload/slavedev01_store2/2015/08/25/20150825115306000000_3_601979_5538.png" height="518px" width="900px"><p>第一个图片</p></li>  
                <li><img src="http://wxscreen.alltosun.net/static/upload/slavedev01_store2/2015/08/25/20150825115306000000_1_550213_2542.png" height="518px" width="900px"><p>第二个图片</p></li>  
                <li><img src="http://wxscreen.alltosun.net/static/upload/slavedev01_store2/2015/08/25/20150825114308000000_9_563541_2293.png" height="518px" width="900px"><p>第三个图片</p></li>  
                <li><img src="http://wxscreen.alltosun.net/static/upload/slavedev01_store2/2015/09/07/20150907193550000000_1_109021_6318.jpg" height="518px" width="900px"><p>第四个图片</p></li>  
                <li><img src="http://wxscreen.alltosun.net/static/upload/slavedev01_store2/2015/09/07/20150907193458000000_1_725910_9530.png" height="518px" width="900px"><p>第五个图片</p></li>  
            </ul>  
        </div>  
        <div id="casePager3" class="list2">  
            <a class="selected"><img src="http://wxscreen.alltosun.net/static/upload/slavedev01_store2/2015/08/25/20150825115306000000_4_12388_7264.png"></a>  
            <a class=""><img src="http://wxscreen.alltosun.net/static/upload/slavedev01_store2/2015/08/25/20150825115306000000_2_12116_265.png"></a>  
            <a class=""><img src="http://wxscreen.alltosun.net/static/upload/slavedev01_store2/2015/08/25/20150825114308000000_10_13159_3596.png"></a>  
            <a class=""><img src="http://wxscreen.alltosun.net/static/upload/slavedev01_store2/2015/09/07/20150907193550000000_2_7972_6288.jpg"></a>  
            <a class=""><img src="http://wxscreen.alltosun.net/static/upload/slavedev01_store2/2015/09/07/20150907193458000000_2_14942_4648.png"></a>  
        </div>  
    </div>  
      
    </body>  
    </html>  


如上的代码是在"微信大屏幕"上看到的比较不错的轮播图片效果,所以本人就对其进行了一定的提取,希望大家喜欢!!!

下面是一个效果图:



如果想看网络效果的话可以看下:http://wxscreen.alltosun.net/case/zhongyangwangxinbanxieweixindapingmuzaijingjubanwangluochuanboshalong
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航