<style type="text/css">
.container1 {
width: 660px;padding: 0;margin: 0 auto;
}
.folio_block {
position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
.main_view {float: left;position: relative;}
/*--Window/Masking Styles--*/
.window {-moz-box-shadow: 0px 0px 5px #303030;
-webkit-box-shadow: 0px 0px 5px #303030;
box-shadow: 0px 0px 5px #303030;border:1px solid #000000;height:240px; width: 660px;
margin-top:15px;overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;top: 0; left: 0;
}
.image_reel img {float: left;}
.paging_btrix {
position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100; /*--Assures the paging stays on the top layer--*/text-align: center;
line-height: 40px;
background: url(http://1.bp.blogspot.com/-UQAJVYvatlY/UTbGMUctYcI/AAAAAAAAHIE/PSM-s1tbAd8/s1600/paging_btrix_bg2.png) no-repeat;
display: none;
}
.paging_btrix a {
padding: 5px;text-decoration: none;color: #fff;
}
.paging_btrix a.active {
font-weight: bold; background: #920000; border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging_btrix a:hover {font-weight: bold;}
</style>
<!-- Huong dan thu thuat http://itviet360.com -->
<div class="container1">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="http://cutiseo.blogspot.com"><img src="http://3.bp.blogspot.com/-sZ_datgpxTE/UUZtgveicbI/AAAAAAAACdE/IYLX9qd0tvI/s1600/anh-bia-fb-tinh-yeu-10.jpg" alt="anh bia facebook tinh yeu dep buon" width='660' /></a>
<a href="http://cutiseo.blogspot.com"><img src="http://3.bp.blogspot.com/-_kCy_1GpJxk/UUZtgorGoTI/AAAAAAAACdI/VRrCfJNa4dI/s1600/anh-bia-fb-tinh-yeu-11.jpg" width='660' alt="anh bia facebook tinh yeu dep buon" width='660' /></a>
<a href="http://cutiseo.blogspot.com"><img src="http://1.bp.blogspot.com/-4I9BC6cOxV4/UUZzFHrdsvI/AAAAAAAACe8/UydwOnpn0gM/s1600/anh-bia-tinh-yeu-dep-3.jpg" alt="anh bia facebook tinh yeu dep buon" width='660' /></a>
<a href="http://cutiseo.blogspot.com"><img src="http://4.bp.blogspot.com/-FrlydLUmAVg/UUZtgp2wskI/AAAAAAAACdM/Q0-f3SIaanM/s1600/anh-bia-fb-tinh-yeu-1.jpg" alt="anh bia facebook tinh yeu dep buon" width='660' /></a>
</div>
</div>
<div class="paging_btrix">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript"> $(document).ready(function() { //Set Default State of each portfolio piece
$(".paging_btrix").show();
$(".paging_btrix a:first").addClass("active"); //Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum; //Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth}); //paging_btrix + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging_btrix a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) //Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 ); }; //Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging_btrix a.active').next();
if ( $active.length === 0) { //If paging_btrix reaches the end...
$active = $('.paging_btrix a:first'); //go back to first
}
rotate(); //Trigger the paging_btrix and slider function
}, 5000); //Timer speed in milliseconds (3 seconds)
}; rotateSwitch(); //Run function on launch //On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
}); //On Click
$(".paging_btrix a").click(function() {
$active = $(this); //Activate the clicked paging_btrix
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
}); });
</script>
- Kiểu 2 :
width: 660px;padding: 0;margin: 0 auto;
}
.folio_block {
position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
.main_view {float: left;position: relative;}
/*--Window/Masking Styles--*/
.window {-moz-box-shadow: 0px 0px 5px #303030;
-webkit-box-shadow: 0px 0px 5px #303030;
box-shadow: 0px 0px 5px #303030;border:1px solid #000000;height:240px; width: 660px;
margin-top:15px;overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;top: 0; left: 0;
}
.image_reel img {float: left;}
.paging_btrix {
position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100; /*--Assures the paging stays on the top layer--*/text-align: center;
line-height: 40px;
background: url(http://1.bp.blogspot.com/-UQAJVYvatlY/UTbGMUctYcI/AAAAAAAAHIE/PSM-s1tbAd8/s1600/paging_btrix_bg2.png) no-repeat;
display: none;
}
.paging_btrix a {
padding: 5px;text-decoration: none;color: #fff;
}
.paging_btrix a.active {
font-weight: bold; background: #920000; border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging_btrix a:hover {font-weight: bold;}
</style>
<!-- Huong dan thu thuat http://itviet360.com -->
<div class="container1">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="http://cutiseo.blogspot.com"><img src="http://3.bp.blogspot.com/-sZ_datgpxTE/UUZtgveicbI/AAAAAAAACdE/IYLX9qd0tvI/s1600/anh-bia-fb-tinh-yeu-10.jpg" alt="anh bia facebook tinh yeu dep buon" width='660' /></a>
<a href="http://cutiseo.blogspot.com"><img src="http://3.bp.blogspot.com/-_kCy_1GpJxk/UUZtgorGoTI/AAAAAAAACdI/VRrCfJNa4dI/s1600/anh-bia-fb-tinh-yeu-11.jpg" width='660' alt="anh bia facebook tinh yeu dep buon" width='660' /></a>
<a href="http://cutiseo.blogspot.com"><img src="http://1.bp.blogspot.com/-4I9BC6cOxV4/UUZzFHrdsvI/AAAAAAAACe8/UydwOnpn0gM/s1600/anh-bia-tinh-yeu-dep-3.jpg" alt="anh bia facebook tinh yeu dep buon" width='660' /></a>
<a href="http://cutiseo.blogspot.com"><img src="http://4.bp.blogspot.com/-FrlydLUmAVg/UUZtgp2wskI/AAAAAAAACdM/Q0-f3SIaanM/s1600/anh-bia-fb-tinh-yeu-1.jpg" alt="anh bia facebook tinh yeu dep buon" width='660' /></a>
</div>
</div>
<div class="paging_btrix">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript"> $(document).ready(function() { //Set Default State of each portfolio piece
$(".paging_btrix").show();
$(".paging_btrix a:first").addClass("active"); //Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum; //Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth}); //paging_btrix + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging_btrix a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) //Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 ); }; //Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging_btrix a.active').next();
if ( $active.length === 0) { //If paging_btrix reaches the end...
$active = $('.paging_btrix a:first'); //go back to first
}
rotate(); //Trigger the paging_btrix and slider function
}, 5000); //Timer speed in milliseconds (3 seconds)
}; rotateSwitch(); //Run function on launch //On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
}); //On Click
$(".paging_btrix a").click(function() {
$active = $(this); //Activate the clicked paging_btrix
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
}); });
</script>
<style type="text/css" media="screen">
.container {
margin: 0 auto;
overflow: hidden;
width: 700px;
}
#content-slider {
height: 335px;
width: 100%;
}
#slider {
background: none repeat scroll 0 0 #000000;
border: 5px solid #FFFFFF;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
height: 320px;
margin: 10px auto;
overflow: visible;
position: relative;
width: 680px;
}
#mask {
height: 320px;
overflow: hidden;
}
#slider ul {
margin:0;
padding:0;
position:relative;
}
#slider li {
width:680px;
height:320px;
position:absolute;
top:-325px;
list-style:none;
}
#slider li.firstanimation {
-moz-animation:cycle 25s linear infinite;
-webkit-animation:cycle 25s linear infinite;
}
#slider li.secondanimation {
-moz-animation:cycletwo 25s linear infinite;
-webkit-animation:cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
-moz-animation:cyclethree 25s linear infinite;
-webkit-animation:cyclethree 25s linear infinite;
}
#slider li.fourthanimation {
-moz-animation:cyclefour 25s linear infinite;
-webkit-animation:cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
-moz-animation:cyclefive 25s linear infinite;
-webkit-animation:cyclefive 25s linear infinite;
}
#slider .tooltip {
background:rgba(0,0,0,0.7);
width:300px;
height:60px;
position:relative;
bottom:75px;
left:-320px;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
#slider .tooltip h1 {
color:#fff;
font-size:24px;
font-weight:300;
line-height:60px;
padding:0 0 0 20px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
left:0px;
}
/* PROGRESS BAR */
.progress-bar {
position:relative;
top:-5px;
width:680px;
height:5px;
background:#000;
-moz-animation:fullexpand 25s ease-out infinite;
-webkit-animation:fullexpand 25s ease-out infinite;
}
/* ANIMATION */
@-moz-keyframes cycle {
0% { top:0px; }
4% { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }
}
@-moz-keyframes cycletwo {
0% { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
0% { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; }
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
0% { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
0% { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}
@-webkit-keyframes cycle {
0% { top:0px; }
4% { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
50% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }
}
@-webkit-keyframes cycletwo {
0% { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
0% { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; z-index:0; }
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
0% { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
0% { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}
/* ANIMATION BAR */
@-moz-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
@-webkit-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
</style>
<div class="container">
<div id="content-slider">
<div id="slider">
<div id="mask">
<ul>
<li id="first" class="firstanimation">
<a href="http://www.càiwin8.vn/">
<img src="http://1.bp.blogspot.com/-BCJAUp2xHls/Uo4qRYhpKnI/AAAAAAAAAnc/ezIRkAL2aZ0/s1600/img_1.jpg" alt="Cougar"/>
</a>
<div class="tooltip">
<h1>Cougar</h1>
</div>
</li>
<li id="second" class="secondanimation">
<a href="#">
<img src="http://1.bp.blogspot.com/-imPWlB-2Otc/Uo4qRf_8isI/AAAAAAAAAng/zGC5RHO0N-w/s1600/img_2.jpg" alt="Lions"/>
</a>
<div class="tooltip">
<h1>Lions</h1>
</div>
</li>
<li id="third" class="thirdanimation">
<a href="#">
<img src="http://2.bp.blogspot.com/-BTzaRtCWV9k/Uo4qRwMrITI/AAAAAAAAAnk/FCoZAFWTO4c/s1600/img_3.jpg" alt="Snowalker"/>
</a>
<div class="tooltip">
<h1>Snowalker</h1>
</div>
</li>
<li id="fourth" class="fourthanimation">
<a href="#">
<img src="http://4.bp.blogspot.com/-pKeoqRHqTvA/Uo4qSiMpcPI/AAAAAAAAAn0/VATcRVV2rDo/s1600/img_4.jpg" alt="Howling"/>
</a>
<div class="tooltip">
<h1>Howling</h1>
</div>
</li>
<li id="fifth" class="fifthanimation">
<a href="#">
<img src="http://2.bp.blogspot.com/-yPhDHu8-JRA/Uo4qTJmMo8I/AAAAAAAAAn8/Rfd4qFiROVg/s1600/img_5.jpg" alt="Sunbathing"/>
</a>
<div class="tooltip">
<h1>Sunbathing</h1>
</div>
</li>
</ul>
</div>
<div class="progress-bar"></div>
</div>
</div>
- Kiểu 3 :
.container {
margin: 0 auto;
overflow: hidden;
width: 700px;
}
#content-slider {
height: 335px;
width: 100%;
}
#slider {
background: none repeat scroll 0 0 #000000;
border: 5px solid #FFFFFF;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
height: 320px;
margin: 10px auto;
overflow: visible;
position: relative;
width: 680px;
}
#mask {
height: 320px;
overflow: hidden;
}
#slider ul {
margin:0;
padding:0;
position:relative;
}
#slider li {
width:680px;
height:320px;
position:absolute;
top:-325px;
list-style:none;
}
#slider li.firstanimation {
-moz-animation:cycle 25s linear infinite;
-webkit-animation:cycle 25s linear infinite;
}
#slider li.secondanimation {
-moz-animation:cycletwo 25s linear infinite;
-webkit-animation:cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
-moz-animation:cyclethree 25s linear infinite;
-webkit-animation:cyclethree 25s linear infinite;
}
#slider li.fourthanimation {
-moz-animation:cyclefour 25s linear infinite;
-webkit-animation:cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
-moz-animation:cyclefive 25s linear infinite;
-webkit-animation:cyclefive 25s linear infinite;
}
#slider .tooltip {
background:rgba(0,0,0,0.7);
width:300px;
height:60px;
position:relative;
bottom:75px;
left:-320px;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
#slider .tooltip h1 {
color:#fff;
font-size:24px;
font-weight:300;
line-height:60px;
padding:0 0 0 20px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
left:0px;
}
/* PROGRESS BAR */
.progress-bar {
position:relative;
top:-5px;
width:680px;
height:5px;
background:#000;
-moz-animation:fullexpand 25s ease-out infinite;
-webkit-animation:fullexpand 25s ease-out infinite;
}
/* ANIMATION */
@-moz-keyframes cycle {
0% { top:0px; }
4% { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }
}
@-moz-keyframes cycletwo {
0% { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
0% { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; }
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
0% { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
0% { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}
@-webkit-keyframes cycle {
0% { top:0px; }
4% { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
50% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }
}
@-webkit-keyframes cycletwo {
0% { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
0% { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; z-index:0; }
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
0% { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
0% { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}
/* ANIMATION BAR */
@-moz-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
@-webkit-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
</style>
<div class="container">
<div id="content-slider">
<div id="slider">
<div id="mask">
<ul>
<li id="first" class="firstanimation">
<a href="http://www.càiwin8.vn/">
<img src="http://1.bp.blogspot.com/-BCJAUp2xHls/Uo4qRYhpKnI/AAAAAAAAAnc/ezIRkAL2aZ0/s1600/img_1.jpg" alt="Cougar"/>
</a>
<div class="tooltip">
<h1>Cougar</h1>
</div>
</li>
<li id="second" class="secondanimation">
<a href="#">
<img src="http://1.bp.blogspot.com/-imPWlB-2Otc/Uo4qRf_8isI/AAAAAAAAAng/zGC5RHO0N-w/s1600/img_2.jpg" alt="Lions"/>
</a>
<div class="tooltip">
<h1>Lions</h1>
</div>
</li>
<li id="third" class="thirdanimation">
<a href="#">
<img src="http://2.bp.blogspot.com/-BTzaRtCWV9k/Uo4qRwMrITI/AAAAAAAAAnk/FCoZAFWTO4c/s1600/img_3.jpg" alt="Snowalker"/>
</a>
<div class="tooltip">
<h1>Snowalker</h1>
</div>
</li>
<li id="fourth" class="fourthanimation">
<a href="#">
<img src="http://4.bp.blogspot.com/-pKeoqRHqTvA/Uo4qSiMpcPI/AAAAAAAAAn0/VATcRVV2rDo/s1600/img_4.jpg" alt="Howling"/>
</a>
<div class="tooltip">
<h1>Howling</h1>
</div>
</li>
<li id="fifth" class="fifthanimation">
<a href="#">
<img src="http://2.bp.blogspot.com/-yPhDHu8-JRA/Uo4qTJmMo8I/AAAAAAAAAn8/Rfd4qFiROVg/s1600/img_5.jpg" alt="Sunbathing"/>
</a>
<div class="tooltip">
<h1>Sunbathing</h1>
</div>
</li>
</ul>
</div>
<div class="progress-bar"></div>
</div>
</div>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/66348944/thunghiem/carddeckslideshow.css" />
<style>
.stackcontainer{
margin: 10px 0 0px 0;
}
#demo1{
width: 240px;
height: 320px;
margin-left: 210px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/66348944/thunghiem/carddeckslideshow.js">
</script>
<script>
var demo1 = new carddeckslideshow({
id: 'demo1',
autoplay: true,
cycles: 2,
persist: false
})
</script>
<div id="demo1" class="stackcontainer"> <div class="inner">
<img src="http://2.bp.blogspot.com/-fTUCvN86Ui0/Ufym_X_WymI/AAAAAAAAlrg/yVqkqLOzH7E/s1600/0024.gif" />
</div> <div class="inner">
<img src="http://1.bp.blogspot.com/-ztR_wpvEVmM/UfyxPPc4ZSI/AAAAAAAAmBo/PqmNuTmzr6M/s1600/0055.gif" />
</div> <div class="inner">
<img src="http://2.bp.blogspot.com/-7jiMrqNiFBs/UfywO1XDUVI/AAAAAAAAl9k/K8ApREPSoj0/s1600/0013.gif" />
</div> <div class="inner">
<img src="http://4.bp.blogspot.com/-mTbV515tsec/UfywUBNroEI/AAAAAAAAl90/U_3_a3Ih3sA/s1600/0015.gif" />
</div> <div class="inner">
<img src="http://3.bp.blogspot.com/-W5SfSsAZT_E/UfywUaz39kI/AAAAAAAAl94/xsnlnOL9bpk/s1600/0014.gif" />
</div>
<div class="inner">
<img src="http://4.bp.blogspot.com/-SfDGbmDYwbM/Ufywfi0kxtI/AAAAAAAAl-c/bXcWsuiw0Mo/s1600/0019.gif" />
</div> <div class="inner">
<img src="http://2.bp.blogspot.com/-nGFQm5fzR_Y/T2NHLPGtEeI/AAAAAAAASNY/ajAjYxd2swA/s1600/0035.gif" />
</div>
</div> <div style="margin-top:1em; margin-left:250px">
<a href="javascript:demo1.navigate('prev')">Previous Slide</a> / <a href="javascript:demo1.navigate('next')">Next Slide</a> / <a href="javascript: demo1.userpause()">Stop</a>
</div>
- Kiểu 4 :
.stackcontainer{
margin: 10px 0 0px 0;
}
#demo1{
width: 240px;
height: 320px;
margin-left: 210px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/66348944/thunghiem/carddeckslideshow.js">
</script>
<script>
var demo1 = new carddeckslideshow({
id: 'demo1',
autoplay: true,
cycles: 2,
persist: false
})
</script>
<div id="demo1" class="stackcontainer"> <div class="inner">
<img src="http://2.bp.blogspot.com/-fTUCvN86Ui0/Ufym_X_WymI/AAAAAAAAlrg/yVqkqLOzH7E/s1600/0024.gif" />
</div> <div class="inner">
<img src="http://1.bp.blogspot.com/-ztR_wpvEVmM/UfyxPPc4ZSI/AAAAAAAAmBo/PqmNuTmzr6M/s1600/0055.gif" />
</div> <div class="inner">
<img src="http://2.bp.blogspot.com/-7jiMrqNiFBs/UfywO1XDUVI/AAAAAAAAl9k/K8ApREPSoj0/s1600/0013.gif" />
</div> <div class="inner">
<img src="http://4.bp.blogspot.com/-mTbV515tsec/UfywUBNroEI/AAAAAAAAl90/U_3_a3Ih3sA/s1600/0015.gif" />
</div> <div class="inner">
<img src="http://3.bp.blogspot.com/-W5SfSsAZT_E/UfywUaz39kI/AAAAAAAAl94/xsnlnOL9bpk/s1600/0014.gif" />
</div>
<div class="inner">
<img src="http://4.bp.blogspot.com/-SfDGbmDYwbM/Ufywfi0kxtI/AAAAAAAAl-c/bXcWsuiw0Mo/s1600/0019.gif" />
</div> <div class="inner">
<img src="http://2.bp.blogspot.com/-nGFQm5fzR_Y/T2NHLPGtEeI/AAAAAAAASNY/ajAjYxd2swA/s1600/0035.gif" />
</div>
</div> <div style="margin-top:1em; margin-left:250px">
<a href="javascript:demo1.navigate('prev')">Previous Slide</a> / <a href="javascript:demo1.navigate('next')">Next Slide</a> / <a href="javascript: demo1.userpause()">Stop</a>
</div>
<center>
<style>
.textboxstyle {
font-family:Arial;
font-size:16pt;
color:black;
text-align:center;
vertical-align:top;
} .textboxbackgroundstyle {
background-color:white;
padding:5px; /* rounded corners for Firefox */
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px; /* rounded corners for for Safari and Chrome */
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px; /* rounded corners for Opera */
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
} .curveandshadowstyle { /* shadow and rounded corners for Firefox */
-moz-box-shadow: 5px 5px 8px #818181;
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomright: 25px; /* shadow and rounded corners for Safari and Chrome */
-webkit-box-shadow: 5px 5px 8px #818181;
-webkit-border-top-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px; /* shadow and rounded corners for Opera */
box-shadow: 5px 5px 5px #818181;
border-top-left-radius: 25px;
border-bottom-right-radius: 25px; /* shadow for Internet Explorer */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#818181'); border-style:solid;
border-width:1px;
border-color:white;
}
</style> <!----------------------------------------->
<!-- STYLE-CONFIGURATION STOPS HERE -->
<!----------------------------------------->
<script> var imgurl= new Array()
var message= new Array()
var thislink= new Array() /////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
///////////////////////////////////////////////// // Các link ảnh theo thứ tự
imgurl[0]="http://4.bp.blogspot.com/-xFzQXSklfDI/UACqr4De4qI/AAAAAAAAbeY/xaZtDxhXFb8/s1600/0003.gif"
imgurl[1]="http://4.bp.blogspot.com/-8eBnsC132Qw/UACquWudCWI/AAAAAAAAbeg/8lW4CCz-9SM/s1600/0008.gif"
imgurl[2]="http://4.bp.blogspot.com/-JUgy7eqGhwE/UACqv55Rq_I/AAAAAAAAbek/sf2_AfFs9ME/s1600/0009.gif"
imgurl[3]="http://3.bp.blogspot.com/-y-CMaV56kSE/UACqygwNuXI/AAAAAAAAbew/57TGMBVjEvw/s1600/0019.gif"
imgurl[4]="http://4.bp.blogspot.com/-hG372cyLtFM/UACq1AfiKKI/AAAAAAAAbe4/Q7pKJHmCVNc/s1600/0027.gif"
imgurl[5]="http://2.bp.blogspot.com/-qJX93CeZPCQ/UACq4TX8CUI/AAAAAAAAbfA/IZe2owFTd9k/s1600/0048.gif"
imgurl[6]="http://4.bp.blogspot.com/-mc6gq8ej0F0/UACq5bwkb6I/AAAAAAAAbfI/pdHVViYLzX0/s1600/0050.gif"
imgurl[7]="http://2.bp.blogspot.com/-u5u4x5bDmiE/UACq6uZehuI/AAAAAAAAbfQ/ExH9529Qx4s/s1600/0059.gif"
imgurl[8]="http://1.bp.blogspot.com/-yzcHEQeYTWM/UACq7kRYvSI/AAAAAAAAbfY/ilk3wcHnq4E/s1600/0062.gif"
imgurl[9]="http://2.bp.blogspot.com/-3sYqCwbr2Yo/UACq_zAZ7wI/AAAAAAAAbfg/1tJiqu6stMw/s1600/0069.gif"
// Ghi chú cho ảnh
message[0]="Welcome to my Blog"
message[1]="dunghennessy"
message[2]="Cám ơn các bạn đã ghé tham quan"
message[3]="Chúc các bạn luôn vui khoẻ" // set the links corresponding to the images above (no more no less than the images above)
// Nếu muốn đặt liên kết thì thay dấu # bằng link mình muốn liên kết đến
thislink[0]="#"
thislink[1]="#"
thislink[2]="#"
thislink[3]="#" // Chiều rộng của ảnh (pixel)
var imgwidth=240 // Chiều cao của ảnh (pixel)
var imgheight=320 // set stillstand of picture (seconds)
var stillstand=2.5 // set opacity-strength (transparency-effect). Values may range from 1 to 100
var opacitystrength=60 /////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STOPS HERE
/////////////////////////////////////////////////
// Do not edit below this line
var tmr
var step=10
var i=imgwidth
var i_imgurl=0
stillstand*=1000 var preloadedimages=new Array()
for (iii=0;iii<imgurl.length;iii++){
preloadedimages[iii]=new Image()
preloadedimages[iii].src=imgurl[iii]
} function shrinkpic() {
document.getElementById("textbox").innerHTML=""
if (i>0) {
i-=step
document.getElementById("picdiv").style.width=i+"px"
document.getElementById("picdiv").style.height=i*(imgheight/imgwidth)+"px"
document.getElementById("picdiv").style.left=imgwidth/2-(i/2)+"px"
document.getElementById("picdiv").style.top=(imgwidth/2-(i/2))*(imgheight/imgwidth)+"px"
tmr=setTimeout("shrinkpic()",20)
}
else {
i_imgurl++
if (i_imgurl>=imgurl.length) {
i_imgurl=0
}
document.getElementById("picdiv").style.background="url("+imgurl[i_imgurl]+")"
i=1
tmr=setTimeout("enlargepic()",20)
}
} function enlargepic() {
if (i<=imgwidth) {
i+=step
document.getElementById("picdiv").style.width=i+"px"
document.getElementById("picdiv").style.height=i*(imgheight/imgwidth)+"px"
document.getElementById("picdiv").style.left=imgwidth/2-(i/2)+"px"
document.getElementById("picdiv").style.top=(imgwidth/2-(i/2))*(imgheight/imgwidth)+"px"
tmr=setTimeout("enlargepic()",20)
}
else {
i=imgwidth
showmessage()
}
} function showmessage() {
document.getElementById("textbox").innerHTML='<span class="textboxbackgroundstyle">'+message[i_imgurl]+'</span>'
tmr=setTimeout("shrinkpic()",stillstand)
} function gotothislink(){
document.location.href=thislink[i_imgurl] } document.write('<div id="roof" style="position:relative;width:'+imgwidth+'px;height:'+imgheight+'px;">')
document.write('<div id="picdiv" class="curveandshadowstyle" style="position:absolute;background:url('+imgurl[0]+');width:'+imgwidth+'px;height:'+imgheight+'px;top:0px;left:0px;"></div>') document.write('<div id="tt" onClick="gotothislink()" style="position:absolute;width:'+imgwidth+'px;height:'+imgheight+'px;top:0px;left:0px;filter:alpha(opacity='+opacitystrength+');opacity:'+(opacitystrength/100)+';cursor:pointer;"><table width='+imgwidth+' height='+imgheight+'><tr><td id="textbox" class="textboxstyle"><span class="textboxbackgroundstyle">'+message[0]+'</span></td></tr></table></div>') document.write('</div>') window.onload=shrinkpic
</script></center>
<!-- END OF THE CODE FOR THE CSS-3-SLIDESHOW-->
- Kiểu 5 :
<style>
.textboxstyle {
font-family:Arial;
font-size:16pt;
color:black;
text-align:center;
vertical-align:top;
} .textboxbackgroundstyle {
background-color:white;
padding:5px; /* rounded corners for Firefox */
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px; /* rounded corners for for Safari and Chrome */
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px; /* rounded corners for Opera */
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
} .curveandshadowstyle { /* shadow and rounded corners for Firefox */
-moz-box-shadow: 5px 5px 8px #818181;
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomright: 25px; /* shadow and rounded corners for Safari and Chrome */
-webkit-box-shadow: 5px 5px 8px #818181;
-webkit-border-top-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px; /* shadow and rounded corners for Opera */
box-shadow: 5px 5px 5px #818181;
border-top-left-radius: 25px;
border-bottom-right-radius: 25px; /* shadow for Internet Explorer */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#818181'); border-style:solid;
border-width:1px;
border-color:white;
}
</style> <!----------------------------------------->
<!-- STYLE-CONFIGURATION STOPS HERE -->
<!----------------------------------------->
<script> var imgurl= new Array()
var message= new Array()
var thislink= new Array() /////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
///////////////////////////////////////////////// // Các link ảnh theo thứ tự
imgurl[0]="http://4.bp.blogspot.com/-xFzQXSklfDI/UACqr4De4qI/AAAAAAAAbeY/xaZtDxhXFb8/s1600/0003.gif"
imgurl[1]="http://4.bp.blogspot.com/-8eBnsC132Qw/UACquWudCWI/AAAAAAAAbeg/8lW4CCz-9SM/s1600/0008.gif"
imgurl[2]="http://4.bp.blogspot.com/-JUgy7eqGhwE/UACqv55Rq_I/AAAAAAAAbek/sf2_AfFs9ME/s1600/0009.gif"
imgurl[3]="http://3.bp.blogspot.com/-y-CMaV56kSE/UACqygwNuXI/AAAAAAAAbew/57TGMBVjEvw/s1600/0019.gif"
imgurl[4]="http://4.bp.blogspot.com/-hG372cyLtFM/UACq1AfiKKI/AAAAAAAAbe4/Q7pKJHmCVNc/s1600/0027.gif"
imgurl[5]="http://2.bp.blogspot.com/-qJX93CeZPCQ/UACq4TX8CUI/AAAAAAAAbfA/IZe2owFTd9k/s1600/0048.gif"
imgurl[6]="http://4.bp.blogspot.com/-mc6gq8ej0F0/UACq5bwkb6I/AAAAAAAAbfI/pdHVViYLzX0/s1600/0050.gif"
imgurl[7]="http://2.bp.blogspot.com/-u5u4x5bDmiE/UACq6uZehuI/AAAAAAAAbfQ/ExH9529Qx4s/s1600/0059.gif"
imgurl[8]="http://1.bp.blogspot.com/-yzcHEQeYTWM/UACq7kRYvSI/AAAAAAAAbfY/ilk3wcHnq4E/s1600/0062.gif"
imgurl[9]="http://2.bp.blogspot.com/-3sYqCwbr2Yo/UACq_zAZ7wI/AAAAAAAAbfg/1tJiqu6stMw/s1600/0069.gif"
// Ghi chú cho ảnh
message[0]="Welcome to my Blog"
message[1]="dunghennessy"
message[2]="Cám ơn các bạn đã ghé tham quan"
message[3]="Chúc các bạn luôn vui khoẻ" // set the links corresponding to the images above (no more no less than the images above)
// Nếu muốn đặt liên kết thì thay dấu # bằng link mình muốn liên kết đến
thislink[0]="#"
thislink[1]="#"
thislink[2]="#"
thislink[3]="#" // Chiều rộng của ảnh (pixel)
var imgwidth=240 // Chiều cao của ảnh (pixel)
var imgheight=320 // set stillstand of picture (seconds)
var stillstand=2.5 // set opacity-strength (transparency-effect). Values may range from 1 to 100
var opacitystrength=60 /////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STOPS HERE
/////////////////////////////////////////////////
// Do not edit below this line
var tmr
var step=10
var i=imgwidth
var i_imgurl=0
stillstand*=1000 var preloadedimages=new Array()
for (iii=0;iii<imgurl.length;iii++){
preloadedimages[iii]=new Image()
preloadedimages[iii].src=imgurl[iii]
} function shrinkpic() {
document.getElementById("textbox").innerHTML=""
if (i>0) {
i-=step
document.getElementById("picdiv").style.width=i+"px"
document.getElementById("picdiv").style.height=i*(imgheight/imgwidth)+"px"
document.getElementById("picdiv").style.left=imgwidth/2-(i/2)+"px"
document.getElementById("picdiv").style.top=(imgwidth/2-(i/2))*(imgheight/imgwidth)+"px"
tmr=setTimeout("shrinkpic()",20)
}
else {
i_imgurl++
if (i_imgurl>=imgurl.length) {
i_imgurl=0
}
document.getElementById("picdiv").style.background="url("+imgurl[i_imgurl]+")"
i=1
tmr=setTimeout("enlargepic()",20)
}
} function enlargepic() {
if (i<=imgwidth) {
i+=step
document.getElementById("picdiv").style.width=i+"px"
document.getElementById("picdiv").style.height=i*(imgheight/imgwidth)+"px"
document.getElementById("picdiv").style.left=imgwidth/2-(i/2)+"px"
document.getElementById("picdiv").style.top=(imgwidth/2-(i/2))*(imgheight/imgwidth)+"px"
tmr=setTimeout("enlargepic()",20)
}
else {
i=imgwidth
showmessage()
}
} function showmessage() {
document.getElementById("textbox").innerHTML='<span class="textboxbackgroundstyle">'+message[i_imgurl]+'</span>'
tmr=setTimeout("shrinkpic()",stillstand)
} function gotothislink(){
document.location.href=thislink[i_imgurl] } document.write('<div id="roof" style="position:relative;width:'+imgwidth+'px;height:'+imgheight+'px;">')
document.write('<div id="picdiv" class="curveandshadowstyle" style="position:absolute;background:url('+imgurl[0]+');width:'+imgwidth+'px;height:'+imgheight+'px;top:0px;left:0px;"></div>') document.write('<div id="tt" onClick="gotothislink()" style="position:absolute;width:'+imgwidth+'px;height:'+imgheight+'px;top:0px;left:0px;filter:alpha(opacity='+opacitystrength+');opacity:'+(opacitystrength/100)+';cursor:pointer;"><table width='+imgwidth+' height='+imgheight+'><tr><td id="textbox" class="textboxstyle"><span class="textboxbackgroundstyle">'+message[0]+'</span></td></tr></table></div>') document.write('</div>') window.onload=shrinkpic
</script></center>
<!-- END OF THE CODE FOR THE CSS-3-SLIDESHOW-->
<div class="Modul_nd">
<div class="chuyenmuc">
<style type="text/css">
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 960;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
} </style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="http://b-lốc.vn"><img alt="" src="http://4pvn.com.vn/img/Type/357.png" style="width: 272px; height: 185px;" /></a><a href="http://b-lốc.vn"><img alt="" src="http://4pvn.com.vn/img/Type/357.png" style="width: 220px; height: 185px;" /></a><a href="http://myphamxachtayus.com/clinique/166367.html"><img alt="" src="http://4pvn.com.vn/img/Type/357.png" style="width: 220px; height: 185px;" /></a><a href="http://b-lốc.vn"><img alt="" src="http://4pvn.com.vn/img/Type/357.png" style="width: 240px; height: 185px;" /></a><a href="http://b-lốc.vn"><img alt="" src="http://4pvn.com.vn/img/Type/357.png" style="width: 240px; height: 185px;" /></a><a href="http://b-lốc.vn"><img alt="" src="http://4pvn.com.vn/img/Type/357.png" style="width: 240px; height: 185px;" /></a><a href="http://b-lốc.vn"><img alt="" src="http://4pvn.com.vn/img/Type/357.png" style="width: 240px; height: 185px;" /></a></div>
<div id="demo2">
<a href="http://b-lốc.vn"><img alt="" src="http://4pvn.com.vn/img/Type/357.png" style="width: 254px; height: 185px;" /></a></div>
</div>
</div>
<script>
var speed = 40;
var tab = document.getElementById("demo");
var tab1 = document.getElementById("demo1");
var tab2 = document.getElementById("demo2");
tab2.innerHTML = tab1.innerHTML;
function Marquee() {
if (tab2.offsetWidth - tab.scrollLeft <= 0)
tab.scrollLeft -= tab1.offsetWidth
else {
tab.scrollLeft++;
}
}
var MyMar = setInterval(Marquee, speed);
tab.onmouseover = function() { clearInterval(MyMar) };
tab.onmouseout = function() { MyMar = setInterval(Marquee, speed) };
</script> </div>
</div>
- Kiểu 6 :
<div class="chuyenmuc">
<style type="text/css">
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 960;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
} </style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="http://b-lốc.vn"><img alt="" src="http://4pvn.com.vn/img/Type/357.png" style="width: 272px; height: 185px;" /></a><a href="http://b-lốc.vn"><img alt="" src="http://4pvn.com.vn/img/Type/357.png" style="width: 220px; height: 185px;" /></a><a href="http://myphamxachtayus.com/clinique/166367.html"><img alt="" src="http://4pvn.com.vn/img/Type/357.png" style="width: 220px; height: 185px;" /></a><a href="http://b-lốc.vn"><img alt="" src="http://4pvn.com.vn/img/Type/357.png" style="width: 240px; height: 185px;" /></a><a href="http://b-lốc.vn"><img alt="" src="http://4pvn.com.vn/img/Type/357.png" style="width: 240px; height: 185px;" /></a><a href="http://b-lốc.vn"><img alt="" src="http://4pvn.com.vn/img/Type/357.png" style="width: 240px; height: 185px;" /></a><a href="http://b-lốc.vn"><img alt="" src="http://4pvn.com.vn/img/Type/357.png" style="width: 240px; height: 185px;" /></a></div>
<div id="demo2">
<a href="http://b-lốc.vn"><img alt="" src="http://4pvn.com.vn/img/Type/357.png" style="width: 254px; height: 185px;" /></a></div>
</div>
</div>
<script>
var speed = 40;
var tab = document.getElementById("demo");
var tab1 = document.getElementById("demo1");
var tab2 = document.getElementById("demo2");
tab2.innerHTML = tab1.innerHTML;
function Marquee() {
if (tab2.offsetWidth - tab.scrollLeft <= 0)
tab.scrollLeft -= tab1.offsetWidth
else {
tab.scrollLeft++;
}
}
var MyMar = setInterval(Marquee, speed);
tab.onmouseover = function() { clearInterval(MyMar) };
tab.onmouseout = function() { MyMar = setInterval(Marquee, speed) };
</script> </div>
</div>
<marquee direction="left" scrollamount="3" onmouseover="this.stop()" onmouseout="this.start()" height="102" width="100%"> <a title="UCBrowser Fastest internet Browser DOwnload for Samsung Rex 60 70 80 90 java supported full touchscreen phones¡" href="http://b-lốc.vn" target="_blank"><img style="border-style: solid; border-width: 1px; border-color: #000000" src="http://4pvn.com.vn/img/Type/357.png" border=0 height="100" width="100" /></a> <a title="Free Download Avast Antivirus for Nokia Asha 200, 201, 300, 303, 305, 306, 311 (Nokia S40) and Java phone¡" href="http://b-lốc.vn" target="_blank"><img style="border-style: solid; border-width: 1px; border-color: #000000" src="http://4pvn.com.vn/img/Type/357.png" border=0 height="100" width="100" /></a> <a title="Free Download Angry Birds Star Wars HD for iPad¡" href="http://b-lốc.vn" target="_blank"><img style="border-style: solid; border-width: 1px; border-color: #000000" src="http://4pvn.com.vn/img/Type/357.png" border=0 height="100" width="100" /></a> <a title="Adobe Photoshop Touch Download for Ipad and Iphone¡" href="http://b-lốc.vn" target="_blank"><img style="border-style: solid; border-width: 1px; border-color: #000000" src="http://4pvn.com.vn/img/Type/357.png" border=0 height="100" width="100" /></a> <a title="Free Download iKamasutra App - Sex Positions for Android phone¡" href="http://b-lốc.vn" target="_blank"><img style="border-style: solid; border-width: 1px; border-color: #000000" src="http://4pvn.com.vn/img/Type/357.png" border=0 height="100" width="100" /></a> <a title="Free Download AVPlayerHD for iPad¡" href="http://b-lốc.vn" target="_blank"><img style="border-style: solid; border-width: 1px; border-color: #000000" src="http://4pvn.com.vn/img/Type/357.png" border=0 height="100" width="100" /></a> <a title="Free Download Fruit Ninja HD Game for iPad¡" href="http://b-lốc.vn" target="_blank"><img style="border-style: solid; border-width: 1px; border-color: #000000" src="http://4pvn.com.vn/img/Type/357.png" border=0 height="100" width="100" /></a> <a title="Free Download Real Racing 2 HD Game for Android, iPhone and iPad¡" href="http://b-lốc.vn" target="_blank"><img style="border-style: solid; border-width: 1px; border-color: #000000" src="http://4pvn.com.vn/img/Type/357.png" border=0 height="100" width="100" /></a> <a title="Free Download Quickoffice Pro (Office & PDF) for Android¡" href="http://b-lốc.vn" target="_blank"><img style="border-style: solid; border-width: 1px; border-color: #000000" src="http://4pvn.com.vn/img/Type/357.png" border=0 height="100" width="100" /></a> <a title="Free Download Plants vs. Zombies HD Game for iPad¡" href="http://b-lốc.vn" target="_blank"><img style="border-style: solid; border-width: 1px; border-color: #000000" src="http://4pvn.com.vn/img/Type/357.png" border=0 height="100" width="100" /></a> <a title="Diamonds 240x320 java game free download for Samsung Rex 60 70 80 90 full touchscreen phones¡" href="http://b-lốc.vn" target="_blank"><img style="border-style: solid; border-width: 1px; border-color: #000000" src="http://4pvn.com.vn/img/Type/357.png" border=0 height="100" width="100" /></a> <a title="Free Download WhatsApp Messenger for iPhone¡" href="http://b-lốc.vn" target="_blank"><img style="border-style: solid; border-width: 1px; border-color: #000000" src="http://4pvn.com.vn/img/Type/357.png" border=0 height="100" width="100" /></a> <a title="Free Download Minecraft - Pocket Edition for Android Phone¡" href="http://b-lốc.vn" target="_blank"><img style="border-style: solid; border-width: 1px; border-color: #000000" src="http://4pvn.com.vn/img/Type/357.png" border=0 height="100" width="100" /></a> <a title="Free download Angry Birds Space 240x320 game for Samsung Rex 60 70 80 90 full touchscreen phones¡" href="http://b-lốc.vn" target="_blank"><img style="border-style: solid; border-width: 1px; border-color: #000000" src="http://4pvn.com.vn/img/Type/357.png" border=0 height="100" width="100" /></a> <a title="Grand theft auto vice city V1.03 (apk + sd data) - free download game for android¡" href="http://b-lốc.vn" target="_blank"><img style="border-style: solid; border-width: 1px; border-color: #000000" src="http://4pvn.com.vn/img/Type/357.png" border=0 height="100" width="100" /></a> <a title="Concise English Dictionary Free Download for Nokia Asha 305, 306, 308, 309, 311, 202, 303, C2-03¡" href="http://b-lốc.vn" target="_blank"><img style="border-style: solid; border-width: 1px; border-color: #000000" src="http://4pvn.com.vn/img/Type/357.png" border=0 height="100" width="100" /></a> <a title="Free Download Titanium Backup PRO unlocked - app backup pro for android phone¡" href="http://b-lốc.vn" target="_blank"><img style="border-style: solid; border-width: 1px; border-color: #000000" src="http://4pvn.com.vn/img/Type/357.png" border=0 height="100" width="100" /></a> <a title="SmartMovie 4.15 Signed Video player download for Nokia Symbian Belle Refresh, Symbian Anna, s60v5¡" href="http://b-lốc.vn" target="_blank"><img style="border-style: solid; border-width: 1px; border-color: #000000" src="http://4pvn.com.vn/img/Type/357.png" border=0 height="100" width="100" /></a> <a title="English French Dictionary for Java supported phones¡" href="http://b-lốc.vn" target="_blank"><img style="border-style: solid; border-width: 1px; border-color: #000000" src="http://4pvn.com.vn/img/Type/357.png" border=0 height="100" width="100" /></a> <a title="Free Download Firefox Browser for Android (Android 2.2 and up)¡" href="http://b-lốc.vn" target="_blank"><img style="border-style: solid; border-width: 1px; border-color: #000000" src="http://4pvn.com.vn/img/Type/357.png" border=0 height="100" width="100" /></a>
</marquee>
</marquee>
