南强小屋 Design By 杰米
本文实例讲述了jQuery实现的自适应焦点图效果。分享给大家供大家参考，具体如下：
运行效果截图如下：
具体代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>焦点图</title>
<style>
* {
padding: 0;
margin: 0;
}
img {
vertical-align: top;
border: 0;
}
li {
list-style: none;
}
#focus-banner {
position: relative;
width: 100%;
overflow: hidden;
}
#focus-banner-list {
position: relative;
}
#focus-banner-list li {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
#focus-banner-list li img {
width: 100%;
}
.focus-banner-img {
display: block;
}
#focus-banner-list .focus-banner-text {
position: absolute;
left: 50%;
top: 0;
width: 1000px;
height: 100%;
margin-left: -500px;
text-align: center;
color: #fff;
font-size: 16px;
text-align: center;
}
#focus-banner .focus-handle {
position: absolute;
top: 50%;
margin-top: -40px;
z-index: 100;
display: block;
width: 80px;
height: 80px;
background-image:url(images/focus_handle.png);
}
#next-img {
left: 0;
}
#next-img {
left: 50px;
background-position: 0 0;
}
#next-img:hover {
background-position: 0 -80px;
}
#prev-img {
right: 0;
}
#prev-img {
right: 50px;
background-position: -80px 0;
}
#prev-img:hover {
background-position: -80px -80px;
}
#focus-bubble {
position: absolute;
left: 50%;
bottom: 10px;
z-index: 999;
}
#focus-bubble li {
float: left;
width: 10px;
height: 10px;
margin: 0 5px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border: 1px #fff solid;
cursor: pointer;
}
#focus-bubble li.current {
background-color: #fff;
}
</style>
</head>
<body>
<div id="focus-banner">
<ul id="focus-banner-list">
<li>
<a href="#" class="focus-banner-img">
<img src="/UploadFiles/2021-04-02/banner2.jpg">
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
标签：
jQuery,焦点图
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无jQuery实现的自适应焦点图效果完整实例的评论...