티스토리 뷰

매뉴얼

로고 슬라이더 모음....

feelname7 2019. 1. 21. 16:33









        <!-- 로고 슬라이더 -->


        <head>

            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

            <title>Amazon style image and title scroller</title>

            <link href="css/amazon_scroller.css" rel="stylesheet" type="text/css">

            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

            <script type="text/javascript" src="js/amazon_scroller.js"></script>


            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

        </head>


        <script language="javascript" type="text/javascript">

            $(function() {

                $("#amazon_scroller1").amazon_scroller({

                    scroller_title_show: 'disable', // 원본 'enable'

                    scroller_time_interval: '4000',

                    scroller_window_background_color: "#CCC",

                    scroller_window_padding: '10', // 원본 '10'

                    scroller_border_size: '1',

                    scroller_border_color: '#000',

                    scroller_images_width: '200', // 이미지 사이즈 아래도?? // 원본 '124'

                    scroller_images_height: '53', // 이미지 사이즈 아래도?? // 원본 '160'

                    scroller_title_size: '12', // 원본 '12' - 글자가 padding에 가려지지만...title_size,padding으로도 가림조정안됨

                    scroller_title_color: 'black',

                    scroller_show_count: '5', // 보여지는 이미지 갯수 // 원본 '4'

                    directory: 'images'

                });

            });


        </script>



        <div id="amazon_scroller1" class="amazon_scroller">

            <div class="amazon_scroller_mask">

                <ul>

                    <!-- 수정 제거 - 타이틀 - title="JavaScript and Ajax for the Web: Visual QuickStart Guide

                            width="60" height="60" -->

                    <li><a href="#" title="네이버블로그" target="_blank"><img src="/images/blog_naver.jpg"></a></li>


                    <li><a href="#" title="daum블로그" target="_blank"><img src="/images/blog_daum.jpg"></a></li>


                    <li><a href="#" title="웹사이트" target="_blank"><img src="/images/abc.jpg"></a></li>


                    <li><a href="#" title="홈페이지" target="_blank"><img src="/images/edg.jpg"></a></li>


                    <li><a href="#" title="웹사이트" target="_blank"><img src="/images/blog_naver_ori.jpg"></a></li>


                    <li><a href="#" title="네이버블로그" target="_blank"><img src="/images/blog_naver.jpg"></a></li>


                    <li><a href="#" title="daum블로그" target="_blank"><img src="/images/blog_daum.jpg"></a></li>



                    <!--

            <li><a href="http://www.amazon.com/gp/product/0321564081/ref=as_li_ss_il?ie=UTF8&tag=html061-20&linkCode=as2&camp=217145&creative=399369&creativeASIN=0321564081" title="JavaScript and Ajax for the Web: Visual QuickStart Guide" target="_blank"><img src="http://ws.assoc-amazon.com/widgets/q?_encoding=UTF8&Format=_SL160_&ASIN=0321564081&MarketPlace=US&ID=AsinImage&WS=1&tag=html061-20&ServiceVersion=20070822" width="60" height="60" alt="JavaScript and Ajax for the Web: Visual QuickStart Guide" /></a></li>

-->

                </ul>

            </div>

            <ul class="amazon_scroller_nav">

                <li></li>

                <li></li>

            </ul>

            <div style="clear: both"></div>

        </div>



        <!-- 끝 로고 슬라이더 -->




출처 : http://www.htmldrive.net/items/show/244/Amazon-style-image-and-title-scroller-with-jQuery




공란

수동/자동 모음 출처 : https://9bitstudios.github.io/flexisel/












'매뉴얼' 카테고리의 다른 글

heroku nodejs 배포하기_추가중..  (0) 2019.02.03
git 명령어_수정중..  (0) 2019.02.02
반응형 php 폼메일 (form mail)  (0) 2019.01.20
실행 에러 모음들...추가중입니다...  (0) 2019.01.11
부팅디스크 만드는 방법  (0) 2019.01.07
댓글