jQuery实现序列号(序列点)型自动图片轮播

最新推荐文章于 2021-06-04 10:02:37 发布

探寻时间

最新推荐文章于 2021-06-04 10:02:37 发布

阅读量928

点赞数

分类专栏： JavaScript 文章标签：图片轮播

本文链接：https://blog.csdn.net/SeekerTime/article/details/62047411

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果图：

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>序列号点击型的图片轮播</title>
	<style>
		*{
			margin:0;padding:0;
		}
		.container{
			width:478px;height:286px;border:1px solid #666;position: relative;overflow: hidden;
			margin:50px auto;font-family: "Microsoft Yahei";
		}
		.img_list img{
			border:0;
		}
		.img_list a{
			position: absolute; /*让四张图片都叠在一起*/
		}
		.tit_bg{
			position: absolute;bottom:0;height:30px;width:478px;background-color:#000;filter:Alpha(opacity=30);cursor:pointer;z-index: 1000;
		}
		.tit{
			position: absolute;bottom: 0;left:5px;height:22px;color:#fff;z-index: 1001;cursor:pointer;
		}
		ol{
			position: absolute;bottom:3px;right:5px;list-style: none;border:1px solid #fff;filter:Alpha(opacity=80);opacity:0.8;z-index: 1002;
		}
		ol li{
	       display:block;float:left;padding:0 8px;color:#fff;border:1px solid #e5eaff;background:#6f4f67;cursor:pointer;
		}
		ol li.on{
			background-color: #900
		}
	</style>
</head>
<body>
	<div class="container" id="carousel">
			<!-- 底部标题背景-->
		<div class="tit_bg"></div>
			<!-- 底部标题 -->
		<div class="tit"></div>
			<!-- 图片列表 -->
		<div class="img_list">
			<a href="#" target="_blank">
				<img src="imgs/p1.jpg" title="草莓" alt="caomei">
			</a>
			<a href="#" target="_blank">
				<img src="imgs/p3.jpg" title="苹果" alt="pingguo">
			</a>
			<a href="#" target="_blank">
				<img src="imgs/p4.jpg" title="桃子" alt="taozi">
			</a>
			<a href="#" target="_blank">
				<img src="imgs/p5.jpg" title="葡萄" alt="putao">
			</a>
		</div>
			<!-- 序列号或点 -->
		<ol>
			<li class="on">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ol>
	</div>


	<!-- JS -->
	<script src="js/jquery.min.js"></script>
	<script>
		var t=n=0,count;
		$(document).ready(function(){
			count = $('.img_list a').length;

			//初始化样式
			$('.img_list a:not(:first-child)').hide();

			$('.tit').html( $('.img_list a:first-child').find('img').attr('title'));

			$('.tit').click(function(){
				window.open($('.img_list a:first-child').attr('href'),'_blank')
			});

			// 序列点点击事件
			$('ol li').click(function(){
				var i = $(this).text() -1;   
				n = i;
				if(i >= count) { return };
				$('.tit').html($('.img_list a').eq(i).find('img').attr('title'));
				$('.tit').unbind().click(function(){
					window.open($('.img_list a').eq(i).attr('href'),'_blank')
				});
				$('.img_list a').filter(':visible').fadeOut(500).parent().children().eq(i).fadeIn(1000);
				document.getElementById('carousel').style.background = '';
				$(this).toggleClass('on');
				$(this).siblings().removeAttr('class');
			});

			t = setInterval('showAuto()',4000);
			$('.container').hover(function(){
				clearInterval(t);
			},function(){
				t = setInterval('showAuto()',4000);
			});
		});

		function showAuto(){
			 n = n>=(count-1) ? 0 : ++n;
			 $('.container li').eq(n).trigger('click');
		}
	</script>
</body>
</html>

探寻时间

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现序列号(序列点)型自动图片轮播

效果图：完整代码如下：序列号点击型的图片轮播 *{ margin:0;padding:0; } .container{ width:478px;height:286px;border:1px solid #666;position: relative;overflow: hidden; margin:50px auto;font-famil
复制链接

扫一扫