您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 焦点图 >

    jquery slide图片滚动展示代码

    时间:2014-08-26 08:35 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

    效果预览 进入下载地址列表

    jquery slide图片滚动展示代码是一款适用于产品图片的展示特效代码。jquery图片滚动左右按钮产品展示 所属专题:图片代码

    <script type="text/javascript">
    $(function(){ 


    var page=1;
    var i=3;
    var $p_Div=$(".pic_content");
    var $picDiv=$(".pic_lists");
    var picNum=$picDiv.children("ul").children("li").length;
    var page_count=Math.ceil(picNum/3);
    var $pDiv_w=$p_Div.width()+12;


    $(".right_btn").click(function(){
    if(page_count>page){
    $picDiv.animate({left:'-'+page*$pDiv_w+"px"},"normal");
    page++;
    $(".left_btn").css({'background':'url(images/leftstart.jpg) no-repeat'});
    if(page>=page_count){
    $(this).css({'background':'url(images/rightstop.jpg) no-repeat'});
    }else{
    $(this).css({'background':'url(images/rightstart.jpg) no-repeat'});
    }

    $(this).siblings(".highlight_tip").find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
    });

    $(".left_btn").click(function(){
    if(page>1){
    $picDiv.animate({left:"+="+$pDiv_w+'px'},"normal");
    page--;
    $(".right_btn").css({'background':'url(images/rightstart.jpg) no-repeat'});
    if(page<=1){
    $(this).css({'background':'url(images/leftstop.jpg) no-repeat'});  
    }else{
    $(this).css({'background':'url(images/leftstart.jpg) no-repeat'});
    }
    }
    $(this).siblings(".highlight_tip").find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
    });

    $(".pic_lists>ul>li").hover(function(){
    $(this).children("p").show();
    },function(){
    $(this).children("p").hide();
    });

    })
    </script>

    jquery slide图片滚动展示代码由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/jiaodiantu/10125.html 源码搜藏承诺:本站所有资源无病毒,无弹窗,无干扰链接!