js+css3实现多行图片点击（自动）左右无缝轮播特效

/*效果图*/

HTML:    <div class="scroll">
       <div class="picbox">
       <ul class="piclist mainlist">
           <li class="goodlist">
                       <a class="scrolling_picture"><img src="data:images/timg.jpg" class="pics" /></a>
                         <a class="title">安全联盟信誉企业</a>
                    </li>

                     <li class="goodlist">
                       <a class="scrolling_picture"><img src="data:images/timg1.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>

                     <li class="goodlist">
                       <a class="scrolling_picture"><img src="data:images/timg2.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>

                     <li class="goodlist">
                       <a class="scrolling_picture"><img src="data:images/timg3.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>

                     <li class="goodlist">
                       <a class="scrolling_picture"><img src="data:images/timg4.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>

                     <li class="goodlist">
                       <a class="scrolling_picture"><img src="data:images/timg5.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>

                    <li class="goodlist">
                       <a class="scrolling_picture"><img src="data:images/timg.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>

                     <li class="goodlist">
                       <a class="scrolling_picture"><img src="data:images/timg1.jpg" class="pics" /></a>
                        <a class="title">安全联盟信誉企业</a>
                    </li>
       </ul>
        <ul class="piclist swaplist"></ul>
   </div>
   <div class="og_prev"></div>
   <div class="og_next"></div>
</div>

CSS:

* {
   margin:0;
   padding:0;
   list-style:none;
}
body {
   font-size:12px;
}
a {
   text-decoration:none;
}
.scroll {
   width:760px;
   margin:0 auto;
   position:relative;
   overflow:hidden;
}
.picbox {
   width:730px;
   height:340px;
   background:#fff;
   border:1px solid #DED7D1;
   overflow:hidden;
   position:relative;
   margin:15px;
}
.picbox ul {
   height:285px;
   padding-top:5px;
}
.piclist {
   position:absolute;
   left:0px;
   top:0px;
}
.piclist li.goodlist {
   width:221px;
   margin:10px 0;
   padding:0px 5px;
   margin-right:-1px;
   float:left;
   padding-left: 20px;
}
.piclist li.goodlist img {
   width:100%;
   height:120px;
}
.swaplist {
   position:absolute;
   left:-3000px;
   top:0px;
}
.og_prev, .og_next {
   width:30px;
   height:60px;
   background:url(../images/btn.png) no-repeat;
   position:absolute;
   top:152px;
   z-index:99;
   cursor:pointer;
}
.og_prev {
   background-position:0 0;
   left:0px;
}
.og_prev:hover {
   background-position:0 -60px;
}
.og_next {
   background-position:-30px 0;
   right:0px;
}
.og_next:hover {
   background-position:-30px -60px;
}
.goodlist img.pics {
   width:85px;
   height:135px;
   float:left;
   background:#fff url(../images/loading.gif) center center no-repeat;
}
.title {
   width:100%;
   height:22px;
   line-height:22px;
   display:block;
   color:#363636;
   text-align: center;
   margin-top: 10px;
}
.scrolling_picture{overflow:hidden; display:block;width:90%;}

JS:

$(function(){
   linum = $('.mainlist li').length;//图片数量
   w = linum/2 * 232;//ul宽度
   $('.piclist').css('width', w + 'px');//ul宽度
   $('.swaplist').html($('.mainlist').html());//复制内容

   $('.og_next').click(function(){

       if($('.swaplist,.mainlist').is(':animated')){
           $('.swaplist,.mainlist').stop(true,true);
       }

       if($('.mainlist li').length>4){//多于4张图片
           ml = parseInt($('.mainlist').css('left'));//默认图片ul位置
           sl = parseInt($('.swaplist').css('left'));//交换图片ul位置
           if(ml<=0 && ml>w*-1){//默认图片显示时
               $('.swaplist').css({left: '928px'});//交换图片放在显示区域右侧
               $('.mainlist').animate({left: ml - 928 + 'px'},'slow');//默认图片滚动
               if(ml==(w-928)*-1){//默认图片最后一屏时
                   $('.swaplist').animate({left: '0px'},'slow');//交换图片滚动
               }
           }else{//交换图片显示时
               $('.mainlist').css({left: '928px'})//默认图片放在显示区域右
               $('.swaplist').animate({left: sl - 928 + 'px'},'slow');//交换图片滚动
               if(sl==(w-928)*-1){//交换图片最后一屏时
                   $('.mainlist').animate({left: '0px'},'slow');//默认图片滚动
               }
           }
       }
   })
   $('.og_prev').click(function(){

       if($('.swaplist,.mainlist').is(':animated')){
           $('.swaplist,.mainlist').stop(true,true);
       }

       if($('.mainlist li').length>4){
           ml = parseInt($('.mainlist').css('left'));
           sl = parseInt($('.swaplist').css('left'));
           if(ml<=0 && ml>w*-1){
               $('.swaplist').css({left: w * -1 + 'px'});
               $('.mainlist').animate({left: ml + 928 + 'px'},'slow');
               if(ml==0){
                   $('.swaplist').animate({left: (w - 928) * -1 + 'px'},'slow');
               }
           }else{
               $('.mainlist').css({left: (w - 928) * -1 + 'px'});
               $('.swaplist').animate({left: sl + 928 + 'px'},'slow');
               if(sl==0){
                   $('.mainlist').animate({left: '0px'},'slow');
               }
           }
       }
   });
});

巴特西

js+css3实现多行图片点击（自动）左右无缝轮播特效

最新文章

热门文章