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 相关文章推荐
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
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
COM in PHP (winows only)
2006/10/09 PHP
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
PHP比你想象的好得多
2014/11/27 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
javascript 冒号 使用说明
2009/06/06 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
python实现一个简单的ping工具方法
2019/01/31 Python
详解python解压压缩包的五种方法
2019/07/05 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
耐克中国官方商城:Nike中国
2018/10/18 全球购物
新学期家长寄语
2014/01/19 职场文书
入党综合考察材料
2014/06/02 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
体育委员竞选稿
2015/11/21 职场文书
2016保送生自荐信范文
2016/01/29 职场文书
合作合同协议书
2016/03/21 职场文书
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
MySQL分布式恢复进阶
2022/07/23 MySQL