Help Slide còn bị thiếu

1,967 10 1
C

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>
 
Bài viết liên quan
Tôi muốn dùng ảnh bài viết làm ảnh bìa blog Sngine bởi nguyenlongvn,
Sử dụng Console của Chrome hoặc Firefox bởi 70211119,
Cách dùng JavaScript tạo các ảnh trượt Image Slider đơn giản bởi PVS,
Tìm hiểu biểu thức trong Javascript bởi PVS,
Tìm hiểu phạm vi hoạt động của biến trong Javascript bởi PVS,
Giới thiệu và tìm hiểu kiểu dữ liệu trong Javascript bởi PVS,
Bài viết mới
Làm cách nào required upload ảnh khi đăng bài lên blog bởi Phucphuc,
Tôi muốn dùng ảnh bài viết làm ảnh bìa blog Sngine bởi nguyenlongvn,
Js lúc hoạt động lúc không web xổ số bởi wdasd,
Giúp mình bài code này với huhu bởi Traidau04,
Sử dụng Console của Chrome hoặc Firefox bởi 70211119,
Tìm hiểu về Javascript từ cơ bản đến nâng cao bởi anhngan21,
  • Like
Reactions: THB
C

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

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.
 
C

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 !
 
C

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 !
 
C

craynobi

Private
Tham gia
28/04/2016
Bài viết
9
Được Like
4
longruoi nói:
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.
Nhấn để mở rộng...
em mà addlink như vậy ngay lập tức ảnh bị đẩy khỏi khu slide !
 
C

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

longruoi

MasterCorporal
Thành viên BQT
Tham gia
19/04/2015
Bài viết
260
Được Like
213
craynobi nói:
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>
Nhấn để mở rộng...
Để 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

craynobi

Private
Tham gia
28/04/2016
Bài viết
9
Được Like
4
longruoi nói:
Để 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.
Nhấn để mở rộng...
cảm ơn anh
 
C

craynobi

Private
Tham gia
28/04/2016
Bài viết
9
Được Like
4
longruoi nói:
Để 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.
Nhấn để mở rộng...
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
 
C

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 !
 
Bạn phải đăng nhập hoặc đăng ký để bình luận.
Người đăng Chủ đề tương tự Diễn đàn Trả lời Ngày đăng
PVS Cách dùng JavaScript tạo các ảnh trượt Image Slider đơn giản JavaScript/jQuery 0
PVS Hướng dẫn Sử dụng jQuery để xây dựng plugin slide-door JavaScript/jQuery 4
PVS Hướng dẫn Sử dụng jQuery để xây dựng một slider đơn giản JavaScript/jQuery 0
PVS Hướng dẫn Xây dựng một slider đơn giản bằng Javascript - DOM JavaScript/jQuery 1
PVS Hướng dẫn Hướng dẫn sử dụng Javascript thuần tuý để tạo slider JavaScript/jQuery 0

Chủ đề tương tự


Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Dịch vụ XenForo của VNXF

anhanhxf     0906081284
Inbox PVS

Xử lý sự cố (Troubleshooting)

Texlink

Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom