12/12 HTML 自動瀏覽式頁面

官方網站： https://owlcarousel2.github.io/OwlCarousel2/
教學網站： http://nchu-mis-html5.blogspot.com/2012/09/owl-carousel.html

<!DOCTYPE html>
<html>
<head>


<link rel="stylesheet" #載入資料集把要找的東西加入cnd就能在網路上找到
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">

 #載入資料集把要找的東西加入cnd就能在網路上找到
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
</head>
<body>


<div id="demo">
</div>

<script>
$(document).ready(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
items: 4,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 1000, #設定變動的時間。
autoplayHoverPause: true
});
})

var images = new Array();
images[0] = "http://pic.gomaji.com/img.php?type=product&id=20136&size=r";
images[1] = "http://pic.gomaji.com/img.php?type=product&id=20135&size=r";
images[2] = "http://pic.gomaji.com/img.php?type=product&id=20305&size=r" ;
images[3] = "http://pic.gomaji.com/img.php?type=product&id=19970&size=r" ;
images[4] = "http://pic.gomaji.com/img.php?type=product&id=20106&size=r" ;
images[5] = "http://pic.gomaji.com/img.php?type=product&id=20404&size=r" ;
images[6] = "http://pic.gomaji.com/img.php?type=product&id=20373&size=r" ;
images[7] = "http://pic.gomaji.com/img.php?type=product&id=20275&size=r" ;
images[8] = "http://pic.gomaji.com/img.php?type=product&id=20209&size=r";
images[9] = "http://pic.gomaji.com/img.php?type=product&id=20134&size=r";

str = '<div class="owl-carousel owl-theme">';
for (i=0 ; i<=9 ; i++)
{
str += '<div class="item">';
str += '<img src="' + images[i] + '" />';
str += '</div>';
}
str += '</div>';
document.getElementById("demo").innerHTML = str; #取代id

</script>
</body>
</html>

MIS note

12/12 HTML 自動瀏覽式頁面

沒有留言:

張貼留言

Popular

Pages