js jquery 轮播图的使用方法（jquery.SuperSlide）

zhangzuying1026

于 2023-09-26 15:01:07 发布

阅读量402

点赞数

文章标签： javascript jquery 开发语言

zhangzuying

本文链接：https://blog.csdn.net/weixin_48138187/article/details/133310215

版权

网站顶部轮播图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*/

基础效果：

1、引用jQuery.js 和 jquery.SuperSlide.js

因为SuperSlide是基于jQuery的插件，所以前提必须先引用jQuery，再引用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、编写HTML

以下是默认的HTMl结构，分别是 “.hd” 里面包含ul， “.bd” 里面包含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、编写CSS，为HTML赋予样色

认真检查您的css，保证兼容大部分浏览器前提下再调用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、调用SuperSlide

在本例中，请在 “.slideTxtBox” div结束后立刻调用 SuperSlide，这样会得到最好的效果，避免整个页面加载后再调用 SuperSlide；

因为是默认HTML结构，所以参数都为默认值，不用填写titCell、mainCell等。

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

更多基础效果：superslide-More-Demo

zhangzuying1026

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫