admin 发表于 2020-11-3 12:56:16

Jquery栏目无缝滚动效果

Jquery栏目无缝滚动效果,支持从左往右或从右往左无缝滚动。
代码示例:
      Jquery无缝滚动效果                .container { width:1133px; height:auto; position:relative;margin:0 auto;}      .new { height:445px; background:#f4f4f4; }      .new .new_tit { font-size:18px; text-align:left; color:#332d2a; padding-top:55px; padding-bottom:10px;}      .new .new_tit a:hover { color:#e71d4d;}      .new .nw { width:100%; position: absolute;left:0; top:90px; z-index:1; height:345px; overflow:hidden;}      .new .nw .allnew { width:2000px; height:294px; padding-top:5px; overflow:hidden; }      .new .nw .nl{ float:left; margin-right:33px; -webkit-transform: translate(0,0);transform: translate(0,0);-webkit-transition: all ease-out 0.6s 0s;transition: all ease-out 0.6s 0s;}      .new .nw .nl:hover { -webkit-transform: translate(0,-5px); transform: translate(0,-5px); }      .new .nw .nl a { width:355px; height:305px;}      .new .nw .nl a .img { display: block; width:356px; height:234px;border:1px solid red; background:green;}      .new .nw .nl a h1 { font-size:14px; font-weight:400; color:#1f1f1f; padding-top:20px; padding-bottom:4px;}      .new .nw .nl a h2 { color:rgba(120,120,120,0.6); font-size:12px;}      .new .n_left { display:block; position:absolute;left:-40px; top:220px; z-index:10; cursor:pointer;width:20px;height:20px;border:1px solid red;}      .new .n_right { display:block; position:absolute;right:-36px; top:220px; z-index:10; cursor:pointer;width:20px;height:20px;border:1px solid red;}                Jquery栏目无缝滚动效果
      左
                                                      
                        标题一               
                                    
                        标题二               
                                    
                        标题三               
                                    
                        标题四               
                                    
                        标题五               
            
      
      右
   

页: [1]
查看完整版本: Jquery栏目无缝滚动效果