jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果


Posted in Javascript onJune 27, 2013
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动</title> 
<meta name="description" content="jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换" /> 
<style type="text/css"> 
*{margin:0;padding:0;} 
body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;} 
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} 
.clearfix{zoom:1;} 
ul,li{list-style:none;} 
img{border:0;} 
.wrapper{width:800px;margin:0 auto;padding-bottom:50px;} 
h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;} 
/* focus */ 
#focus{width:800px;height:280px;overflow:hidden;position:relative;} 
#focus ul{height:380px;position:absolute;} 
#focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#000;} 
#focus ul li div{position:absolute;overflow:hidden;} 
#focus .btnBg{position:absolute;width:800px;height:20px;left:0;bottom:0;background:#000;} 
#focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;} 
#focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;} 
#focus .btn span.on{background:#fff;} 
#focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(img/sprite.png) no-repeat 0 0;cursor:pointer;} 
#focus .pre{left:0;} 
#focus .next{right:0;background-position:right top;} 
</style> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> 
<script type="text/javascript"> 
$(function() { 
var sWidth = $("#focus").width(); //获取焦点图的宽度(显示面积) 
var len = $("#focus ul li").length; //获取焦点图个数 
var index = 0; 
var picTimer; //以下代码添加数字按钮和按钮后的半透明条,还有上一页、下一页两个按钮 
var btn = "<div class='btnBg'></div><div class='btn'>"; 
for(var i=0; i < len; i++) { 
btn += "<span></span>"; 
} 
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>"; 
$("#focus").append(btn); 
$("#focus .btnBg").css("opacity",0.5); 
//为小按钮添加鼠标滑入事件,以显示相应的内容 
$("#focus .btn span").css("opacity",0.4).mouseover(function() { 
index = $("#focus .btn span").index(this); 
showPics(index); 
}).eq(0).trigger("mouseover"); 
//上一页、下一页按钮透明度处理 
$("#focus .preNext").css("opacity",0.2).hover(function() { 
$(this).stop(true,false).animate({"opacity":"0.5"},300); 
},function() { 
$(this).stop(true,false).animate({"opacity":"0.2"},300); 
}); 
//上一页按钮 
$("#focus .pre").click(function() { 
index -= 1; 
if(index == -1) {index = len - 1;} 
showPics(index); 
}); 
//下一页按钮 
$("#focus .next").click(function() { 
index += 1; 
if(index == len) {index = 0;} 
showPics(index); 
}); 
//本例为左右滚动,即所有li元素都是在同一排向左浮动,所以这里需要计算出外围ul元素的宽度 
$("#focus ul").css("width",sWidth * (len)); 
//鼠标滑上焦点图时停止自动播放,滑出时开始自动播放 
$("#focus").hover(function() { 
clearInterval(picTimer); 
},function() { 
picTimer = setInterval(function() { 
showPics(index); 
index++; 
if(index == len) {index = 0;} 
},4000); //此4000代表自动播放的间隔,单位:毫秒 
}).trigger("mouseleave"); 
//显示图片函数,根据接收的index值显示相应的内容 
function showPics(index) { //普通切换 
var nowLeft = -index*sWidth; //根据index值计算ul元素的left值 
$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position 
$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果 
} 
}); 
</script> 
</head> 
<body> 
<div class="wrapper"> 
<h1>jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动</h1> 
<div id="focus"> 
<ul> 
<li><a href="http://www.875.cn/" target="_blank"><img src="img/01.jpg" alt="QQ商城焦点图效果下载" /></a></li> 
<li><a href="http://www.875.cn/" target="_blank"><img src="img/02.jpg" alt="QQ商城焦点图效果教程" /></a></li> 
<li><a href="http://www.875.cn/" target="_blank"><img src="img/03.jpg" alt="jquery商城焦点图效果" /></a></li> 
<li><a href="http://www.875.cn/" target="_blank"><img src="img/04.jpg" alt="jquery商城焦点图代码" /></a></li> 
<li><a href="http://www.875.cn/" target="_blank"><img src="img/05.jpg" alt="jquery商城焦点图源码" /></a></li> 
</ul> 
</div><!--focus end--> 
</div><!-- wrapper end --> 
</body> 
</html>

效果图如下:
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Javascript 相关文章推荐
基于jquery+thickbox仿校内登录注册框
Jun 07 Javascript
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 #Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 #Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 #Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 #Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 #Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 #Javascript
如何让页面加载完成后执行js
Jun 26 #Javascript
You might like
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
javascript实现手机震动API代码
2015/08/05 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
python设置检查点简单实现代码
2014/07/01 Python
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
Python 寻找局部最高点的实现
2019/12/05 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
sklearn的predict_proba使用说明
2020/06/28 Python
python与pycharm有何区别
2020/07/01 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
校园餐饮创业计划书
2014/01/10 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
开会通知
2015/04/20 职场文书
gateway网关接口请求的校验方式
2021/07/15 Java/Android
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python