jQuery实现的自适应焦点图效果完整实例
更新时间：2016年08月24日 11:06:47 作者：onestopweb
这篇文章主要介绍了jQuery实现的自适应焦点图效果,结合完整实例形式分析了jQuery事件响应及动态操作页面元素属性的相关技巧,需要的朋友可以参考下
本文实例讲述了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="images/banner2.jpg" alt="">
</a>
<div class="focus-banner-text">
<p>这是一句广告语</p>
</div>
</li>
<li>
<a href="#" class="focus-banner-img">
<img src="images/banner3.jpg" alt="">
</a>
<div class="focus-banner-text">
<p>这是二句广告语</p>
</div>
</li>
<li>
<a href="#" class="focus-banner-img">
<img src="images/banner4.jpg" alt="">
</a>
<div class="focus-banner-text">
<p>这是三句广告语</p>
</div>
</li>
<li>
<a href="#" class="focus-banner-img">
<img src="images/banner5.jpg" alt="">
</a>
<div class="focus-banner-text">
<p>这是四句广告语</p>
</div>
</li>
</ul>
<a href="javascript:;" id="next-img" class="focus-handle"></a>
<a href="javascript:;" id="prev-img" class="focus-handle"></a>
<ul id="focus-bubble"></ul>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script>
$(function(){
var focusBanner=function(){
var $focusBanner=$("#focus-banner"),
$bannerList=$("#focus-banner-list li"),
$focusHandle=$(".focus-handle"),
$bannerImg=$(".focus-banner-img"),
$nextBnt=$("#next-img"),
$prevBnt=$("#prev-img"),
$focusBubble=$("#focus-bubble"),
bannerLength=$bannerList.length,
_index=0,
_timer="";
var _height=$(".focus-banner-img").find("img").height();
$focusBanner.height(_height);
$bannerImg.height(_height);
$(window).resize(function(){
window.location.reload()
});
for(var i=0; i<bannerLength; i++){
$bannerList.eq(i).css("zIndex",bannerLength-i);
$focusBubble.append("<li></li>");
}
$focusBubble.find("li").eq(0).addClass("current");
var bubbleLength=$focusBubble.find("li").length;
$focusBubble.css({
"width":bubbleLength*22,
"marginLeft":-bubbleLength*11
});//初始化
$focusBubble.on("click","li",function(){
$(this).addClass("current").siblings().removeClass("current");
_index=$(this).index();
changeImg(_index);
});//点击轮换
$nextBnt.on("click",function(){
_index++
if(_index>bannerLength-1){
_index=0;
}
changeImg(_index);
});//下一张
$prevBnt.on("click",function(){
_index--
if(_index<0){
_index=bannerLength-1;
}
changeImg(_index);
});//上一张
function changeImg(_index){
$bannerList.eq(_index).fadeIn(250);
$bannerList.eq(_index).siblings().fadeOut(200);
$focusBubble.find("li").removeClass("current");
$focusBubble.find("li").eq(_index).addClass("current");
clearInterval(_timer);
_timer=setInterval(function(){$nextBnt.click()},5000)
}//切换主函数
_timer=setInterval(function(){$nextBnt.click()},5000)
}();
})
</script>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
下面小编就为大家带来一篇浅谈jQuery双事件多重加载的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
jQuery实现限制textarea文本框输入字符数量的方法
这篇文章主要介绍了jQuery实现限制textarea文本框输入字符数量的方法,涉及jQuery键盘事件及页面元素的相关操作技巧,需要的朋友可以参考下2015-05-05
下面小编就为大家带来一篇Jquery根据浏览器窗口改变调整大小的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
一般的表单校验都是直接注册在页面上的匿名函数，导致只能通过固定的提交方式触发表单校验，如果想自定义一个按钮触发表单校验如何实现呢，下面通过本文给大家详细介绍2016-12-12
基于jquery的二级联动菜单实现代码，脚本之家简单整理了几种。需要的朋友可以参考下，主要是思路2011-04-04
jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便，本篇文章给大家介绍jquery效果使用详解，感兴趣的朋友一起学习吧2015-11-11
下面小编就为大家带来一篇jq源码解析之绑在$,jQuery上面的方法(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
jQuery UI工具提示框部件Tooltip Widget
这篇文章介绍了jQuery UI工具提示框部件Tooltip Widget，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行，下面有个不错的解决方法2014-01-01
这篇文章主要为大家介绍了jQuery实现点击按钮滚动元素功能详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
最新评论