---
# System prepended metadata

title: Week 12(11/27)

---

# Week 12(11/27)：實用網頁設計技巧(2)
## 圖片自動橫向捲動
可使用[Owl Carousel](https://owlcarousel2.github.io/OwlCarousel2/)提供的autoplay demo實作。
範例程式碼：
```html==
<!DOCTYPE html>
<html>
    <head>
        <!-- Owl Stylesheets -->
        <link rel="stylesheet" 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">
        
        <!-- javascript -->
        <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>
        <!--  Demos -->
        <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;    

        </script>
    </body>
</html>
```
網頁呈現：
![executive result](https://hackmd.io/_uploads/r1lPD178p.png)
詳細資訊：https://nchu-mis-html5.blogspot.com/2012/09/owl-carousel.html

## 一頁式網頁設計
在實作一頁式網頁設計時，最常見的問題在於用戶無法快速找到其想要的資訊內容位置，所以為應對此，我們應在網頁中設立錨點。

用法可照以下網址介紹操作：https://tools.wingzero.tw/article/sn/224