[Share] code slideshow ảnh bằng javascript + css + html cho wap/web -- thantienvxp

Trang chủ > Share code xtgem

» Thể loại: Share code xtgem
» Last Updated: 08/05/16
» Lượt xem: 4065 Views

Nội dung:

Share code javascript css html slideshow

Xem demo

Html viết:

Css viết:

* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 0;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@media only screen and (max-width: 300px) {
  .slprev, .slnext,.text {font-size: 11px}
         }

Javascript:

[Share] code html css navigation đẹp cho wap/web code cơ bản cho wapmaster

Những mẫu navigation cơ bản nhưng hữu dụng cho làm web. code hay cho làm web/wap ...

Share code filelist ảnh chuẩn slideshow cực đẹp

Code filelist xtgem kết hợp slideshow javascript cự đẹp cho wap ảnh ...

Share code background tuyết rơi bằng css và javascript cực đẹp cho wap

Share code background tuyết rơi bằng css và javascript cực đẹp cho wap, code js cực hay đẹp ...

Công cụ tạo logo đẹp online, các trang tạo logo trực tuyến miễn phí

Công cụ tạo logo đẹp online, các trang tạo logo trực tuyến miễn phí ...

Share code javascript và css hiệu ứng cho chuột

Bộ code hịu ứng cực đẹp cho chuột, hiệu ứng hay bằng javascript và css ...

Share code tạo ảnh xoay liên tục, ảnh xoay khi hover chuột, css cực đẹp

Share code tạo ảnh xoay liên tục, ảnh xoay khi hover chuột, css cực đẹp, css3 hiệu quả cho làm web/wap ...

«123 4 »