图片轮换效果。

2012-08-31 02:25:12 216 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

JS图片自动轮换效果实现今天不在状态，五一快到了，俺就特想玩了。好了，天色已晚，闲话不多说，看下用javaScript 实现的图片自动轮换效果，先看图片下面是具体的代码，还是比较简单的。越狱的囚徒 .content{ border:3px solid red; padding:3px; width:500px; height:245px; position:relative; } 阅读详情

效果要求：一。大图自主向右滚动，滚动需要有滚动的过程而不是一下从第一张图跳到第二张图。
二。当鼠标移动到大图上的时候，大图的正下方出现所有大图的缩略图，鼠标移开的时候缩略图隐藏。
三。点击缩略图的时候大图做对应滚动，滚动的时候也不能一下滚动过去，需要有滚动的过程。

...全文

COMSOL报错调试总结（不定期更新） COMSOL报错调试总结1. 可定位错误1.1 除零错误1.2 未定义变量值1.3 边界条件/材料属性等缺失2. 难定位错误2.1. 装配期间内存不足官方给的案例总是非常完美，运行流畅，结果完美。但是自己做模型时候就总是报错，而且不像自己coding的程序那样可以明确定位哪里出了bug。这里把我碰到的一些报错问题以及调试方法记录下来~ 部分来源于以下参考来源： http://wap.sciencenet.cn/blog-1467490-1118453.html?mobile=1 1. 可定位错误以下错误阅读详情

我自是年少-韶华倾负

JavaScript 87,984 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

泡泡鱼_ 2012-08-31

打赏
举报

55555555555555

满天神佛呀，给道雷给LZ吧，把他劈成非洲人算了。真黑呀。一分都不给俺

泡泡鱼_ 2012-08-31

打赏
举报

你的工作我来做，你的工资是不是也给我咧？

朋友，做人要厚道。给了你基础实现，些微的修改你应该自己来

算了，你要求的效果我已经发给你了，算是推你入火海了吧。别找我报仇就是了

PS：不给分我会咬人的

我自是年少-韶华倾负 2012-08-31

打赏
举报

大侠我是个菜鸟。你发的还是不太完整能弄个完整的给我么。谢谢啦

我自是年少-韶华倾负 2012-08-31

打赏
举报

还是不太完整啊，大侠。我是个菜鸟。能弄个完整版的么?

泡泡鱼_ 2012-08-31

打赏
举报

已经发你邮箱了。。。。。。

泡泡鱼_ 2012-08-31

打赏
举报

调用：

(function(){

   $('#header').my_header({h:300,auto:true,go:'next',t:3}); 

})

我自是年少-韶华倾负 2012-08-31

打赏
举报

我发了个站内信给你能直接发完整的 demo 给我么？邮箱已经在站内信发给你了。谢谢

泡泡鱼_ 2012-08-31

打赏
举报

CSS:

html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,em,img,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li{margin:0;padding:0;border:0;vertical-align:baseline;}

.fl{float:left;}

.fr{float:right;}

body ul li{list-style:none;}

.header{width:100%;position:relative;z-index:0; overflow:hidden; zoom:1;font:12px/1.5 tahoma,arial,\5b8b\4f53;margin:0;padding:0;border:0;vertical-align:baseline;}

.header a{color:#606060;text-decoration:none;}

.header a:hover{color:#ff3000; text-decoration:none;}

.header .slide{ position:absolute;width:100%; left:0; top:0; overflow:hidden; z-index:0;}

.header .slidelist{ position:absolute;width:1260em;}

.header .slidelist li{ float:left; background:#fff url(images/header/loading.gif) no-repeat center;}

.header .slidelist li img{ }

.header .go{ }

.header .go em{ width:45%; height:69px; display:inline-block; cursor:pointer;}

.header .wrap{ width:100%; margin:0 auto; clear:both;height:45px;position:relative; z-index:0; }

泡泡鱼_ 2012-08-31

打赏
举报

DOM：

    <div id="header">

        

        <div class="slide">

            <ul class="slidelist">

                <li><img src="/images/space.gif" data-src="b/1.jpg" width="100%" height="223" alt=""/></li>

                <li><img src="/images/space.gif" data-src="b/2.jpg" width="100%" height="223" alt=""/></li>

                <li><img src="/images/space.gif" data-src="b/3.jpg" width="100%" height="223" alt=""/></li>

                <li><img src="/images/space.gif" data-src="b/4.jpg" width="100%" height="223" alt=""/></li>

                <li><img src="/images/space.gif" data-src="b/5.jpg" width="100%" height="223" alt=""/></li>

                <li><img src="/images/space.gif" data-src="b/6.jpg" width="100%" height="223" alt=""/></li>

            </ul>

            <div class="go" style="position:absolute;background:url(/images/header/bg12.png) no-repeat left center; height:52px; width:100%; margin:0px 0 0 -500px; top:110px; left:50%; z-index:0;"> <em class="fl igoleft"></em> <em class="fr igoright"></em> </div>

        </div>

    </div>

其中：/images/space.gif是一张空图片
/images/header/bg12.png是一张有左，右箭头的图片

泡泡鱼_ 2012-08-31

打赏
举报

我自己写的一个小功能，基于jQuery的：

(function(a,b) {

   a.widget("ui.my_header", {

        options:{

		    h:345,//焦点图高度

		    auto:true,//是否自动播放

		    go:'next',//自动播放参数：prev[上一张];next[下一张]

		    t:3//自动播放时的时间间隔

		},



		_a:0,

		_play:null,

		_imgslide:null,//焦点图容器对象

		_imgslideli:null,//焦点图个体对象

		 _that:this,

		_init:function(){

		    this.createdom();

		    

		    var _this=this.element;//获取操作对象

		    var _itemempty='';//焦点图空对像列表

		    _imgslide=_this.find(".slide .slidelist");//焦点图容器对象

		    _imgslideli=_imgslide.find("li");//焦点图个体对象

		    

		    if(_imgslideli.size()>0){

		    

		        var _itemtemp='<li><img src="'+this._resocucedomain+'/corpuser/widget/images/header/space.gif" width="100%" height="'+this.options.h+'px" alt=""></li>';//焦点图空对象html模板

		        var _itemimg=_this.find('.slide .slidelist img');//焦点图列表真实图片列表

		        $(_itemimg).each(function(){

	                _itemempty+=_itemtemp;

	            });



	            //将焦点图实体对象的值赋予对应的空对像集合

	            $(".slidelist li").each(function(i){

	                //以背景形式加载,无法完美自适应分辨率

		            //$(this).children("img").css("background-image","url("+$(_itemimg[i]).attr("data-src")+")","background-repeat","repeat-x");

		            //直接以原图形式加载,拉伸后可自适应分辨率，分辨率与原图尽寸差距较大时可能会变形

		            $(this).children("img").attr("src",$(_itemimg[i]).attr("data-src"));

	            });



	            //将焦点图个体空器设置为与当前对象等宽

	            _imgslideli.width(_this.width()).height(this.options.h);

        	    //复制第1个焦点图对象，并附加于容器内用于填充最后一张时的空白

	            _imgslideli.eq(0).clone().appendTo(_imgslide);

    	        

    	        _a=0;

	            if(_itemimg.size()<=1){

	                _this.find(".go").hide();

	            }else{

                    this.ListenEvent();

                    if(this.options.auto){this.start();}

                }

            }

		},

		//追加样式；绑定导航菜单事件

		createdom:function(){

		

		    this.element.removeClass('header').addClass("header");



		     

		     var _slide = this.element.find('.slide');

		     var _h,_menutop;

		     var _goH=(this.options.h/2)-10;

		     _goH = _goH<106?106:_goH;

		     if(_slide.size()==0){

		        //无焦点图,显示默认图片

		        _h='176px';

		        _menutop='112px';

		        this.element.css({"height":_h,"background-image":"url('/images/header/top.jpg')"});

		     }else{

		        _h=this.options.h+77+'px';

		        _menutop=this.options.h+'px';

		        _slide

		        .css({"height":this.options.h+'px'})

		        .find('.go').css({"top":_goH+'px'})

		        .parents()

		        .find('.slidelist').css({"height":this.options.h+'px'})

		        .find('li').css({"height":this.options.h+'px'})

		        .find('img').css({"height":this.options.h+'px'});

		     }

		     //定义当前容器高度和导航菜top偏离值

		     this.element

		     .css({"height":_h})

		     .find('.sitemenu').css({"top":_menutop});

        },

        //部件的事件绑定

		ListenEvent:function(){

		   var _that=this;

		    //左边按钮点击事件绑定

		    this.element.find(".slide .igoleft").click(function(){

		        _that.select('prev');

	        });

        	//右边按钮点击事件绑定

	        this.element.find(".slide .igoright").click(function(){

		        _that.select('next');

	        });

	        //鼠标悬浮与离开事件绑定

	        if(this.options.auto){

	            this.element.find(".slide").bind({

                    "mouseover": function () {

                            _that.stop();

                     },

                     "mouseleave": function () {

                           _that.start();

                     }

                });

            };	

		},

		start:function(){

            var _that=this;

            if(typeof(_play)!="undefined"){_that.stop()}

            _play = setInterval(function() {_that.select(_that.options.go)},this.options.t*1000);

        },

        stop:function(){

            clearInterval(_play);

        },

		select:function(t){

		    switch(t){

		        case "prev":

		            if(_a==0){

			            _a=_imgslideli.size();

			            _imgslide.css({left:-(_imgslideli.width())*_imgslideli.size()})

		            };

		            _imgslide.animate({left: "+="+(_imgslideli.width())}, 1000);//显示上一张：从左向右滑行容器的宽度距离

		            _a--;

		            break;

		        default://默认显示下一张 options.go:next 

		             //当前显示到最后一张时,初始化计数器和偏离的状态值,因为在原始列表后额外附加了第一张图以便无缝衔接

		             if(_a==_imgslideli.size()){_a=0;_imgslide.css({left:0});}

	                 _imgslide.animate({left: "-="+(_imgslideli.width())}, 1000);//显示下一张：从右向左滑行容器的宽度距离

	                 _a++;

		             break;

		    };

		}

    })

  

   

  

})(jQuery);

去圣西罗-为尤文喝彩 2012-08-31

打赏
举报

jquery slider album自己搜索吧，一大堆。挑你需要的。

图片轮换效果。

相关推荐