Help Slide còn bị thiếu

1,871 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
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,
Tìm hiểu các mẫu Constructor, Object Literal, Module trong JavaScript bởi PVS,
Bài viết mới
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,
Xin trợ giúp main.js bởi rubicstudio,
Nhờ code thêm tìm sản phẩm cho Input "Search" và thêm nút Share cho từng sản phẩm. bởi Hoa Lan Vang,
  • 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

Dịch vụ XenForo của VNXF

Mobile/Zalo: 0906081284

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

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