Chào mừng các bạn đến với web thiết bị mầm non Hà Vũ: Chúc Quý Khách Thành Đạt Trong Cuộc Sống. mọi thông tin vui lòng liên hệ trên.

Hình ảnh trượt tự động Nội dung



ebelum mẫu trên các bản demo tôi chia sẻ thanh trượt này sẽ, tôi sẽ xem xét một trong những đầu tiên vào các tính năng có sẵn trong mẫu này. Và ở đây bạn sẽ tìm thấy mẫu như thế nào sẽ làm việc cùng với một số tính năng hiện diện trong nó sẽ tự động. Nguyên tắc làm việc của Slider Nội dung gần giống như bài viết trước đây của tôi về làm cho Tạp chí trượt tự động mẫu thể thao 2 , khác biệt chỉ là trên quan điểm mà tôi đặt một hình nhỏ nhỏ dưới đây và hiệu ứng mouseover được thêm vào thanh trượt này.

Rất nhiều thanh trượt hướng dẫn hình ảnh đó đã được lưu hành trên mạng Internet, trong một số trường hợp, tôi đã gặp nhiều người vẫn nhập URL của các hình ảnh và mô tả của mỗi người, và nó là rất bất tiện và đòi hỏi độ chính xác, mặc dù một số người trong số họ là đã tự động, ở đây tôi chỉ cung cấp cho một thay thế để tăng bộ sưu tập của tất cả các bạn bè của tôi về các nguyên tắc cơ bản làm việc trong một nền tảng hình ảnh trượt tự động blog của blogger. Hiển thị thanh trượt hình ảnh như hình dưới đây, nếu bạn nhận thấy đây thực sự là cơ sở của Yahoo trượt đơn giản, tôi đặt Simplemag Johny mẫu . Bạn có thể sửa đổi bản thân theo khẩu vị.

Hình ảnh tự động trượt

DEMO

Trong blog demo là Carousel trượt hình ảnh tự động, nếu bạn quan tâm xin vui lòng đọc các hướng dẫn về Tạo Label Carousel tự động trượt Based .

Làm cách

Ngay lập tức trên các bước để tạo ra nội dung hình ảnh trượt tự động:
  1. Bước đầu tiên, bạn phải đăng nhập vào blogger với tài khoản của bạn
  2. Chọn blog bạn muốn thêm hình ảnh trượt là.
  3. Sau đó đi đến mẫu >> Edit HTML và kiểm tra mở rộng mẫu tiện ích con
  4. Như là một biện pháp phòng ngừa để tránh những sai lầm trong tương lai chỉnh sửa, sao lưu mẫu của bạn đầu tiên.
  5. Bước tiếp theo, đặt mã sau đây trên mã ]]> </ b: skin> :
    SliderPostInfo p {color: # fff; font-size: 1.1em; padding: 0 5px} . các thanh trượt sliderPostInfo h2 {color: # FFF; font: 14px Tahoma đậm; text-transform: none; padding: 0 5px } # tính năng trượt 0 5px} # paginate tính năng trượt ul {width: 415px; padding-bottom: 0; list-style: none} # paginate tính năng trượt ul img {padding-top: 5px; background: # F0F0F0} # paginate tính năng trượt img {biên giới-top: 4px solid # F0F0F0} # paginate tính năng trượt a: hover img, # paginate tính năng một thanh trượt. lựa chọn img {biên giới-top: 4px solid # 357.798}










    Bài viết màu xanh trên thanh trượt dài và chiều rộng trong bản demo, xin vui lòng điều chỉnh kích thước.
  6. Vẫn còn trên vị trí của HTML Sửa , nhập mã sau đây trên mã </ head> :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    <script src = 'http://yourjavascript .com/222517121138/contentslider.js type = 'text / javascript' /> <script type='text/javascript'> / / <[CDATA [ imgr = new Array (); imgr [0] = = True; aBold = true; summaryPost = 100; summaryTitle = 25; numposts3 = 5 ; chức năng removeHtmlTag (strx, chop) { var s = strx.split ("<") for (var i = 0; i <s. chiều dài; i + +) { nếu (s [i] indexOf (">") = -1) { s [i] = s [i] substring (s [i] indexOf (">") +1, s [i] chiều dài); } } s = s.join (""); s.substring s = (0, chop-1); trở lại s; } showrecentposts3 chức năng (json) {     j = (showRandomImg)?Math.floor ((imgr.length +1) * Math.random ()): 0;     img = new Array ();       cho (var i = 0; i <numposts3; i + +) {         var nhập = json.feed.entry [i];         var posttitle = entry.title $ t;         var pcm,         var posturl;         if (i == json.feed.entry.length) break;         (var k = 0; entry.link.length <k; k + +) {               nếu (entry.link [k] rel == 'thay thế') {.                 posturl = entry.link [k] href;                break;               }         }         for (var k = 0; k <entry.link.length; k + +) {               nếu (entry.link [k] rel. == 'trả lời' && entry.link [k]. loại == 'text / html') {                 pcm = entry.link [k]. title.split (" ") [0];                 break;               }         }         if ("nội dung" trong mục nhập) {               var postcontent = entry.content $ t;}         khác         ("tóm tắt" trong mục nhập) {               var postcontent = entry.summary $ t.; }         khác postcontent var = "";         ghi lùi = entry.published $ t;     if (j> imgr.length-1) j = 0;     img [i] = imgr [j];     s = postcontent: một s.indexOf = ("<img") b = s.indexOf ("src = \" ", a); c = s.indexOf (" \ "", b +5) d = s.substr (b +5, cb -5);     nếu ((a! = -1) && (b! = -1) && (c! = -1) & (d! = "")) img [i] = d;     / / cmtext = ( text = "không")? '<i> <font Color="'+acolor+'"> (' + pcm +'' + văn bản + ') </ font> </ i>':'';     var tháng = [1,2,3,4, 5,6,7,8,9,10,11,12];     var month2 = ["Jan", "Tháng hai", "Mar", "April", "May", "Jun", "July", " Tháng Tám "," Sep "," Tháng mười "," November "," Tháng mười hai "];     var ngày = postdate.split ("-") [2] substring (0,2);     var m = postdate.split (" - ") [1];     var y = postdate.split ("-") [0];     for (var v2 = 0; u2 <month.length; u2 + +) {         if (parseInt (m) == tháng [u2] ) {             m = month2 [u2]; break;         }     }     var daystr = ngày +'' + m +'' + y;     var trtd = '<div class="contentdiv"> <a href="'+posturl+'"> <img width = " 407 "height =" 240 "class =" alignnone "src =" '+ img [i] +' "/> </ a> <div class="sliderPostInfo"> <h2 class =" featuredTitle " > <a showrecentposts4 (json) {     j = (showRandomImg)? Math.floor ((imgr.length +1) * Math.random ()): 0;     img = new Array ();       cho (var i = 0; i <numposts3; i + +) {         var nhập = json.feed.entry [i];         var posttitle = entry.title $ t;         var pcm,         var posturl;         if (i == json.feed.entry.length) break;         (var k = 0; entry.link.length <k; k + +) {              nếu (entry.link [k] rel == 'thay thế') {.                 posturl = entry.link [k] href;                 break;               }         }         for (var k = 0; k <entry.link.length; k + +) {               nếu (entry.link [k] rel. == 'trả lời' && entry.link [k]. loại == 'text / html') {                 pcm = entry.link [k]. title.split (" ") [0];                 break;               }         }         if ("nội dung" trong mục nhập) {               var postcontent = entry.content $ t;}         khác         ("tóm tắt" trong mục nhập) {               var postcontent = entry.summary $ t.; }         khác postcontent var = "";         ghi lùi = entry.published $ t;     if (j> imgr.length-1) j = 0;     img [i] = imgr [j];     s = postcontent: một s.indexOf = ("<img") b = s.indexOf ("src = \" ", a); c = s.indexOf (" \ "", b +5) d = s.substr (b +5, cb -5);     nếu ((a! = -1) && (b! = -1) && (c! = -1) & (d! = "")) img [i] = d;     / / cmtext = ( text = "không")? '<i> <font Color="'+acolor+'"> (' + pcm +'' + văn bản + ') </ font> </ i>':'';     var tháng = [1,2,3,4, 5,6,7,8,9,10,11,12];     var month2 = ["Jan", "Tháng hai", "Mar", "April", "May", "Jun", "July", " Tháng Tám "," Sep "," Tháng mười "," November "," Tháng mười hai "];     var ngày = postdate.split ("-") [2] substring (0,2);     var m = postdate.split (" - ") [1];     var y = postdate.split ("-") [0];     for (var v2 = 0; u2 <month.length; u2 + +) {         if (parseInt (m) == tháng [u2] ) {             m = month2 [u2]; break;         }     }     var daystr = ngày +'' + m +'' + y;     var trtd = '<li> <a class="toc" href="#"> <img width = " 75 "height =" 50 "class =" alignnone "src =" '+ img [i] +' "/> </ a> </ li> ';     document.write (trtd);     j + +; } } / /]]> </ script>










































          






          






          

      


      















































          






          






          

      


      































    Mô tả:
    Script mã màu đỏ (trên cùng) là các mã kịch bản jquery.min.js mới loạt mà tôi sử dụng để làm cho thanh trượt này. Nếu mẫu của bạn đã tồn tại j Query.min.js mặc dù khác nhau series, màu đỏ mã trên không còn cần bạn nhập vào. Chỉ cần một jquery.min.js hiện có mẫu, nó là số serial, nếu có thể phiên bản mới nhất.
    Màu xanh : Số bài viết được hiển thị trong thanh trượt
    màu xanh : Chiều dài và chiều rộng của hình ảnh
    màu đỏ thẫm : Chiều dài và chiều rộng của một hình ảnh nhỏ
  7. Sau các bước trên, lưu mẫu đầu tiên. Sau đó đi đến >> bố trí thêm các tiện ích nhập mã này trong hộp HTML / Javascript :

    <div id='featuredContent'>
    <div class='sliderwrapper' id='featured-slider'>
    <script>
    document.write ('<script id = 'paginate tính năng trượt'> <ul> <script> document.write ('<script class = "rõ ràng"> </ div> </ div> <script type='text/javascript'>featuredcontentslider.init ({ id: "tính năng trượt", / / id của chính Bảo hiểm tiền gửi Việt trượtcontentsource: ["nội tuyến" , ""], / / giá trị hợp lệ: ["nội tuyến", ""] ["ajax", "path_to_file"] toc: "đánh dấu", / / giá trị hợp lệ: "# tăng", "đánh dấu", " label1 "," Label2 ", vv] NextPrev: ["", ""], / / nhãn "trước" và "tiếp theo". liên kết Đặt "" để ẩn. revealtype: "mouseover", / / Hành vi của pagination liên kết để tiết lộ các trang trình bày: "click" hoặc "mouseover" enablefade: [true, 0,4], / / [true / false, fadedegree] dừng quay: [true, 5000], / / [true / false, pausetime]onChange: function (previndex, curindex) {/ / xử lý sự kiện bắn Bất cứ khi nào kịch bản thay đổi trượt / / previndex giữ chỉ số của slide cuối cùng xem b4 hiện tại (1 = 1 trượt, 2 = 2, vv) / / curindex giữ chỉ số của slide hiện đang thể hiện (1 = 1 trượt, 2 = 2, vv) } }) </ script> </ div>

























    Mô tả:
    Xem xét văn bản màu xanh ở trên, nó là một nhãn hiệu tôi đặt trên thanh trượt. Vui lòng thay đổi như bạn muốn. Và các màu đỏ là một tuyên bố dưới hình thức của tốc độ trượt, hiệu lực thanh trượt mouseover và những người khác, không nên đưa.
    Nếu bạn muốn để thay thế nó với một bài gần đây hoặc bài viết mới nhất thay thế các mã có là 2 thay vì tất cả:
    script src = \ "/ feeds / posts / default / - thể thao / tối đa kết quả
    với mã sau đây:
    script src = \ "/ feeds / posts / default? max-kết quả
  8. Nếu bạn muốn đặt nó trực tiếp trên các mẫu, bạn có thể đặt mã theo mã số 7 <div id='main-wrapper'> , cho những người muốn đặt nó trên hộp HMTL / Javascript có thể được thực hiện một lần một cột trống trên các bài đăng blog. Làm thế nào để làm cho nó, đặt đoạn code sau đây ở trên]]> </ b: skin>
    1. / * Nội dung slide 
    2. ----------------------------------------------- * /  
    3. . Slide-wrapper { đệm  auto lề  auto chiều rộng tự động float :  trái ;  
    4. word-wrap: break-word;  tràn :  ẩn ;}   
    5. Slide { màu :  # 666666 line-height :  1.3em ;}  
    6. Slide ul { list-style không có lề 0 0  đệm 0 0  ;}  
    7. Slide li { lề padding-top ;  
    8. padding-quyền padding-bottom 25em ;  
    9. padding-left 0px văn bản-indent 0px line-height 1.3em;}  
    10. . Slide Widget { lề 0px  0px  6px  0px ;}  
  9. Sau đó, để mang lại cho nó để bố trí (trên blog đăng bài), bạn nên gọi anh ta. Tìm mã <div id='main-wrapper'> sau đó đặt mã dưới đây:
    1. <B: nếu cond = 'dữ liệu: blog.url == dữ liệu: blog.homepageUrl' >  
    2.       <Div id = 'slide-wrapper' >  
    3. <B: phần lớp = 'slide'  id = 'Xem trình diễn'  ưa thích = 'yes'/>  
    4.       </ Div>  
    5. </ B: if>   
    G3RTAQDV75WT
Nếu lưu ý là trên mã kịch bản đó là quá nhiều, và chắc chắn sẽ ngày càng làm chậm tải của một blog. Để khắc phục điều này, bạn có thể lưu các mã được quá lâu tại Google Code . Vâng, đó là một trong những tính năng hình ảnh thanh trượt mà tôi xem xét thời gian này. Tôi mong muốn này sau khi tính năng trong một bản mẫu, tất cả các bạn bè của tôi sẽ được làm một xuất hiện bằng cách thay đổi mẫu đó từ phía dưới cùng của màn hình mà tôi đã đưa ra một thử và diatas.Selamat hy vọng hữu ích

Tag:

Chia sẻ bài viết : like hay g+ Các Bạn Nhé :