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

2014-01-13  来源:本站原创  分类:jquery  人气:5 

jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换,实例代码如下,感兴趣的朋友可以参考下哈

<!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商城带左右按钮控制焦点图片切换滚动效果

相关文章
  • jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果 2014-01-13

    jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换,实例代码如下,感兴趣的朋友可以参考下哈 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery图片滚动仿QQ商城带左右按钮控

  • 基于jquery实现的鼠标滑过按钮改变背景图片 2014-04-14

    基于jquery实现的鼠标滑过按钮改变背景图片,发现用CSS用时IE6不兼容,所以就用见JQ实现. $(document).ready(function () { //按钮样式切换 $("#btFeedBack").hover( function () { $(this).removeClass("btFeed").addClass("btFeedhover"); }, function () { $(this).removeClass(&quo

  • js仿土豆网带缩略图的焦点图片切换效果实现方法 2014-10-20

    这篇文章主要介绍了js仿土豆网带缩略图的焦点图片切换效果实现方法,涉及javascript操作图片特效的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了js仿土豆网带缩略图的焦点图片切换效果实现方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

  • jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作) 2014-11-05

    带缩略图的焦点图片切换在实际应用中很广泛的,鼠标滑上焦点图时停止自动播放,滑出时开始自动播放及鼠标滑上后显示按钮.显示大图等等,感兴趣的朋友可以了解下 demo04.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo

  • jquery焦点图片切换(数字标注/手动/自动播放/横向滚动) 2014-11-01

    焦点图片切换在网页制作的商品展示中经常会用到,这样的效果可以给用户带来耳目一新的感觉同时也是用户比较追捧的,本文也实现了一个这样的焦点图片切换效果,感兴趣的你可以参考下啊,希望本文对你有所帮助 demo01.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • jQuery插件slick实现响应式移动端幻灯片图片切换特效 2014-05-05

    jQuery插件slick是一款响应式.适用于移动设备触摸屏.可滑动显示的jQuery幻灯片插件.该幻灯片插件可以设置多种显示效果,可以自动播放,是一款移动优先的jQuery幻灯片插件. jQuery响应式手机端移动端幻灯片图片切换特效插件slick,基于jQuery,功能非常强大,支持左右按钮切换.支持圆点切换.支持自定义切换数量,支持自定义切换速度.支持图片预加载.支持自动播放定义,效果非常的不错,众多的参数自定义支持,觉得可以的可以参考他们的参数配置,还是值得学习使用的. 使用方法: 1.

  • jquery 仿QQ校友的DIV模拟窗口效果源码 2014-11-11

    本文使用大名顶顶的jquery来实现QQ校友的DIV模拟窗口,QQ的检验一些都是非常棒的 下面我们来看下这个效果图: 调用代码如下: <input value="效果" id="jbox-demo" type="button" /></p> <script language="javascript" type="text/javascript"> $(document).

  • jquery实现图片左右滚动效果 2014-01-14

    今天又网友问jquery博客,jquery左右滚动图片效果咋整. 那时在忙,公司明天要有活动,好多新闻媒体前来,据说中央电视也过来,尼玛的一直赶项目. 现在刚从公司回来,一个字累啊. 哎,把以前整的,发出来看看,图片其实就一张为了区别,上面弄了点黑色. function scroll(box,left,right,img,speed,or) { var box = $(box); var left = $(left); var right = $(right); var img = $(img)

  • jQuery焦点图切换简易插件制作过程全纪录 2014-07-14

    本文主要讲诉了本人制作一个jquery焦点图切换的简易插件的过程,十分的详细,希望对大家能有所帮助 首页经常是需要一个焦点图切换的效果,最近做的项目也正好需要,所以在网上搜索,后面查到了一个半成品的插件,这里我自己修改了一下. js文件夹下面有两个文件夹jquery.jslide.js与jquery.jslides.js,前面一个是我改写的,第二个是原作者的文件.下图是效果图: 一.静态效果 <div class="slide_wrap"> <ul id="

  • JQuery 实现在同一页面锚点链接之间的平滑滚动 2014-01-06

    JQuery 原来比我想象的要强大的多,本文用 JQuery 实现锚点链接之间的平滑滚动,在同一页面的锚点链接之间实现平滑的滚动 web开发前端一直用JQuery ,真正接触了才体会到,JQuery 原来比我想象的要强大的多,也可能比我体会到的还要强大的多,特别是兼容性那个好,于是把一些好玩的,酷炫的,可以代替 JS 的,统统给用上了. 从 JQuery 引入今天的正题,用 JQuery 实现锚点链接之间的平滑滚动.以前介绍过一个用 JS 实现的页面锚点跳转缓冲特效,效果相当不错,可以在同一页面

  • 六款帮助你实现惊艳视差滚动效果的jQuery插件 2014-01-12

    视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是改变 在网页设计中,视差滚动(Parallax Scrolling)是当下流行的网页设计技术,通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果.下面是一些运用视差滚动效果的优秀网页案例: 视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是

  • jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效 2014-06-25

    这篇文章主要介绍了jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效,效果非常的棒,而且兼容性也很好,推荐给小伙伴们 支持响应式的jQuery焦点图片无缝滚动切换特效插件Elastislide,非常漂亮的图片轮播特效插件,支持左右轮播图片.上下轮播图片.自适应移动端显示,支持众多的参数配置:orientation :'horizontal'(水平切换),speed : 500(切换速度,单位毫秒),easing : 'ease-in-out'(动画效果), minItems

  • jQuery使用一个按钮控制图片的伸缩实现思路 2015-04-23

    上一篇讲解了jquery同时控制四张图片的伸缩,想必大家对伸缩有一定了解了,本文将为大家介绍下使用按钮控制图片的伸缩,感兴趣的朋友可以参考下哈 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.

  • JQuery仿小米手机抢购页面倒计时效果 2014-10-04

    这篇文章主要介绍了JQuery仿小米手机抢购页面倒计时效果,从功能到实现原理以及主要代码都做了详细的介绍,推荐给有相同需求的小伙伴. 1.效果及功能说明 通过对时间的控制来告诉用户一个活动还剩多少时间,精确到秒. 2.实现原理 首先定义活动的截至的时间,要重年份精确到毫秒,在获得当前的年份到秒钟,在用截至时间,减去现在的时间,剩下的还有多少的时间就把还剩下的时间给显示出来就得出了离截止日期还有多久. 主要代码 var startTime = new Date(); //获得当前的时间 start

  • jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果 2013-12-04

    jquery实现下拉菜单效果,jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局,感兴趣的朋友可以参考下哈,希望对你有所帮助 在网站建设中,特别是做商城和产品网站,通常会用到导航弹出菜单,像是jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局.京东菜单已经有不少JS前端爱好者仿写过,今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单,精简版代码 先看下jquery仿京东导航效果: 前端html代码如下: <ul> <

  • 完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效 2015-03-29

    本文是作者学习jQuery之后练手之作,兼容各大浏览器,非常的精美实用,这里放出来给小伙伴们,有需要的直接拿走,别跟我客气^_^ 1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整

  • Android仿QQ登陆窗口实现原理 2015-04-30

    今天根据腾讯qq,我们做一个练习,来学习如何制作一个漂亮的布局仿QQ登陆,还是一个启动画面,之后进入登录页面,导航页面就不介绍了,大家可以参考微信的导航页面 今天根据腾讯qq,我们做一个练习,来学习如何制作一个漂亮的布局.首先看一下官方图片 还是一个启动画面,之后进入登录页面,导航页面就不介绍了,大家可以参考微信的导航页面.首先程序进入SplashActivity,就是启动页面,Activity代码如下: package com.example.imitateqq; import android

  • javascript 仿QQ滑动菜单效果代码 2013-12-08

    javascript 仿QQ滑动菜单效果代码,非常漂亮的代码,学习js的朋友可以参考下代码风格. [程序源码] var QQ = function() { // 公用函数 function T$(id) { return document.getElementById(id); } function T$$(root, tag) { return (root || document).getElementsByTagName(tag); } function $extend(des, src)

  • 使用js实现按钮控制文本框加1减1应用于小时+分钟 2014-01-10

    正如标题所言使用js实现按钮控制文本框加1减1,此类主要应用于小时+分钟,下面有个不错的示例,喜欢的朋友可以参考下 time.html代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <met

  • 基于jquery插件制作左右按钮与标题文字图片切换效果 2014-01-15

    制作左右按钮与标题文字图片切换效果的方法有很多,在本文为大家介绍下使用jquery图片切换插件是如何实现的,感兴趣的朋友不要错过 本例用了2个js文件jquery-ui-1.8.6.core.widget.js和jqueryui.bannerize.js,到演示页面可以查看 CSS Code <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} /* ui-b