兼容ie8的轮播图

最新推荐文章于 2021-06-16 05:07:15 发布

原创最新推荐文章于 2021-06-16 05:07:15 发布 · 430 阅读

2 ·

CC 4.0 BY-SA版权

小demo 专栏收录该内容

32 篇文章

订阅专栏

JS插件：http://www.superslide2.com/param.html

效果图：
在这里插入图片描述

示例代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Content-Language" content="zh-CN">
	<meta name="Keywords" content="SuperSlide,jQuery焦点图/幻灯片">
	<meta name="Description"
		content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
	<title>SuperSlide - 焦点图/幻灯片</title>
	<script type="text/javascript" src="../jquery1.42.min.js"></script>
	<script type="text/javascript" src="../jquery.SuperSlide.2.1.3.js"></script>
</head>

<body>
	<style type="text/css">
		/* css 重置 */
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		body {
			background: #fff;
			font: normal 12px/22px 宋体;
		}

		img {
			border: 0;
		}

		a {
			text-decoration: none;
			color: #333;
		}

		/* 本例子css */
		.slideBox {
			width: 450px;
			height: 230px;
			overflow: hidden;
			position: relative;
			border: 1px solid #ddd;
		}

		.slideBox .hd {
			height: 15px;
			overflow: hidden;
			position: absolute;
			right: 5px;
			bottom: 5px;
			z-index: 1;
		}

		.slideBox .hd ul {
			overflow: hidden;
			zoom: 1;
			float: left;
		}

		.slideBox .hd ul li {
			float: left;
			margin-right: 2px;
			width: 15px;
			height: 15px;
			line-height: 14px;
			text-align: center;
			background: #fff;
			cursor: pointer;
		}

		.slideBox .hd ul li.on {
			background: #f00;
			color: #fff;
		}

		.slideBox .bd {
			position: relative;
			height: 100%;
			z-index: 0;
		}

		.slideBox .bd li {
			zoom: 1;
			vertical-align: middle;
		}

		.slideBox .bd img {
			width: 450px;
			height: 230px;
			display: block;
		}

		/* 下面是前/后按钮代码，如果不需要删除即可 */
		.slideBox .prev,
		.slideBox .next {
			position: absolute;
			left: 3%;
			top: 50%;
			margin-top: -25px;
			display: block;
			width: 32px;
			height: 40px;
			background: url(images/slider-arrow.png) -110px 5px no-repeat;
			filter: alpha(opacity=50);
			opacity: 0.5;
		}

		.slideBox .next {
			left: auto;
			right: 3%;
			background-position: 8px 5px;
		}

		.slideBox .prev:hover,
		.slideBox .next:hover {
			filter: alpha(opacity=100);
			opacity: 1;
		}

		.slideBox .prevStop {
			display: none;
		}

		.slideBox .nextStop {
			display: none;
		}

		.title {
			position: absolute;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.4);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);
			line-height: 40px;
			width: 100%;
			text-align: center;
		}
	</style>

	<div id="slideBox" class="slideBox">
		<div class="hd">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>
		<div class="bd">
			<ul>
				<li><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" alt="1效果图" /></a>
				</li>
				<li><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" alt="2效果图" /></a>
				</li>
				<li><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" alt="3效果图" /></a>
				</li>
			</ul>
		</div>

		<!-- 下面是前/后按钮代码，如果不需要删除即可 -->
		<a class="prev" href="javascript:void(0)"></a>
		<a class="next" href="javascript:void(0)"></a>
		<div class="title">
			tiaoti
		</div>

	</div>

	<script type="text/javascript">
		jQuery(".slideBox").slide({
			mainCell: ".bd ul",
			autoPlay: true,
			effect: "leftLoop",
			startFun: function (i, c, slider, titCell, mainCell, targetCell, prevCell, nextCell) {
				jQuery(".title").text(jQuery(".bd ul li").eq(i + 1).find("img").attr("alt"))
				// debugger
			}
		});
	</script>



</body>

</html>