一个简单的基于jQuery的焦点图（幻灯片）代码

最新推荐文章于 2023-02-09 08:24:43 发布

weixin_30242907

最新推荐文章于 2023-02-09 08:24:43 发布

阅读量216

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/li0566/p/li2566.html

本文介绍了一种使用jQuery实现的焦点图插件，通过横向循环滚动的方式展示多张图片，并具备自动播放、暂停功能及指示器切换效果。该插件能够适配不同屏幕尺寸，适用于网页设计中的轮播图需求。

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

本代码实现的是横向循环滚动，

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery的焦点图（幻灯片）</title>
<script src="http://libs.useso.com/js/jquery/1.11.1-rc2/jquery.min.js"></script>
<style type="text/css">
/*
引样式写法不支持IE8.0以下，可以简单修改下。不使用“>”即可。
*/
.slide {
	width: 510px;
	height: 260px;
	overflow: hidden;
	position: relative;
}
.slide>div {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;
}
.slide>div>a {
	display: inline-block;
	float: left;
	width: 510px;
	height: 260px;
	overflow: hidden;
}
.slide>ul {
	width: 76px;
	margin: 0 auto;
	position: absolute;
	z-index: 6;
	left: 20px;
	bottom: 16px;
}
.slide>ul>li {
	width: 13px;
	height: 13px;
	overflow: hidden;
	background: url(../images/index.png) no-repeat -350px -85px;
	float: left;
	display: inline;
	margin: 0 3px;
	cursor: pointer;
}
.slide>ul>li.on {
	background-position: -370px -85px;
}
</style>
</head>
<body>
<div class="slide" id="slide">
	<div class="clearfix">
<a href="" title="" target="_blank"><img src="http://www.maiqiji.com/statics/uploads/shopimg/20150212/99189163731504.jpg" width="510" height="260"></a>
<a href="" title="" target="_blank"><img src="http://www.maiqiji.com/statics/uploads/shopimg/20150212/86068444730745.jpg" width="510" height="260"></a>
<a href="" title="" target="_blank"><img src="http://www.maiqiji.com/statics/uploads/shopimg/20150212/79618951727105.jpg" width="510" height="260"></a>
<a href="" title="" target="_blank"><img src="http://www.maiqiji.com/statics/uploads/shopimg/20150212/85264284696628.jpg" width="510" height="260"></a>
<a href="" title="" target="_blank"><img src="http://www.maiqiji.com/statics/uploads/shopimg/20150212/55074145695986.jpg" width="510" height="260"></a> </div>
	<ul class="clearfix">
		<li> </li>
		<li> </li>
		<li> </li>
		<li> </li>
	</ul>
</div>
<script type="text/javascript" charset="utf-8">
$(function($){
//幻灯片
	var len = $("#slide>div>a").length,
		strbtn = '',
		index = 0,
		picTimer;
	$("#slide>div").width(len*510);
	//按钮居中
	$("#slide>ul").css({'width':len*19+'px','left':(510-(len*19))/2+'px'});
	//按钮绑定事件
	$("#slide>ul>li").mouseover(function() {
		index = $("#slide>ul>li").index(this);
		setSlide(index);
	}).eq(0).trigger("mouseover");
	//鼠标移入停止
	$("#slide").hover(
		function(){
			clearInterval(picTimer);
		},
		function(){
			picTimer = setInterval(function(){
				setSlide(index);
				index++;
				if(index == len) {index = 0;}
			},4000);
		}
	).trigger("mouseleave");
});
function setSlide(index){
	$("#slide>div").stop(true,false).animate({left: '-'+ index*510 +'px'}, "slow");
	$("#slide>ul>li").removeClass('on').eq(index).addClass('on');
}

</script>
</body>
</html>

　　2015.3.3以此为基础修改渐变样式。

转载于:https://www.cnblogs.com/li0566/p/li2566.html