Một Phong Cách Đơn Giản JQuery Năng Slideshow Đối Với Blogger

jQuery Hình ảnh rất mát mẻ, nổi bật có thể trượt hình ảnh và videos.Vì vậy ở đây chúng tôi có một tính năng xem hình tự động trượt dấu gạch chéo dấu gạch chéo slideshow hình ảnh carousel.Cho bài viết này có một phong cách đơn giản nhưng cung cấp cho chúng tôi một số tùy chọn bổ sung, một trong những chính là bạn có thể dễ dàng làm cho nó bất kỳ kích thước cho phù hợp với blog của bạn hoặc hình ảnh mà bạn muốn sử dụng.
Trong bản demo tôi đã làm cho nó yên tĩnh nhỏ, do đó nó sẽ phù hợp trên section.But bài viết bạn có thể có nó phù hợp với gọn gàng trên bài viết của bạn hoặc bạn có thể có chiều dài qua blog đầy đủ của bạn tại khu vực cột chéo.

Demo:

Bước 1.Blogger -> Thiết kế bảng điều khiển của bạn nhấp chuột --> Edit HTML

 

Bước 2.Tìm đoạn mã sau đây trong blogs Html của bạn: (Nhấn Ctrl và F cho một thanh tìm kiếm để tìm thấy mã - thông tin)

]]></b:skin> 

Bước 3.Sao chép và dán đoạn mã sau đây trực tiếp / Trước: ]]> </ b: skin>

/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {

height:250px; width: 500px;

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 Styles--*/
.paging {
position: absolute;
bottom: 40px; 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif5nbNpM7uHwXR5CNVY_JsIV26xRD9znrdSDk9O432i5kzvChQAaf44dNRiayahZNaDDmRWxnupeXcDhuCIofgEP15s1YLvR7G88v0XSxG8tHuSyjU-WjG7WDFpTiAZ_OfV9YdW-iD1N3i/s1600/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;} 

Thay đổi kích thước - Tôi hiện đang có kích thước thiết lập để 500x250 như nêu bật như ở trên.Bạn có thể thay đổi điều này làm cho nó lớn hơn và ghi nhớ kích thước đó cũng là kích thước của hình ảnh bạn thêm vào.

Bước 4.Tìm đoạn mã sau đây trong blogs Html của bạn: (Nhấn Ctrl và F cho một thanh tìm kiếm để tìm thấy mã - thông tin).

</head> 

Bước 5. Sao chép và dán đoạn mã sau đây trực tiếp Trước  </ head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function() {

//Set Default State of each portfolio piece
$(&quot;.paging&quot;).show();
$(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(&quot;.window&quot;).width();
var imageSum = $(&quot;.image_reel img&quot;).size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});

//Paging + Slider Function
rotate = function(){ 
var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class
$active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(&quot;.image_reel&quot;).animate({ 
left: -image_reelPosition
}, 500 );

}; 

//Rotation + Timing Event
rotateSwitch = function(){ 
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $(&#39;.paging a.active&#39;).next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $(&#39;.paging a:first&#39;); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(&quot;.image_reel a&quot;).hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
}); 

//On Click
$(&quot;.paging a&quot;).click(function() { 
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
}); 

});
</script> 

Bước 6.Lưu mẫu của bạn.

Bước 7.OK Quay về phần tử trang -> Thêm một tiện ích -> Chọn Html / Javascript:...

Bước 8.Copy và Paste đoạn mã sau vào các tiện ích Html / Javascript;

<div class="container">

<div class="folio_block">

<div class="main_view">

<div class="window"> 
<div class="image_reel">

<a href="http://www.spiceupyourblog.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHwyUYuK03GFGo8FPO7DmOjVWwhY2NC3uTUGnASypTCshq1CbwHtfZvJL_eubjnd5cDww7y2ydSY2fg8HuKp9K_3Ny0deP2tF20SE4UYUnZiJVyPwBdL2fmfzPq2RxWlqQzKcMu1DuMjoD/s1600/slider-image-1.jpg" alt="" /></a>
<a href="http://www.spiceupyourblog.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTpYAIcefJ6p6xf_Ghxc0rp0ayPvuRQPy104Bo4c-MA691odpNnJIVWpQCB64GBUnsp16Ns83yPX_v0pNezdhe9eAwGpqh1q26BRpYVzhqcSU2YsndxuYD7OOvZ4_376GVXSilx3L_032K/s1600/slider-image-2.jpg" alt="" /></a>
<a href="http://www.spiceupyourblog.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQPjPmVm0wdPTP2wzaJgZR7xxIkzz8XCj01zq6HWKra96CypVMzU7UWh2XlCItZ1nyOWCpXTXxAFw-ncXk0nHvXE1Ix4lJEnYnUFZfDJNQMPmHaYnH6BUrreQxe2ygScI4rpj0dJ_jwXSA/s1600/slider-image-3.jpg" alt="" /></a>
<a href="http://www.spiceupyourblog.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHYeuU4pxlnrUg6Kc1RuXJiOv9Sj1KUD453ZTcN-1tX23gAUA95yjhkLDhc1pSsVqNLQfQFtUY0KFtCfsXtsqoBtSqL2jvJCnT8kSjZBCQJ42vInjGThvNmF4ADbz7FWmyEGnUh3rspAcz/s1600/slider-image-4.jpg" alt="" /></a>
<a href="http://www.spiceupyourblog.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_jzTTcs4wOjDs8IKNp5sgLA0hkwVxQn2ftcxAh13Bujs8H4b0hSz2FT5WBSMj_e0qAneRGG44b-FwVE71V-oO2m_zrWv4NyQMIeE8uA2yxLMPo2p2zODMiHVN6u_x1Uhoou8pMgod8TU6/s1600/slider-image-6.jpg" alt="" /></a>
</div>
</div>
<div class="paging"><a href="#" rel="1">1</a>

<a href="#" rel="2">2</a>

<a href="#" rel="3">3</a>

<a href="#" rel="4">4</a>

<a href="#" rel="5">5</a>

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

</div>

Và cuối cùng save lại chúc bạn thành công.