[jQuery] Trình diễn Hot Topic dạng Slide

[Mr.FR]

First topic message reminder :

Code này sử dụng jQuery nhằm làm một slide chạy ảnh để cập nhật những "hot topic" của bạn..

dán vào CSS:

Code:

.lof-slidecontent{
   position:relative;
   overflow:hidden;
   border:#F4F4F4 solid 1px;
   width:892px;
   height:300px;
}
.lof-slidecontent .preload{
   height:100%;
   width:100%;
   background:#FFF;
   position:absolute;
   top:0;
   left:0;
   z-index: 999;
   color:#FFF;
   text-align:center
}
.lof-slidecontent .preload div{
   height:100%;
   width:100%;
   background:transparent url(http://landofcoder.com/demo/jquery/lofslidernews/images/load-indicator.gif) no-repeat scroll 50% 50%;
}
.lof-main-outer{
   position:relative;
   height:100%;
   width:600px;
   z-index:3px;
   overflow:hidden;
}


/*******************************************************/
.lof-main-item-desc{
   z-index:100px;
   position:absolute;
   top:180px;
   left:50px;
   width:500px;
   background:url(http://landofcoder.com/demo/jquery/lofslidernews/images/transparent_bg.png);

   /* filter:0.7(opacity:60) */
}
.lof-main-item-desc p{
   color:#FFF;
   margin:0 8px;
   padding:8px 0
}
.lof-main-item-desc h3 a{
   color:#f6f7ac;   
   margin:0;
   font-size:140%;
   padding:20px 8px 0px;
   font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
text-decoration: none;
}
.lof-main-item-desc h3 a:hover{
   color:#FF6;
   text-decoration: none;
}


/* main flash */
ul.lof-main-wapper{
   /* margin-right:auto; */
   overflow:hidden;
   background:transparent url(http://landofcoder.com/demo/jquery/lofslidernews/images/load-indicator.gif) no-repeat scroll 50% 50%;
   padding:0px;
   margin:0;
   height:300px;
   width:600px;
   position:absolute;
   overflow:hidden;
}

ul.lof-main-wapper li{
   overflow:hidden;
   padding:0px;
   margin:0px;
   height:100%;
   width:600px;
   float:left;
}
.lof-opacity  li{
   position:absolute;
   top:0;
   left:0;
   float:inherit;
}
ul.lof-main-wapper li img{
   padding:0px;   
   width:600px;
}

li-desc{
   z-index:100px;
   position:absolute;
   top:150px;
   left:50px;
   width:400px;
   background:url(http://landofcoder.com/demo/jquery/lofslidernews/images/transparent_bg.png);

   /* filter:0.7(opacity:60) */
}
li-desc p{
   color:#FFF;
   margin:0 8px;
   padding:8px 0
}

li-desc h3 a{
   color:#FFF;   
   margin:0;
   font-size:140%;
   padding:20px 8px 2px;
   font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
}
li-desc h3 a:hover{
   color:#FF6;
   text-decoration:underline;
}

/* item navigator */
ul.lof-navigator{
   top:0;
   padding:0;
   margin:0;
   position:absolute;
   width:100%;
}
ul.lof-navigator li{
   cursor:hand;
   cursor:pointer;
   list-style:none;
   width:100%;
   padding:0;
   margin:0;
   overflow:hidden;
}
.lof-navigator-outer{
   position:absolute;
   right:0;
   top:00px;
   z-index: 999;
   height:300px;
   width:310px;
   overflow:hidden;
   color:#FFF
}
.lof-navigator li.active{
   background:url(http://landofcoder.com/demo/jquery/lofslidernews/images/arrow-bg.png) no-repeat scroll left center;
   color:#FFF
}
.lof-navigator li:hover{
   
}


.lof-navigator li h3{
   color:#FFF;
   font-size:100%;
   padding:15px 0 0 !important;
   margin:0;

}
.lof-navigator li div{
   background:url(http://landofcoder.com/demo/jquery/lofslidernews/images/transparent_bg.png);
   color:#FFF;
   height:100%;
   position:relative;
   margin-left:15px;
   padding-left:15px;
   border-top:1px solid #E1E1E1;
}

.lof-navigator li.active div{
   background:url(http://landofcoder.com/demo/jquery/lofslidernews/images/grad-bg.gif);
   color:#FFF;
}
.lof-navigator li img{
   height:60px;
   width:60px;
   margin:15px 15px 10px 0px;
   float:left;
   padding:3px;
   border:#C5C5C5 solid 1px;
}
.lof-navigator li.active img{
   border:##6C8E5C  solid 1px;
}
.lof-navigator li.active h3{
   color:#FFF;
}


Còn code này thì cho vào đâu tùy ý (nơi muốn hiển thị slide), miễn là cho phép HTML

Code:

<script src="http://landofcoder.com/demo/jquery/lofslidernews/js/jquery.easing.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="http://landofcoder.com/demo/jquery/lofslidernews/js/script.js"></script>

<script type="text/javascript">
 $(document).ready( function(){   
      $('#lofslidecontent45').lofJSidernews( { interval:4000,
                                     easing:'easeInOutQuad',
                                    duration:1200,
                                    auto:true } );                  
   });
 
</script>
<style>

#container { width:900px; margin:0px auto 0px; background:#FFFFFF; padding:10px; font-size:12px; margin-top:10px; }

a{
   text-transform:none;
   color:#333
}
#footer{
   background:#F0F0F0;
   padding:10px;
   border:#999 dotted 1px;
}

   
   ul.lof-main-wapper li {
      position:relative;   
   }
</style>

<div id="container">

<div id="lofslidecontent45" class="lof-slidecontent">
<div class="preload"><div></div></div>

  <div class="lof-main-outer">
     <ul class="lof-main-wapper">
 
<li>
 
           <img src="http://i69.servimg.com/u/f69/12/89/57/83/dap-ch10.jpg" title="" height="300" width="600">            <div class="lof-main-item-desc">
                <h3><a target="_parent" title="" href="http://www.a2bmt.com/t1154-topic">A2 tại đập Chu Cấp</a></h3>
                <p>Một ngày trước 20/11, dân thành phố về thăm Hòa Thắng vùng ven =]] </p>
            </div>
        </li>
       
     
      </ul>     
  </div>

 
 
  <div class="lof-navigator-outer">
        <ul class="lof-navigator">


 <li>
                <div>
                   
                    <h3> A2 tại đập Chu Cấp</h3>
                    <span>19.11.2009</span> - Hòa Thắng, Đắc Lắc
                </div>
            </li>


        </ul>
  </div>
 </div>


 
</div>



Để thêm ảnh và link, các bạn cứ thêm thẻ

Code:

<li>... </li>

(xem ở đoạn code trên)

Demo: http://www.a2bmt.com/forum

[Sấm]

Kiểu này đơn giản. Trình diễn nhanh.


Nhớ up lại file js này:

Code:

http://www.coo.vn/out/users/9xstudiobiz/flashobj.js

Không thì

DM:

Code:




<SCRIPT src="http://www.coo.vn/out/users/9xstudiobiz/flashobj.js" type=text/javascript></SCRIPT>





<div class="focusFlash" align="left">

<div id="sasFlashFocus27">

<script> var sohuFlash2 = new sohuFlash("http://www.coo.vn/out/users/9xstudiobiz/tinmoi.swf", "27", 522, 245, "7");

sohuFlash2.addParam("quality", "high"); sohuFlash2.addParam("wmode", "opaque");



sohuFlash2.addVariable("image","1.jpg|2.jpg|3.jpg|4.jpg|");



sohuFlash2.addVariable("url","http://hnsv.com/|http://hnsv.com/|http://hnsv.com/|http://hnsv.com/|#");



sohuFlash2.addVariable("info", "HNSV.COM|HNSV.COM|HNSV.COM|HNSV.COM|"); sohuFlash2.addVariable("stopTime","5000"); sohuFlash2.write("sasFlashFocus27"); </script> </div></div>






Cái kia bị lỗi. dùng cái này xem sao nhé

[kutactn]

đẹp quá... nhưng bạn có thể hướng dẫn cách up file js kia ko... mình mới vào nghề nên ko byt...

[phucpho12a]

thank

[Sấm]

Thôi! cứ dùng cái js đó đi. hihi. hông biết thì thôi. cứ dùng.

[super_cv]

bõ vào html cũng không được index_body cũng ko xong ko ra cái gì cả bạn ak cụ thể hơn được ko, trình độ còn non kém lắm

[Sấm]

Bạn làm lại theo hướng dẫn nhé.

[nhocbuon211]

Chèn ở chỗ nào được chết liền á. Bạn cho biết chèn ở đâu vậy?

[kutactn]

Chèn ở chỗ nào được chết liền á. Bạn cho biết chèn ở đâu vậy?

thay code ở trên rồi cho code trên vào html! Sau đó cho link html vừa tạo vào thẻ duới

Code:

<iframe src="link html" height="50" width="100%" frameborder="0"></iframe>

chỉnh height="50" width="100%" sao cho vừa với 4rum bạn ^^! rồi vứt đâu thì vứt...4rum mình cho vô over_heeder

[bluehnvn]

test thử thấy hơi nặng chút xíu

[tvb_tvb]

làm không được. chỉ e đy .. júp e với

[tvb_tvb]

sao dán vào css rồi mà không thấy zì trên 4rum hết .... cũng zị àk..........

[tvb_tvb]

html ở đâu zị tìm hoài không thấy

[Mr.FR]

các bạn làm đúng theo các bước trên thì sẽ hiển thị !! đoạn HTML nên dán vào index_body !

[kutactn]

cho code vào html ko thấy chạy nên mình cho thử vào header chạy liền

[Sponsored content]