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 相关文章推荐
javascript脚本调试方法小结
Nov 24 Javascript
jquery插件之easing使用
Aug 19 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
禁止你的左键复制实用技巧
Jan 04 Javascript
JS验证身份证有效性示例
Oct 11 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
webpack开发跨域问题解决办法
Aug 03 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 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转成EXE文件
2006/10/09 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
python对视频画框标记后保存的方法
2018/12/07 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
Python 使用type来定义类的实现
2019/11/19 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
Python多线程thread及模块使用实例
2020/04/28 Python
python推导式的使用方法实例
2021/02/28 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
北京振戎融通Java面试题
2015/09/03 面试题
委托公证书
2014/04/08 职场文书
协议书格式
2014/04/23 职场文书
食品安全承诺书
2014/05/22 职场文书
护士医德医风自我评价
2014/09/15 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
Go语言读取txt文档的操作方法
2022/01/22 Golang
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python