jQuery+html5+js轮播图_jquery h5 商品详情图轮播-优快云博客

本文链接：https://blog.youkuaiyun.com/yelang0111/article/details/76647903

本文介绍了两种不同的轮播图实现方法，第一种通过更改单张图片的源达到轮播效果，第二种使用列表项切换并结合淡入淡出实现轮播效果。文中详细展示了两种方法的HTML、CSS及JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个是两个轮播图代码用的图片是一样的效果不一样：下载链接：http://download.youkuaiyun.com/detail/yelang0111/9920578

1，效果图：

下面一个效果图

2，效果图：

第一个实现方式：

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js">
		</script>
		<script type="text/javascript" src="js/index.js">
		</script>
	</head>
	<body>
		<img id="myImg" src="img/1.jpg"/>
	</body>
</html>

js代码：

$(function(){
	
	changeImg("#myImg","img/");
	 var obj= setInterval("changeImg('#myImg','img/')",300);
	 $("#myImg").mouseover(function(){
	 	window.clearInterval(obj);
	 });
	 
	 $("#myImg").mouseout(function(){
	 	obj= setInterval("changeImg('#myImg','img/')",300);
	 	
	 });
	 
});
var count=1;
function changeImg(id,srcUrl){
	$(id).attr("src",srcUrl+count+".jpg");
	count++;
	if(count>6){
		count=1;
	}
}

注意样式的引入还有js的。

第二个实现方式：

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="../js/index.js" defer="defer"></script>
		<link rel="stylesheet" type="text/css" href="../css/index.css"/>
	</head>
	<body>
		
		<div class="wrapper">
			<ul>
					<li><img src="../img/1.jpg"/></li>
					<li><img src="../img/2.jpg"/></li>
					<li><img src="../img/3.jpg"/></li>
					<li><img src="../img/4.jpg"/></li>
					<li><img src="../img/5.jpg"/></li>
					<li><img src="../img/6.jpg"/></li>
			</ul>
			<ol>
				<li class="current">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ol>
		</div>
		
		
	</body>
</html>

css代码：

*{
	margin: 0;
	padding: 0;
}

ul,ol{
	list-style: none;
}

.wrapper{
	width: 670px;
	height: 240px;
	margin: 100px auto;
	overflow: hidden;
	position: relative;
}

ol{
	position: absolute;
	right: 0;
	bottom: 10px;
	width: 190px;
}

ol li{
	float: left;
	width: 20px;
	height: 20px;
	margin: 0 5px;
	text-align: center;
	border-radius: 50%;
	cursor: default;
	background-color: #abc;
}

ol li.current{
	background-color: pink;
}

js代码：

$(function(){
	$(".wrapper ol li").mouseenter(function(){
		$(this).addClass("current").siblings().removeClass("current");
		$(".wrapper ul li").eq($(this).index()).fadeIn(1000).siblings().fadeOut();
	});
	
});

源代码下载：http://download.youkuaiyun.com/detail/yelang0111/9920578

这里有几个属性说下一，

mouseenter----鼠标经过元素的事件
addClass-----向得到的元素添加样式，如上面的就是给当前标签添加一个.current样式，
removeClass---这个是移出标签的样式current
siblings---这个属性的意思是除了当前选中的元素外的其他元素，这里我把标签称为了元素，习惯了知道就行了。
eq----是得到标签下标和index一起使用的多
fadeIn--是淡入，一般用在图片数字的多
fadeOut--淡出。