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插件制作简单示例说明
Feb 03 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 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
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
python导入pandas具体步骤方法
2019/06/23 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
Python中的With语句的使用及原理
2020/07/29 Python
查询优化的一般准则有哪些
2015/03/08 面试题
学习决心书范文
2014/03/11 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
务虚会发言材料
2014/12/25 职场文书
中班上学期个人总结
2015/02/12 职场文书
思想道德自我评价2015
2015/03/09 职场文书
试用期自我评价范文
2015/03/10 职场文书
机器人瓦力观后感
2015/06/12 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
Python基础之函数嵌套知识总结
2021/05/23 Python
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
Python序列化模块JSON与Pickle
2022/06/05 Python
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技