jquery实现自适应banner焦点图
发布时间 - 2026-01-10 23:06:17 点击率：次效果如下：
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq自适应banner焦点图</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>
<style>
@charset "UTF-8";
/*通用css*/
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {
margin: 0;
padding: 0;
-webkit-text-size-adjust: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 12px;
font-weight: normal;
}
body > div {
margin: 0 auto;
}
div {
text-align: left;
}
a img {
border: 0;
}
body {
color: #333;
text-align: center;
font: 12px "宋体";
}
ul, ol, li {
list-style-type: none;
vertical-align: 0;
}
a {
outline-style: none;
color: #535353;
text-decoration: none;
}
a:hover {
color: #D40000;
text-decoration: none;
}
/*通用CSS结束，应用特效时，以上样式可删除*/
/* 效果CSS开始 */
.lit {
position: absolute;
z-index: 999;
margin-top: 10px;
}
.lit p {
margin-bottom: 2px;
}
.lit a:hover {
filter: alpha(opacity=80);
opacity: 0.8;
}
.wrapper {
width: 986px;
margin: 0 auto;
position: relative;
height: 390px;
}
#banner {
width: 100%;
height: 390px;
background: none;
overflow: hidden;
position: relative;
}
#banner_img {
display: block;
position: relative;
}
#banner_img li {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-position: center;
background-size: cover;
display: none;
}
/*设置背景图片-------开始*/
/*#banner_img li.item1 {
background-image: url(http://smzdqiang.com/data/attachment/forum/201609/20/161359xzxwkl82k22d08r3.jpg);
display: block;
}
#banner_img li.item2 {
background-image: url(http://smzdqiang.com/data/attachment/forum/201609/20/161359viql2criqg5aw776.jpg);
}
#banner_img li.item3 {
background-image: url(http://smzdqiang.com/data/attachment/forum/201609/20/161359eczultzb2c88mquq.jpg);
}
#banner_img li.item4 {
background-image: url(http://smzdqiang.com/data/attachment/forum/201609/20/161400d3idxa6dfao84x1l.jpg);
}
#banner_img li.item6 {
background-image: url(http://smzdqiang.com/data/attachment/forum/201609/20/161400eifr1ozgkikk99k1.jpg);
}*/
/*设置背景图片--------结束*/
#banner_img .ad_img {
position: absolute;
right: 10px;
top: 80px;
width: 506px;
height: 404px;
}
#banner_img .ad_txt {
position: absolute;
left: 10px;
top: 170px;
color: #fff;
text-shadow: 1px 1px rgba(51, 51, 51, 0.3);
}
#banner_img .ad_txt h2 {
font: bold 36px/60px Microsoft YaHei;
}
#banner_img .ad_txt a {
display: block;
width: 100px;
height: 25px;
line-height: 25px;
text-align: center;
margin-top: 10px;
background: #fff;
color: #666;
}
#banner_ctr {
position: absolute;
width: 960px;
height: 122px;
margin-left: -90px;
left: 35%;
bottom: -75px;
z-index: 1;
}
#banner_ctr ul {
width: 100%;
}
#banner_ctr li {
float: left;
display: inline-block;
height: 27px;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
.styclsa {
line-height: 27px;
background: url(http://smzdqiang.com/data/attachment/forum/201609/20/161609g5xjijj1x5lgiq4j.png) no-repeat;
height: 27px;
color: #ffffff;
font-size: 12.48px;
padding: 0px 0px 0 0px;
width: 119px;
margin: 0 auto;
overflow: hidden;
font-family: "宋体";
zoom: 1;
}
.astysa {
color: #ffffff;
font-size: 12.48px;
text-align: center;
}
#drag_ctr {
position: absolute;
top: -5px;
cursor: pointer;
left: 0px;
width: 119px;
height: 32px;
bottom: 120px;
background: url(http://smzdqiang.com/data/attachment/forum/201609/20/161611aooapbzu0da7oand.png) no-repeat;
padding: 0px 0px 0 0px;
margin: 0 auto;
overflow: hidden;
color: #fff;
filter: alpha(opacity=50);
color: #ffffff;
}
/* 效果CSS结束 */
</style>
<script>
$(function () {
var curIndex = 0;
var time = 800;
var slideTime = 6000;
var adTxt = $("#banner_img>li>div>.ad_txt");
var adImg = $("#banner_img>li>div>.ad_img");
var int = setInterval("autoSlide()", slideTime);
$("#banner_ctr>ul>li[class!='first-item'][class!='last-item']").mouseover(function () {
var ct = $(this).index("#banner_ctr>ul>li[class!='first-item'][class!='last-item']");
if (ct == 1 || ct == 0) {
ct = 0;
}
if (ct == 2 || ct == 3) {
ct = 1;
}
if (ct == 5 || ct == 4) {
ct = 2;
}
if (ct == 6 || ct == 7) {
ct = 3;
}
if (ct == 8 || ct == 9) {
ct = 4;
}
if (ct < 0) {
ct = 0;
}
show(ct);
window.clearInterval(int);
int = setInterval("autoSlide(1)", slideTime);
});
function autoSlide(ct) {
curIndex + 1 >= 5 ? curIndex = -1 : 0;
show(curIndex + 1);
}
function show(index) {
$.easing.def = "easeOutQuad";
$("#drag_ctr").stop(false, true).animate({ left: index * 120 + 0 }, time);
$("#banner_img>li").eq(curIndex).stop(false, true).fadeOut(time);
adTxt.eq(curIndex).stop(false, true).animate({ top: "340px" }, time);
adImg.eq(curIndex).stop(false, true).animate({ right: "700px" }, time);
setTimeout(function () {
$("#banner_img>li").eq(index).stop(false, true).fadeIn(time);
adTxt.eq(index).children("p").css({ paddingTop: "50px", paddingBottom: "50px" }).stop(false, true).animate({ paddingTop: "0", paddingBottom: "0" }, time);
adTxt.eq(index).css({ top: "0", opacity: "0" }).stop(false, true).animate({ top: "170px", opacity: "1" }, time);
adImg.eq(index).css({ right: "700px", opacity: "0" }).stop(false, true).animate({ right: "500px", opacity: "1" }, time);
}, 200)
curIndex = index;
}
});
</script>
</head>
<body>
<!--效果html开始-->
<div style="margin: 0px auto; width:1200px; padding:0px; ">
<div class="lit">
<p><a href="http://smzdqiang.com/quan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/162016tenownjn8wse6n8n.jpg" border="0" /></a></p>
<p><a href="http://www.smzdqiang.com/" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/162016tenownjn8wse6n8n.jpg" border="0" /></a></p>
<p><a href="http://smzdqiang.com/dataoke/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/162016tenownjn8wse6n8n.jpg" border="0" /></a></p>
</div>
</div>
<div id="banner">
<ul id="banner_img">
<li class="item1" style="display: list-item;"><a href="http://smzdqiang.com/quan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/161359xzxwkl82k22d08r3.jpg" border="0" /></a></li>
<li class="item2"><a href="http://smzdqiang.com/dataoke/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/161359viql2criqg5aw776.jpg" border="0" /></a></li>
<li class="item3"><a href="http://smzdqiang.com/quan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/161359eczultzb2c88mquq.jpg" /></a></li>
<li class="item4"><a href="http://smzdqiang.com/dataoke/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/161400d3idxa6dfao84x1l.jpg" /></a></li>
<li class="item6"><a href="http://smzdqiang.com/dataoke/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/161400eifr1ozgkikk99k1.jpg" /></a></li>
</ul>
<div id="banner_ctr">
<div id="drag_ctr">
</div>
<ul>
<li style="width:0px;"></li>
<li class="styclsa"><a href="http://smzdqiang.com/dataoke/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="astysa">活动标题1</a></li>
<li style="width:1px;"></li>
<li class="styclsa"><a href="http://smzdqiang.com/dataoke/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="astysa">活动标题2</a></li>
<li style="width:1px;"></li>
<li class="styclsa"><a href="http://smzdqiang.com/quan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="astysa">活动标题3</a></li>
<li style="width:1px;"></li>
<li class="styclsa"><a href="http://smzdqiang.com/quan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="astysa">活动标题4</a></li>
<li style="width:1px;"></li>
<li class="styclsa"><a href="http://smzdqiang.com/quan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="astysa">活动标题5</a></li>
</ul>
</div>
</div>
<!--效果html结束-->
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
# jquery
# 焦点图
# jquery自适应焦点图
# 自适应banner轮播
# jQuery实现的自适应焦点图效果完整实例
# jQuery焦点图左右转换效果
# 轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
# 基于JQuery实现图片轮播效果(焦点图)
# jQuery插件实现带圆点的焦点图片轮播切换
# 基于Jquery实现焦点图淡出淡入效果
# jQuery右侧选项卡焦点图片轮播特效代码分享
# jQuery插件bxSlider实现响应式焦点图
# jQuery焦点图轮播效果实现方法
# 基于jquery实现轮播焦点图插件
# 宋体
# 自适应
# weight
# normal
# px
# adjust
# font
# color
# size
# border
# auto
# left
# img
# form
# select
# fieldset
# textarea
# margin
# padding
# webkit
相关栏目：
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐：
Laravel如何使用Livewire构建动态组件？（入门代码）
PHP 实现电台节目表的智能时间匹配与今日/明日轮播逻辑
Laravel怎么使用Session存储数据_Laravel会话管理与自定义驱动配置【详解】
高端智能建站公司优选：品牌定制与SEO优化一站式服务
如何基于PHP生成高效IDC网络公司建站源码？
网站制作壁纸教程视频,电脑壁纸网站？
Laravel如何实现邮件验证激活账户_Laravel内置MustVerifyEmail接口配置【步骤】
Win11怎么修改DNS服务器 Win11设置DNS加速网络【指南】
音响网站制作视频教程,隆霸音响官方网站？
如何用好域名打造高点击率的自主建站？
历史网站制作软件,华为如何找回被删除的网站？
CSS3怎么给轮播图加过渡动画_transition加transform实现【技巧】
js实现点击每个li节点，都弹出其文本值及修改
齐河建站公司：营销型网站建设与SEO优化双核驱动策略
合肥制作网站的公司有哪些,合肥聚美网络科技有限公司介绍？
成都品牌网站制作公司,成都营业执照年报网上怎么办理？
轻松掌握MySQL函数中的last_insert_id()
香港服务器建站指南：免备案优势与SEO优化技巧全解析
JavaScript如何实现倒计时_时间函数如何精确控制
Win10如何卸载预装Edge扩展_Win10卸载Edge扩展教程【方法】
Laravel如何实现API资源集合？（Resource Collection教程）
如何快速重置建站主机并恢复默认配置？
小米17系列还有一款新机？主打6.9英寸大直屏和旗舰级影像
Laravel如何使用Service Provider注册服务_Laravel服务提供者配置与加载
Java遍历集合的三种方式
Laravel数据库迁移怎么用_Laravel Migration管理数据库结构的正确姿势
如何在香港服务器上快速搭建免备案网站？
用v-html解决Vue.js渲染中html标签不被解析的问题
重庆市网站制作公司,重庆招聘网站哪个好？
,南京靠谱的征婚网站？
jimdo怎样用html5做选项卡_jimdo选项卡html5实现与切换效果【指南】
如何获取免费开源的自助建站系统源码？
Laravel PHP版本要求一览_Laravel各版本环境要求对照
iOS发送验证码倒计时应用
Laravel全局作用域是什么_Laravel Eloquent Global Scopes应用指南
黑客入侵网站服务器的常见手法有哪些？
Windows10电脑怎么设置虚拟光驱_Win10右键装载ISO镜像文件
详解Android图表 MPAndroidChart折线图
Laravel中间件如何使用_Laravel自定义中间件实现权限控制
黑客如何通过漏洞一步步攻陷网站服务器？
zabbix利用python脚本发送报警邮件的方法
广州网站制作公司哪家好一点,广州欧莱雅百库网络科技有限公司官网？
Android利用动画实现背景逐渐变暗
如何在宝塔面板中修改默认建站目录？
如何在建站之星网店版论坛获取技术支持？
Laravel如何优雅地处理服务层_在Laravel中使用Service层和Repository层
如何在万网自助建站中设置域名及备案？
原生JS实现图片轮播切换效果
深圳防火门网站制作公司,深圳中天明防火门怎么编码？
Laravel如何使用.env文件管理环境变量？（最佳实践）
最新文章
Sublime怎么一键压缩JS代码 Su
sublime如何在搜索中使用正则表达式
Sublime如何设置透明窗口效果 Su
mysql如何设计商品表结构_mysql
css属性背景图不显示怎么办_通过检查路
如何使用Golang实现排序_Golan
农历闰月是怎么回事_为合回归年加一月调整
塑造《刺客信条》艾吉奥传奇的编剧离开育碧
1英里等于多少公里 1mile和km的换
css grid布局中行和列是如何定义的
PS批量旋转和翻转图片，快速校正图片方向
C# Swagger UI自定义方法 C
OPPO手机九宫格和全键盘怎么切换_OP
Go语言如何实现用户登录注册_Golan
1节飞行速度多少公里每小时 1节是多少公
纸嫁衣8千子树第五章庙门怎么开启 庙门
Laravel 多行数据编辑表单中实现逐
明日之后如何提升钓鱼等级 明日之后提升钓
支付宝怎样查年度账单_支付宝年度账单查看
C# 多线程UI更新Dispatcher