如何在html javascript中创建Read More Link

Question

我想在我的页面中创建更多链接。
老实说，我已经从互联网上复制了代码，所以它有点凌乱。对不起，我很抱歉。

我提到“readmore.js”，“jquery-expander-master”，“jquery.shorten-master”。但它对我没有帮助:(。

这是我的代码，我在Javascript中非常新。请帮帮我。

<div id="main" >
        <div id="main-content">

               <div id="promo-cycle" class="cycle-slideshow  "
                data-cycle-fx="fade"
                data-cycle-timeout=4000
                data-cycle-slides="> div.promo"
                data-cycle-caption="#custom-cycle-caption "
                data-cycle-caption-template="<span class='caption-title '>{{title}}</span><br />                <span class='caption-desc comment-small'>{{desc}}</span>"
                data-cycle-center-horz=true
                data-cycle-center-vert=true
            >   
                <div class="cycle-pager "></div>

            </div>
        </div>
    </div>


                <div id="custom-cycle-caption"></div>


             </div>
        </div>
    </div>


JavaScript
var promos = [
    '<div class="promo effect1"  data-title="MarinaOffice" data-desc="Complete marina and property management software solution designed for marina, resort, and property management industries. A suite of products providing a complete management solution for all business areas including storage,billing, retail, restaurant, rental, fuel management, time and attendance, mobile and accounting. All of which includes a direct integration with the very popular QuickBooks financial accounting solution"><a href="#" ><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBhQSEBQUEhQWFBQWFBQXFBUVFRQVFRgVFBQVFBQUFBYYHSYeFxkjGRQUHy8gIycpLCwsFx4xNTAqNSYrLCkBCQoKDgwOGg8PGiolHyQsLyksLCwsLCwsLCwsLCwpLCwsLCwsLCksLCwsLCwpLCwsLCksLCwsLCwsLCwsLCwsLP/AABEIAKgBLAMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAADAAECBAUGBwj/xABFEAABAwMBBAYIAwYFAgcBAAABAAIRAxIhMQQFQVETImFxgZEGFDKhscHR8EJS4QcjYnKS8RUWM4KiU9JUg5OjssLyF//EABoBAAMBAQEBAAAAAAAAAAAAAAABAgMEBQb" alt="MarinaOffice"/></a></div>','<div class="promo effect1 " data-title="Maritime Software Suite" data-desc="Vessel fleet management software solution including invoicing, dispatching, maintenance, data collection, and training. To manage slips, pontoons, moorings, marinas, yacht clubs of all sizes Vessel fleet management software solution including invoicing, dispatching, maintenance, data collection, and training. To manage slips, pontoons, moorings, marinas, yacht clubs of all sizes"><a href="#"><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBhQSEBQUEhQWFBQWFBQXFBUVFRQVFRgVFBQVFBQUFBYYHSYeFxkjGRQUHy8gIycpLCwsFx4xNTAqNSYrLCkBCQoKDgwOGg8PGiolHyQsLyksLCwsLCwsLCwsLCwpLCwsLCwsLCksLCwsLCwpLCwsLCksLCwsLCwsLCwsLCwsLP/AABEIAKgBLAMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAADAAECBAUGBwj/xABFEAABAwMBBAYIAwYFAgcBAAABAAIRAxIhMQQFQVETImFxgZEGFDKhscHR8EJS4QcjYnKS8RUWM4KiU9JUg5OjssLyF//EABoBAAMBAQEBAAAAAAAAAAAAAAABAgMEBQb" alt="MAritime Software Suit"/></a></div>',];

 var totalSlides = promos.length; 

var fillSlideshow = function() {
    for (var i=0; i < totalSlides; i++) {
        $("#promo-cycle").cycle('add', promos[i]);
    }
}

var emptySlideshow = function() {
    for (var i=0; i < totalSlides; i++) {
        $("#promo-cycle").cycle('remove', i);
    }
}

$(document).ready(function() {
    fillSlideshow();    
    var pleaseWork = 0;
    //alert(pleaseWork);
    $("#directions-button").button();

    var promoHover = false;
    $("#promo-cycle").hover(function() { promoHover = true; }, function() { promoHover = false; });

    var resetSlideshow = function() {
        justHovered = false;
        $("#promo-cycle").cycle('remove', totalSlides); //remove the last slide 
        console.log("removeSlide - " + totalSlides);
        $("#promo-cycle").cycle('resume'); //resume the paused slide show
        $(".cycle-pager").show(); //reveal the cycle pager
        mediaCenterHover = false;
    }

    var waiting;

    $("#promo-cycle").on("hover", ".sub-menu-item", function() {
        //alert("here");
        $(currentSlide).hide();
        console.log("Hiding: " + currentSlide);
        currentSlide = "#" + $(this).attr("infoSlide");
        $(currentSlide).show();
        console.log("Showing: " + currentSlide);
    });
});

$(document).ready(function() {

    $(".comment").shorten();

    $(".comment-small").shorten({showChars: 100});

 });


css
/* Color List:*/


#main {
    overflow: hidden;
    float:right;
    margin-right:20px;

}

#promo-cycle {
    /* Was 400x838 */
    height: 200px;
    width: 300px;
    border: 1px solid #146347;
    border-radius: 8px;
    box-shadow: 5px 5px 3px #888888;
    padding: 15px;

    float:right;
    position: relative;
}

.promo {
    width: 300px;
    height: 200px;
    margin: 15px;
}

.promo img {
    height: 200px;
    width: 300px;
}




/* pager */
.cycle-pager { 
    float:right;  text-align: center; width: 100%; z-index: 500; position: absolute; bottom: 40px; height: 16px;
}
.cycle-pager span { 
    font-family: arial; font-size: 50px; width: 16px; height: 16px; 
    display: inline-block; color: #ddd; cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #822819;}
.cycle-pager > * { cursor: pointer;}








#custom-cycle-caption {
    width: 350px;
 float:left;
    width:60%;
    text-align: center;
}


.caption-title {
    color: #999;
    font-size: 24px;
    font-variant: small-caps;
}

.caption-desc {
    color: #999;
    font-size: 18px;


}

我不知道如何使用小提琴。我刚试过但是没有显示任何结果[link]。1

页面结果 http://postimg.org/image/hemmei3gf/

谢谢和问候!!