兼容IE7、IE8的轮播图

最新推荐文章于 2024-10-01 17:17:19 发布

江上挽风T0

最新推荐文章于 2024-10-01 17:17:19 发布

阅读量219

点赞数 4

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_48195664/article/details/139632349

版权

本文介绍了如何在不支持现代浏览器特性的IE7和IE8中创建轮播图，强调了必须引入jQuery库的重要性，并提供了HTML、CSS和JavaScript的相关代码示例。

摘要由CSDN通过智能技术生成

记得要引入Jquery文件

HTML部分

<div class="gsywbox">
		<ul class="gsywimg">
			<li>
				<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/35a2239e10e392af73b6b7a737a039d6.jpg?w=632&h=340">
			</li>
			<li>
				<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/50beb6e77e316ff0637d79ad1869572e.jpg?w=632&h=340">
			</li>
			<li>
				<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340">
			</li>
		</ul>
		<ul class="gsywNum"></ul>
	</div>

css部分

.gsywimg {
			list-style: none;
			overflow: hidden;
			height: 250px;
			margin-left: -10px
		}

		.gsywbox {
			width: 500px;
			height: 250px;
			position: relative;
		}

		.gsywbox .gsywimg li {
			position: absolute;
			left: 0;
			top: 0;
			display: none;
		}

		.gsywimg li img {
			width: 100%;
			height: 220px;
			padding: 13px;
		}

		.gsywNum {
			position: absolute;
			bottom: 0;
			right: 3px;
			z-index: 99;
		}

		.gsywNum li {
			float: left;
			width: 18px;
			margin-left: 1px;
			background: #000;
			color: #fff;
			filter: alpha(opacity=75);
			padding: 1px;
		}

		.gsywNum li:hover {
			cursor: pointer;
		}

JS部分

$(function () {
	var size = $(".gsywimg li").length;
	for (var i = 1; i <= size; i++) {
		var li = "<li>" + i + "</li>";
		$(".gsywNum").append(li);
	};
	$(".gsywimg li").eq(0).show();
	$(".gsywNum li").eq(0).addClass("active");
	$(".gsywNum li").mousedown(function () {
		$(this).addClass("active").siblings().removeClass("active");
		var index = $(this).index();
		i = index;
		$(".gsywimg li").eq(index).fadeIn(300).siblings().fadeOut(300);

		$(".gsywNum li").css('background', '#000')
		$(".gsywNum li").eq(i).css('background', 'red')
	})
	var i = 0;
	var t = setInterval(move, 4000);
	function moveLeft() {
		i--;
		if (i == -1) {
			i = size - 1;
		}

		$(".gsywNum li").eq(i - 1).css('background', '#000')
		$(".gsywNum li").eq(i).css('background', 'red')

		$(".gsywNum li").eq(i).addClass("active").siblings().removeClass("active");
		$(".gsywimg li").eq(i).fadeIn(300).siblings().fadeOut(300);
	}
	function move() {
		i++;
		if (i == size) {
			i = 0;
		}
		$(".gsywNum li").eq(i - 1).css('background', '#000')
		$(".gsywNum li").eq(i).css('background', 'red')

		$(".gsywNum li").eq(i).addClass("active").siblings().removeClass("active");
		$(".gsywimg li").eq(i).fadeIn(300).siblings().fadeOut(300);
	}
	$(".gsywbox").hover(function () {
		clearInterval(t);
	}, function () {
		t = setInterval(move, 4000)
	})
})