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并非所有的一切都是对象
Apr 11 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
js实现下一页页码效果
Mar 07 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 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与MySQL交互使用详解
2006/10/09 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
js资料toString 方法
2007/03/13 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
python itchat实现微信自动回复的示例代码
2017/08/14 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
Java如何调用外部Exe程序
2015/07/04 面试题
超市业务员岗位职责
2013/12/05 职场文书
教师评优事迹材料
2014/01/10 职场文书
党支部书记先进事迹
2014/01/17 职场文书
干部行政关系介绍信
2014/01/17 职场文书
大学生评语大全
2014/04/18 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
六一儿童节致辞
2015/07/31 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
送给客户微信问候语!
2019/07/04 职场文书
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js