Connect_logo_6.png 退出
前端视频教程 小程序 众筹源码 python 商城源码 商城模板 响应式模板 中文模板 手机模板 企业源码

jQuery新闻组图幻灯片相册代码

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2017-05-12
一款带左右箭头跟缩略图的幻灯片切换特效,jQuery新闻组图幻灯片相册代码。

上海快3开奖号码今天 www.y44gu.cn

js代码

<script>
$(document).ready(function(){                          
    var index=0;
    var length=$("#img img").length;
    var i=1;
    
    //关键函数:通过控制i ,来显示图片
    function showImg(i){
        $("#img img")
            .eq(i).stop(true,true).fadeIn(800)
            .siblings("img").hide();
         $("#cbtn li")
            .eq(i).addClass("hov")
            .siblings().removeClass("hov");
    }
    
    function slideNext(){
        if(index >= 0 && index < length-1) {
             ++index;
             showImg(index);
        }else{
			if(confirm("已经是最后一张,点击确定重新浏览!")){
				showImg(0);
				index=0;
				aniPx=(length-5)*142+'px'; //所有图片数 - 可见图片数 * 每张的距离 = 最后一张滚动到第一张的距离
				$("#cSlideUl ul").animate({ "left": "+="+aniPx },200);
				i=1;
			}
            return false;
        }
        if(i<0 || i>length-5) {return false;}						  
               $("#cSlideUl ul").animate({ "left": "-=142px" },200)
               i++;
    }
     
    function slideFront(){
       if(index >= 1 ) {
             --index;
             showImg(index);
        }
        if(i<2 || i>length+5) {return false;}
               $("#cSlideUl ul").animate({ "left": "+=142px" },200)
               i--;
    }	
        $("#img img").eq(0).show();
        $("#cbtn li").eq(0).addClass("hov");
        $("#cbtn tt").each(function(e){
            var str=(e+1)+""+length;
            $(this).html(str)
        })
    
        $(".picSildeRight,#next").click(function(){
               slideNext();
           })
        $(".picSildeLeft,#front").click(function(){
               slideFront();
           })
        $("#cbtn li").click(function(){
            index  =  $("#cbtn li").index(this);
            showImg(index);
        });	
		$("#next,#front").hover(function(){
			$(this).children("a").fadeIn();
		},function(){
			$(this).children("a").fadeOut();
		})
    })	
</script>

  • 墨西哥地震与球队进球民众跳跃啥关系?专家:无关 2018-07-14
  • 视频:16小时长效持妆 测YSL墨水气垫限量版 2018-07-14
  • 城口修齐镇开展污水处理厂(站)运行管理工作检查 2018-07-13
  • 做强茶企 告别“大而不强” 2018-07-13
  • 【理上网来辉煌十九大】美国学者关注十九大报告:中国将形成新的共识继续推进改革 2018-07-12
  • 丰瑞祥亮相全球互联网经济大会 探索大数据下金融支付的发展方向 2018-07-11
  • “青城纵马” 2018呼和浩特马拉松7月8日纵情开跑 2018-07-11
  • 收益走高 2018年银行理财产品怎么买? 2018-07-10
  • 粽香传真情 军民一家亲 2018-07-09
  • 江西省第33届“爱鸟周”正式启动 2018-07-08
  • 传媒每周热闻第357期:人民日报社与雄安新区共建文化传媒平台 2018网络媒体新春走基层主题活动启动 2018-07-08
  • 习近平为传统文化“代言” 2018-07-07
  • 陕西特殊药品实现医院备案 2018-07-06
  • 青海:52个客运站卫生间将全面改造 2018-07-06
  • 76| 703| 959| 821| 651| 176| 634| 871| 901| 68|