Help Slide còn bị thiếu

craynobi

Private
Tham gia
28/04/2016
Bài viết
9
Được Like
4
Em có 1 mã nguồn mỡ slide bây h em còn thiếu cách làm nút play vs chèn liên kết vào hình mà em mới học nên còn nhiều cái thiếu sót mong mấy anh hướng dẫn giúp với ạ
code của em ở dưới. Pro nào xem và hướng dẫn em chút ạ em xin cảm ơn
Mã:
<div id="container">
 <script src="Scripts/js/jquery-2.1.3.min.js"></script>
    <script src="Scripts/js/cycle2.js"></script>
<style>---- </style>
<div id="slideshow" class="cycle-slideshow"
data-cycle-fx="fade"
data-cycle-manual-fx="scrollHorz"
data-cycle-pager-fx = "fade"
data-cycle-manual-speed="400"
data-cycle-prev="#prev"   
data-cycle-next="#next"
data-cycle-play="play"
data-cycle-speed="600" 
data-cycle-timeout="2000"
data-cycle-pager = "#pager"
data-cycle-pager-template="<a href='#'><img src='{{url}}' width=150 height=100></a>"
     >
        <img src="img/back.jpg" id="intro_img" />
        <img src="img/footer-photo1.jpg" id="intro_img"/>
         <img src="img/Path Through meadow.jpg" id="intro_img"/>
         <img src="img/Snow Mt Milky Way.jpg" id="intro_img"/>
         <img src="img/Awesome Mountain.jpeg" id="intro_img"/>
         <img src="img/Spring Scenery.jpg" id="intro_img"/>
        </div>

        <div id="pager"></div>
       
        <div id="prev_c"><img id="prev" src="img/prev1.svg"/></div>
        <div id="next_c"><img id="next" src="img/next1.svg"/></div>
       
</div>

<script type="text/javascript">

function height() {
    var h = window.innerHeight;
    var a = document.getElementById('container');
    a.style.height = h+"px";
    }
   

</script>
 
  • Like
Reactions: THB

craynobi

Private
Tham gia
28/04/2016
Bài viết
9
Được Like
4
mong mấy anh giúp thật ra em học toàn asp. net không có javascrip h làm đụng tới bỡ ngỡ quá ạ
 
  • Like
Reactions: THB

longruoi

MasterCorporal
Thành viên BQT
Tham gia
19/04/2015
Bài viết
260
Được Like
213
Cú pháp chèn liên kết vào hình ảnh:
Mã:
<a href="http://lienketsechuyentoi" target="_blank"><img src="http://hinhanhhienthi" alt="althienthi" /></a>
Còn nút play mình chưa hiểu rõ ý bạn lắm.
 

craynobi

Private
Tham gia
28/04/2016
Bài viết
9
Được Like
4
em biết bỏ link liên kết như thế nhưng sao khi bỏ vào nó lại làm hư slide !
 

craynobi

Private
Tham gia
28/04/2016
Bài viết
9
Được Like
4
Mã:
  <style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    #container {
        width:100%;
        position:relative;
        margin:0 auto;
        }
    #slideshow {
        height:350px;
        width:100%;
        }
    #slideshow img {
        height:100%;
        width:100%;
        position: absolute;
        z-index:10;
        min-width:100%;
        min-height:100%;
        }
    #pager {
        height:80px;
        width:100%;
        background:rgba(0,0,0,0.5);
        position:absolute;
        bottom:5%;
        z-index:1000;
        text-align:center;
        opacity:0;
        transition:all .2s ease-in-out 0s;
        }
    #pager:hover {
        opacity:1;
        }
    #pager img {
        margin: 10px 5px;
        opacity:0.3;
        transition:all .3s ease-in-out 0s;
        }
    #pager img:hover {
        opacity:1;
        transform:scale(1.05);
        z-index:100;
        }
    #prev_c {
        height:100%;
        width:200px;
        position:absolute;
        left:0;
        top:0;
        z-index:100;
        }
        #prev_c img {
            height:120px;
            width:120px;
            position:absolute;
            top:0;
            bottom:0;
            left:0;
            margin:auto 0px;
            }
       
    #next_c {
        height:100%;
        width:200px;
        position:absolute;
        right:0;
        top:0;
        z-index:100;
        }
        #next_c img {
            height:100px;
            width:100px;
            position:absolute;
            top:0;
            bottom:0;
            right:0;
            margin:auto 0px;
            }
     
        #next #prev  { visibility:hidden;}
        #next,#prev:hover {
            cursor:pointer;
            }
        #next_c,#prev_c:hover #next,#prev { visibility:visible;}
       
      
    </style>
cụ thể code design em như thế này ! anh copy về chạy thử là hiểu ngay !
 

craynobi

Private
Tham gia
28/04/2016
Bài viết
9
Được Like
4
Cú pháp chèn liên kết vào hình ảnh:
Mã:
<a href="http://lienketsechuyentoi" target="_blank"><img src="http://hinhanhhienthi" alt="althienthi" /></a>
Còn nút play mình chưa hiểu rõ ý bạn lắm.
em mà addlink như vậy ngay lập tức ảnh bị đẩy khỏi khu slide !
 

craynobi

Private
Tham gia
28/04/2016
Bài viết
9
Được Like
4
full code
Mã:
<head>
<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    #container {
        width:100%;
        position:relative;
        margin:0 auto;
        }
    #slideshow {
        height:350px;
        width:100%;
        }
    #slideshow img {
        height:100%;
        width:100%;
        position: absolute;
        z-index:10;
        min-width:100%;
        min-height:100%;
        }
    #pager {
        height:80px;
        width:100%;
        background:rgba(0,0,0,0.5);
        position:absolute;
        bottom:5%;
        z-index:1000;
        text-align:center;
        opacity:0;
        transition:all .2s ease-in-out 0s;
        }
    #pager:hover {
        opacity:1;
        }
    #pager img {
        margin: 10px 5px;
        opacity:0.3;
        transition:all .3s ease-in-out 0s;
        }
    #pager img:hover {
        opacity:1;
        transform:scale(1.05);
        z-index:100;
        }
    #prev_c {
        height:100%;
        width:200px;
        position:absolute;
        left:0;
        top:0;
        z-index:100;
        }
        #prev_c img {
            height:120px;
            width:120px;
            position:absolute;
            top:0;
            bottom:0;
            left:0;
            margin:auto 0px;
            }
       
    #next_c {
        height:100%;
        width:200px;
        position:absolute;
        right:0;
        top:0;
        z-index:100;
        }
        #next_c img {
            height:100px;
            width:100px;
            position:absolute;
            top:0;
            bottom:0;
            right:0;
            margin:auto 0px;
            }
     
        #next #prev  { visibility:hidden;}
        #next,#prev:hover {
            cursor:pointer;
            }
        #next_c,#prev_c:hover #next,#prev { visibility:visible;}
       
      
       
    
       
      
       
    </style>
</head>
<body>
<div id="container">


<div id="slideshow" class="cycle-slideshow"
data-cycle-fx="fade"
data-cycle-manual-fx="scrollHorz"
data-cycle-pager-fx = "fade"
data-cycle-manual-speed="400"
data-cycle-prev="#prev"   
data-cycle-next="#next"
data-cycle-play="play"
data-cycle-speed="600" 
data-cycle-timeout="2000"
data-cycle-pager = "#pager"
data-cycle-pager-template="<a href='#'><img src='{{src}}' width=100 height=50></a>"
     >
        <img src="img/back.jpg" id="intro_img" /></a>
        <img src="img/footer-photo1.jpg" id="intro_img"/></a>
         <img src="img/Path Through meadow.jpg" id="intro_img"/>
         <img src="img/Snow Mt Milky Way.jpg" id="intro_img"/>
         <img src="img/Awesome Mountain.jpeg" id="intro_img"/>
         <img src="img/Spring Scenery.jpg" id="intro_img"/>
        </div>

        <div id="pager"></div>
       
        <div id="prev_c"><img id="prev" src="img/prev1.svg"/></div>
        <div id="next_c"><img id="next" src="img/next1.svg"/></div>
       
</div>

<script type="text/javascript">

function height() {
    var h = window.innerHeight;
    var a = document.getElementById('container');
    a.style.height = h+"px";
    }
   

</script>
</body>
 

longruoi

MasterCorporal
Thành viên BQT
Tham gia
19/04/2015
Bài viết
260
Được Like
213
full code
Mã:
<head>
<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    #container {
        width:100%;
        position:relative;
        margin:0 auto;
        }
    #slideshow {
        height:350px;
        width:100%;
        }
    #slideshow img {
        height:100%;
        width:100%;
        position: absolute;
        z-index:10;
        min-width:100%;
        min-height:100%;
        }
    #pager {
        height:80px;
        width:100%;
        background:rgba(0,0,0,0.5);
        position:absolute;
        bottom:5%;
        z-index:1000;
        text-align:center;
        opacity:0;
        transition:all .2s ease-in-out 0s;
        }
    #pager:hover {
        opacity:1;
        }
    #pager img {
        margin: 10px 5px;
        opacity:0.3;
        transition:all .3s ease-in-out 0s;
        }
    #pager img:hover {
        opacity:1;
        transform:scale(1.05);
        z-index:100;
        }
    #prev_c {
        height:100%;
        width:200px;
        position:absolute;
        left:0;
        top:0;
        z-index:100;
        }
        #prev_c img {
            height:120px;
            width:120px;
            position:absolute;
            top:0;
            bottom:0;
            left:0;
            margin:auto 0px;
            }
      
    #next_c {
        height:100%;
        width:200px;
        position:absolute;
        right:0;
        top:0;
        z-index:100;
        }
        #next_c img {
            height:100px;
            width:100px;
            position:absolute;
            top:0;
            bottom:0;
            right:0;
            margin:auto 0px;
            }
    
        #next #prev  { visibility:hidden;}
        #next,#prev:hover {
            cursor:pointer;
            }
        #next_c,#prev_c:hover #next,#prev { visibility:visible;}
      
     
      
   
      
     
      
    </style>
</head>
<body>
<div id="container">


<div id="slideshow" class="cycle-slideshow"
data-cycle-fx="fade"
data-cycle-manual-fx="scrollHorz"
data-cycle-pager-fx = "fade"
data-cycle-manual-speed="400"
data-cycle-prev="#prev"  
data-cycle-next="#next"
data-cycle-play="play"
data-cycle-speed="600"
data-cycle-timeout="2000"
data-cycle-pager = "#pager"
data-cycle-pager-template="<a href='#'><img src='{{src}}' width=100 height=50></a>"
     >
        <img src="img/back.jpg" id="intro_img" /></a>
        <img src="img/footer-photo1.jpg" id="intro_img"/></a>
         <img src="img/Path Through meadow.jpg" id="intro_img"/>
         <img src="img/Snow Mt Milky Way.jpg" id="intro_img"/>
         <img src="img/Awesome Mountain.jpeg" id="intro_img"/>
         <img src="img/Spring Scenery.jpg" id="intro_img"/>
        </div>

        <div id="pager"></div>
      
        <div id="prev_c"><img id="prev" src="img/prev1.svg"/></div>
        <div id="next_c"><img id="next" src="img/next1.svg"/></div>
      
</div>

<script type="text/javascript">

function height() {
    var h = window.innerHeight;
    var a = document.getElementById('container');
    a.style.height = h+"px";
    }
  

</script>
</body>
Để khắc phục việc vị đẩy hình khỏi slide thì theo mình nghĩ bạn nên để nó vào 1 block, và đặt cho nó thuộc tính width: 100% !important;

Ví dụ như của bạn thì
PHP:
#slideshow img {
        height:100%;
        width:100%;
        position: absolute;
        z-index:10;
        min-width:100%;
        min-height:100%;
        }

Sửa thành
PHP:
#slideshow img {
        display: block;
        height: 100% !important;
        width: 100% !important;
        position: absolute;
        z-index:10;
        }

Sory bạn, mình không có laptop nên khả năng giúp bạn chỉ được vậy thôi. Vì mình không test được xem đúng hay không. Hy vọng giúp ích được cho bạn.
 

craynobi

Private
Tham gia
28/04/2016
Bài viết
9
Được Like
4
Để khắc phục việc vị đẩy hình khỏi slide thì theo mình nghĩ bạn nên để nó vào 1 block, và đặt cho nó thuộc tính width: 100% !important;

Ví dụ như của bạn thì
PHP:
#slideshow img {
        height:100%;
        width:100%;
        position: absolute;
        z-index:10;
        min-width:100%;
        min-height:100%;
        }

Sửa thành
PHP:
#slideshow img {
        display: block;
        height: 100% !important;
        width: 100% !important;
        position: absolute;
        z-index:10;
        }

Sory bạn, mình không có laptop nên khả năng giúp bạn chỉ được vậy thôi. Vì mình không test được xem đúng hay không. Hy vọng giúp ích được cho bạn.
cảm ơn anh
 

craynobi

Private
Tham gia
28/04/2016
Bài viết
9
Được Like
4
Để khắc phục việc vị đẩy hình khỏi slide thì theo mình nghĩ bạn nên để nó vào 1 block, và đặt cho nó thuộc tính width: 100% !important;

Ví dụ như của bạn thì
PHP:
#slideshow img {
        height:100%;
        width:100%;
        position: absolute;
        z-index:10;
        min-width:100%;
        min-height:100%;
        }

Sửa thành
PHP:
#slideshow img {
        display: block;
        height: 100% !important;
        width: 100% !important;
        position: absolute;
        z-index:10;
        }

Sory bạn, mình không có laptop nên khả năng giúp bạn chỉ được vậy thôi. Vì mình không test được xem đúng hay không. Hy vọng giúp ích được cho bạn.
Thua anh ơi nó vẫn văng ra ngoài hic hic khổ thật giảng viên hỏi cũng ngơ ngơ ra hic hic
 

craynobi

Private
Tham gia
28/04/2016
Bài viết
9
Được Like
4
anh có code nào về slide phim hoặc cuộn phim nếu có mong anh chia sẽ với em ạ em tìm nhiều lắm mà cả chục cách làm khác nhau có cái này đẹp nhưng bỏ link lại hok đc !
 

Top Bottom