How to use js jquery carousel chart (jquery.SuperSlide)

Website top carousel demo

<!--顶部轮播图start-->
			<div class="fd-fangshan-lbtDiv">
				<img src="/${res}/img/new-lbt-title.png" class="fd-new-lbt-title">
				<div class="fd-fangshan-lbt">
					<div class="bd">
						<ul class="fd-fangshan-lbt-img1"></ul>
						<ul class="fd-fangshan-lbt-img2"></ul>
						<ul class="fd-fangshan-lbt-img3"></ul>
					</div>
					<script>
						// banner轮播图
						jQuery(".fd-fangshan-lbt").slide({
      
      
							autoPlay: true,
							easing:"easeInQuint",
							delayTime:700
						});
					</script>
				</div>
			</div>
<!--顶部轮播图end-->

/*顶部轮播图start*/
.fd-fangshan-lbtDiv{
	position: relative;
}
.fd-new-lbt-title{
	position: absolute;
	top: 30px;
}

.fd-fangshan-lbt{
	position: absolute;
	width: 500px;
	height: 160px;
	left: 530px;
}
.fd-fangshan-lbt .bd ul{
	width: 500px;
	height: 160px;
}
.fd-fangshan-lbt-img1{
	background: url('../img/new-lbt-one.png') no-repeat;
}
.fd-fangshan-lbt-img2{
	margin-left: 48px;
	background: url('../img/new-lbt-two.png') no-repeat;
}
.fd-fangshan-lbt-img3{
	margin-left: 56px;
	background: url('../img/new-lbt-three.png') no-repeat;
}
/*顶部轮播图end*/

Basic effect:

1. Reference jQuery.js and jquery.SuperSlide.js

Because SuperSlide is a plug-in based on jQuery, the prerequisite must be to reference jQuery first, and then reference SuperSlide.

<head>
    <script type="text/javascript" src="../jquery1.42.min.js"></script>
    <script type="text/javascript" src="../jquery.SuperSlide.2.1.3.js"></script>
</head>

2. Write HTML

The following are the default HTMl structures, which are ".hd" containing ul and ".bd" containing ul.

<div class="slideTxtBox">
    <div class="hd">
        <ul><li>教育</li><li>培训</li><li>出国</li></ul>
    </div>
    <div class="bd">
        <ul>
            <li><a href="http://www.SuperSlide2.com" target="_blank">SuperSlide2.0正式发布！</a></li>
            ...
        </ul>
        <ul>
            <li><a href="http://www.SuperSlide2.com" target="_blank">名师教作文：３妙招巧写高分</a></li>
            ...
        </ul>
        <ul>
            <li><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>
            ...
        </ul>
    </div>
</div>

3. Write CSS to give color to HTML

Check your css carefully to ensure it is compatible with most browsers before calling SuperSlide

.slideTxtBox{ width:450px; border:1px solid #ddd; text-align:left;  }
.slideTxtBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 20px; border-bottom:1px solid #ddd;  position:relative; }
.slideTxtBox .hd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px;   }
.slideTxtBox .hd ul li{ float:left; padding:0 15px; cursor:pointer;  }
.slideTxtBox .hd ul li.on{ height:30px;  background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
.slideTxtBox .bd ul{ padding:15px;  zoom:1;  }
.slideTxtBox .bd li{ height:24px; line-height:24px;   }
.slideTxtBox .bd li .date{ float:right; color:#999;  }

4. Call SuperSlide

In this example, please call SuperSlide immediately after the ".slideTxtBox" div ends. This will get the best effect and avoid calling SuperSlide after the entire page is loaded;

Because it is the default HTML structure, the parameters are all default values, and there is no need to fill in titCell, mainCell, etc.

<script type="text/javascript">jQuery(".slideTxtBox").slide(); </script>

How to use js jquery carousel chart (jquery.SuperSlide)

Website top carousel demo

Basic effect:

1. Reference jQuery.js and jquery.SuperSlide.js

Because SuperSlide is a plug-in based on jQuery, the prerequisite must be to reference jQuery first, and then reference SuperSlide.

2. Write HTML

The following are the default HTMl structures, which are ".hd" containing ul and ".bd" containing ul.

3. Write CSS to give color to HTML

Check your css carefully to ensure it is compatible with most browsers before calling SuperSlide

4. Call SuperSlide

In this example, please call SuperSlide immediately after the ".slideTxtBox" div ends. This will get the best effect and avoid calling SuperSlide after the entire page is loaded;

Because it is the default HTML structure, the parameters are all default values, and there is no need to fill in titCell, mainCell, etc.

More basic effects: superslide-More-Demo

Guess you like