테스트 사이트 - 개발 중인 베타 버전입니다

슬라이드 새로고침시 모든 이미지 잠깐 보였다 사라지는 증상.. 해결가능할까요 채택완료

myfree 9년 전 조회 8,609

오픈소스를 사용하던중에, 새로고침을 하면 해당 슬라이드의 모든 이미지가 전부 보여졌다가

사라지는 증상이 있어 이게 제가 뭔가를 잘못만졌나 싶었는데 도저히 모르겠더라구요..

 

 

 

 

</p><p><span style="font-size: 14.6667px;">  <!-- 롤링 배너 --></span></p><p><span style="font-size: 14.6667px;">  <div id="webwileaf" class="webwidget_slideshow_dot"></span></p><p><span style="font-size: 14.6667px;">  <!--@js(/js/webwidget_slideshow_dot.js)--> </span></p><p><span style="font-size: 14.6667px;">  <!--@js(/js/webwid.js)-->  </span></p><p><span style="font-size: 14.6667px;">  <!--@css(/css/webwidget_slideshow_dot.css)-->     </span></p><p><span style="font-size: 14.6667px;">            <ul></span></p><p><span style="font-size: 14.6667px;">                <li><a href="link1" title="Name"><img src="/img/ha1.jpg" width="100" height="180"/></a></li></span></p><p><span style="font-size: 14.6667px;">                <li><a href="link2" title="Name"><img src="/img/ha2.jpg" width="100" height="180"/></a></li></span></p><p><span style="font-size: 14.6667px;">                <li><a href="link3" title="Name"><img src="/img/ha3.jpg" width="100" height="180"/></a></li></span></p><p><span style="font-size: 14.6667px;">          </ul></span></p><p><span style="font-size: 14.6667px;">            <div style="clear: both"></div></span></p><p><span style="font-size: 14.6667px;">    </div></span></p><p><span style="font-size: 14.6667px;">        </span></p><p><span style="font-size: 14.6667px;"></div>    </span></p><p><span style="font-size: 14.6667px;">    </span></p><p><span style="font-size: 14.6667px;"> </span></p><p><span style="font-size: 14.6667px;"><style></span></p><p><span style="font-size: 14.6667px;">.webwidget_slideshow_dot{ padding: 0px; margin: 0px; margin-top:5px; width:100px;height:180px; position: relative; font-family: Arial,Sans-Serif; font-size: 13px; float:right;}</span></p><p><span style="font-size: 14.6667px;">.webwidget_slideshow_dot a{ text-decoration: none;<span class="Apple-tab-span" style="white-space:pre">	</span>display:none;}</span></p><p><span style="font-size: 14.6667px;">.webwidget_slideshow_dot a:hover{ text-decoration: underline;}</span></p><p><span style="font-size: 14.6667px;">.webwidget_slideshow_dot .slides_box{ padding: 0px; margin: 0px;  overflow: hidden; position: absolute;}</span></p><p><span style="font-size: 14.6667px;">.webwidget_slideshow_dot .title_thumb_box{ width: 100%; position: absolute; bottom: 0px;}</span></p><p><span style="font-size: 14.6667px;">.webwidget_slideshow_dot .title_thumb_box .title_box{ padding: 5px;}</span></p><p><span style="font-size: 14.6667px;">.webwidget_slideshow_dot .title_thumb_box .thumb_box{ text-align: center; height: 25px;}</span></p><p><span style="font-size: 14.6667px;">.webwidget_slideshow_dot .title_thumb_box .thumb_box span{ margin-right: 5px;  margin-left: 5px;}</span></p><p><span style="font-size: 14.6667px;">.webwidget_slideshow_dot .title_thumb_box .thumb_box span img{ cursor: pointer; }</span></p><p><span style="font-size: 14.6667px;">.webwidget_slideshow_dot img{ padding: 0px; margin: 0px; border: none;overflow:hidden;}</span></p><p><span style="font-size: 14.6667px;">.webwidget_slideshow_dot ul{ padding: 0px; margin: 0px; position: absolute; list-style: none;}</span></p><p><span style="font-size: 14.6667px;">.webwidget_slideshow_dot ul li{ padding: 0px; margin: 0px; float: left;}</span></p><p> </p><p><span style="font-size: 14.6667px;">.webwidget_slideshow_dot ul li a{ display: block; }</span></p><div>
</div><p><span style="font-size: 14.6667px;"></style></span> </p><p><span style="font-size: 14.6667px;"> </span></p><p><span style="font-size: 14.6667px;"> </span></p><p><span style="font-size: 14.6667px;">    $(function() {</span></p><p><span style="font-size: 14.6667px;">                $("#webwileaf").webwidget_slideshow_dot({</span></p><p><span style="font-size: 14.6667px;">                    slideshow_time_interval: '2000',</span></p><p><span style="font-size: 14.6667px;">                    slideshow_window_width: '100',</span></p><p><span style="font-size: 14.6667px;">                    slideshow_window_height: '180',</span></p><p><span style="font-size: 14.6667px;">                    slideshow_title_color: '#ff3366',</span></p><p><span style="font-size: 14.6667px;">                    directory: 'img/'</span></p><p><span style="font-size: 14.6667px;">                });</span></p><p> </p><p><span style="font-size: 14.6667px;">            });</span></p><p><span style="font-size: 14.6667px;"> </span></p><p><span style="font-size: 14.6667px;">(function(a){</span></p><p><span style="font-size: 14.6667px;">    a.fn.webwidget_slideshow_dot=function(p){</span></p><p><span style="font-size: 14.6667px;">        var p=p||{};</span></p><p><span style="font-size: 14.6667px;"> </span></p><p><span style="font-size: 14.6667px;">        var m=p&&p.slideshow_time_interval?p.slideshow_time_interval:"2000";</span></p><p><span style="font-size: 14.6667px;">        var q=p&&p.slideshow_window_width?p.slideshow_window_width:"100";</span></p><p><span style="font-size: 14.6667px;">        var r=p&&p.slideshow_window_height?p.slideshow_window_height:"400";</span></p><p><span style="font-size: 14.6667px;">        var sf=p&&p.soldeshow_foreColor?p.soldeshow_foreColor:"transparent";</span></p><p><span style="font-size: 14.6667px;">        var stc=p&&p.slideshow_title_color?p.slideshow_title_color:"#17CCCC";</span></p><p><span style="font-size: 14.6667px;">        var d=p&&p.directory?p.directory:"img/";</span></p><p><span style="font-size: 14.6667px;">        q += "px";</span></p><p><span style="font-size: 14.6667px;">        r += "px";</span></p><p><span style="font-size: 14.6667px;">        var v;</span></p><p><span style="font-size: 14.6667px;">        var w=-1;</span></p><p><span style="font-size: 14.6667px;">        var x=a(this);</span></p><p><span style="font-size: 14.6667px;">        var y=x.find("ul:first").children("li").length;</span></p><p><span style="font-size: 14.6667px;">        if(x.find("ul").length==0||x.find("li").length==0){</span></p><p><span style="font-size: 14.6667px;">            x.append("Require content");</span></p><p><span style="font-size: 14.6667px;">            return null</span></p><p><span style="font-size: 14.6667px;">        }</span></p><p><span style="font-size: 14.6667px;">        init();</span></p><p><span style="font-size: 14.6667px;">        play();</span></p><p><span style="font-size: 14.6667px;">        function init(){</span></p><p><span style="font-size: 14.6667px;">            x.find("ul:first").wrap('<div class="slides_box"></div>');</span></p><p><span style="font-size: 14.6667px;">            x.css("width",q).css("height",r);</span></p><p><span style="font-size: 14.6667px;">            x.find(".slides_box").css("width",q).css("height",r);</span></p><p><span style="font-size: 14.6667px;">            x.find("ul:first").width(parseInt(q)*y);</span></p><p><span style="font-size: 14.6667px;">            x.find("ul:first").children("li").css("width",q).css("height",r);</span></p><p><span style="font-size: 14.6667px;">            x.find("ul:first").children("li").children("a").children("img").css("width",q).css("height",r);</span></p><p><span style="font-size: 14.6667px;">            x.find(".slides_box").after('<div class="title_thumb_box"></div>');</span></p><p><span style="font-size: 14.6667px;">            x.find(".title_thumb_box").append('<div class="title_box"></div>');</span></p><p><span style="font-size: 14.6667px;">            x.find(".title_thumb_box").append('<div class="thumb_box"></div>');</span></p><p><span style="font-size: 14.6667px;">            x.find(".thumb_box").append('<span><img src="'+d+'/carousel_back_normal.png" alt="previous"  class="thumb_p"/></span>');</span></p><p><span style="font-size: 14.6667px;">            x.find(".title_thumb_box").css("background-color",sf);</span></p><p><span style="font-size: 14.6667px;">            for (i = 0; i <= y-1; i++)</span></p><p><span style="font-size: 14.6667px;">            {</span></p><p><span style="font-size: 14.6667px;">                x.find(".thumb_box").append('<span><img src="'+d+'carousel_circle_normal.png" class="thumb_num" alt="'+i+'" /></span>');</span></p><p> </p><p><span style="font-size: 14.6667px;">            }</span></p><p><span style="font-size: 14.6667px;">}</span></p><p><span style="font-size: 14.6667px;"> </span></p><p><span style="font-size: 14.6667px;"> </span></p><p><span style="font-size: 14.6667px;"> </span></p><p style="font-size: 14.6667px;">

 

 

 

<정상 슬라이드 이미지>


 

 

<새로고침하거나 사이트 재접속하면 1~2초간 나왔다 사라지는 뒷 이미지>


 

 

 

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
그림자밟기

테스트를 하면서 진행해야 하는데, 아마도 스타일 문제로 보입니다.

스타일 소스를 배너상단으로 올려서 우선 테스트 해보시면 될 듯 합니다.

또는 <a href=~~~~ style="display:none;"> 이런식으로 인라인으로 스타일 추가해서 테스트 바랍니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

4년 전

혹시 해결하셨나요?

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인