1、效果及功能说明
图片滚动切换特效，高仿2012淘宝商城首页多格子焦点图切换，鼠标滑过焦点图片各个格子区域聚光灯效果展示

2、实现原理
在显示div的下面有一个按钮条在鼠标触及到按钮的时候会改变那妞的背景颜色作为辨识，后给按钮定义一个点击事件，让点击按钮后显示出相对应的图片，在没有点击的图片的情况下自动运行滚动的动画效果，每张图片的切换时间是3秒在点击按钮或者鼠标触及到图片上动画停止当鼠标移开后3秒后启动动画每个图片有可以链接到不同的地址在其中还给包含多个图片在一个div里显示出来他们不是一体的只是在一个块级容器里，最后给图片定义个伪类当鼠标触及到图片后会改变图片的背景颜色来让用户更好的辨认

3、效果图

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

7、代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   

<style type="text/css">

*{margin:0;padding:0;list-style-type:none;}

body{font:12px/180% Arial, Helvetica, sans-serif, "宋体";color:#333;background:#f0f0f0;}

a,img{border:0;}

/* demo */

.demo{width:780px;margin:0 auto;}

.demo h2{height:70px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;text-align:center;}

/* focus */

#focus{position:relative;width:780px;height:420px;overflow:hidden;}

#focus ul{height:420px;position:absolute;}

#focus ul li{float:left;width:780px;height:420px;overflow:hidden;position:relative;background:#000;}

#focus ul li div{position:absolute;overflow:hidden;}

#focus .btnBg{position:absolute;width:780px;height:40px;left:0;bottom:0;background:#000;}

#focus .btn{position:absolute;height:30px;left:10px;bottom:4px;}

#focus .btn span{

    float:left;display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;font-size:16px;margin-right:10px;cursor:pointer;background:#716564;color:#ffffff;

    border-radius:15px;

    -moz-border-radius:15px;

    -webkit-border-radius:15px;

}

#focus .btn span.on{background:#B91919;color:#ffffff;}

</style>   

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript">

$(function(){

    var sWidth = $("#focus").width();

    //获取焦点图的宽度

    var len = $("#focus ul li").length;

    //获取焦点图长度

    var index = 0;

    //获取焦点图个数

    var picTimer;

    //创建一个picTimer参数   

    //以下代码添加数字按钮和按钮后的半透明长条

    var btn = "<div class='btnBg'></div><div class='btn'>";

    //将两个div和class都放进btn里面

    for(var i=0; i < len; i++){

    //然后一个判断

        btn += "<span>" + (i+1) + "</span>";

        //将判断放进btn里面进行判断

    }

    $("#focus").append(btn);

    //显示下面的按钮很长条

    $("#focus .btnBg").css("opacity",0.3);

    //将下面的长条调整为半透明的   

    //为数字按钮添加鼠标滑入事件，以显示相应的内容

    $("#focus .btn span").mouseenter(function(){

    //改变背景颜色

        index = $("#focus .btn span").index(this);

        //定义鼠标触及按钮的事件

        showPics(index);

        //当显示那个图片相对应的按钮是按钮的背景颜色改变

    }).eq(0).trigger("mouseenter");

    //是一个选中的事件触及以后就自动选中就是按钮的触及效果   

    $("#focus ul").css("width",sWidth * (len + 1));

    //本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度   

    $("#focus ul li div").hover(function(){

        $(this).siblings().css("opacity",0.7);

    },function() {

        $("#focus ul li div").css("opacity",1);

    });

    //鼠标滑入某li中的某div里，调整其同辈div元素的透明度，由于li的背景为黑色，所以会有变暗的效果   

    $("#focus").hover(function(){

        clearInterval(picTimer);

        //鼠标滑上焦点图时停止自动播放，滑出时开始自动播放

    },function(){

        picTimer = setInterval(function(){

            if(index == len){

                showFirPic();

                index = 0;

        //如果索引值等于li元素个数，说明最后一张图播放完毕，接下来要显示第一张图，即调用showFirPic()，然后将索引值清零

            }else{

                showPics(index);

                //如果索引值不等于li元素个数，按普通状态切换，调用showPics()

            }

            index++;

        },3000);

        //此3000代表自动播放的间隔，单位：毫秒也就是3秒

    }).trigger("mouseleave");   

    //显示图片函数，根据接收的index值显示相应的内容

    function showPics(index){

    //普通切换

        var nowLeft = -index*sWidth;

        //根据index值计算ul元素的left值

        $("#focus ul").stop(true,false).animate({"left":nowLeft},500);

        //通过animate()调整ul元素滚动到计算出的position

        $("#focus .btn span").removeClass("on").eq(index).addClass("on");

         //为当前的按钮切换到选中的效果

    }   

    function showFirPic(){

    //最后一张图自动切换到第一张图时专用

        $("#focus ul").append($("#focus ul li:first").clone());

        var nowLeft = -len*sWidth;

        //通过li元素个数计算ul元素的left值，也就是最后一个li元素的右边

        $("#focus ul").stop(true,false).animate({"left":nowLeft},500,function(){

        //通过callback，在动画结束后把ul元素重新定位到起点，然后删除最后一个复制过去的元素

            $("#focus ul").css("left","0");

            //定义样式距左为0

            $("#focus ul li:last").remove();

            //定义清除事件 清除所有的#focus ul li:last的ID

        });

        $("#focus .btn span").removeClass("on").eq(0).addClass("on");

        //为第一个按钮添加选中的效果

    }   

});

</script>

</head>   

<body>   

<div class="demo">

    <h2>jquery高仿2012淘宝商城多格焦点图滚动切换</h2>

    <div id="focus">

        <ul>

            <li>

                <div style="left:0;top:0;"><a href="http://www.17sucai.com/"><img width="780" height="420" src="data:images/5364.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>   

            </li>

            <li>

                <div style="left:0;top:0;"><a href="http://www.17sucai.com/"><img width="560" height="420" src="data:images/5152.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>

                <div style="right:0;top:0;"><a href="http://www.17sucai.com/"><img width="220" height="140" src="data:images/234rwe.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>

                <div style="right:0;top:140px;"><a href="http://www.17sucai.com/"><img width="220" height="140" src="data:images/54325.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>

                <div style="right:0;bottom:0;"><a href="http://www.17sucai.com/"><img width="220" height="140" src="data:images/as124.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>

            </li>

            <li>

                <div style="left:0;top:0;"><a href="http://www.17sucai.com/"><img width="260" height="210" src="data:images/12as.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>

                <div style="left:260px;top:0;"><a href="http://www.17sucai.com/"><img width="260" height="210" src="data:images/12wf.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>

                <div style="left:0;top:210px;"><a href="http://www.17sucai.com/"><img width="520" height="210" src="data:images/adf13.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>

                <div style="right:0;top:0;"><a href="http://www.17sucai.com/"><img width="260" height="420" src="data:images/1235.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>

            </li>

            <li>

                <div style="left:0;top:0;"><a href="http://www.17sucai.com/"><img width="560" height="420" src="data:images/5243.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>

                <div style="right:0;top:0;"><a href="http://www.17sucai.com/"><img width="220" height="140" src="data:images/3246.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>

                <div style="right:0;top:140px;"><a href="http://www.17sucai.com/"><img width="220" height="140" src="data:images/536.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>

                <div style="right:0;bottom:0;"><a href="http://www.17sucai.com/"><img width="220" height="140" src="data:images/56dsfa.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>

            </li>

            <li>

                <div style="left:0;top:0;"><a href="http://www.17sucai.com/"><img width="780" height="420" src="data:images/52525.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>

            </li>

        </ul>

    </div>

</div>   

</body>

</html>

使用jQuery仿淘宝商城多格焦点图滚动切换效果的更多相关文章

  1. 一款jQuery仿海尔官网全屏焦点图特效代码

    一款jQuery仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效. 当焦点图切换时,下方的三块小图也相对应的进行切换.并且特效还兼容头疼的IE6.赶快去和谐了它吧! 适用浏览器: ...

  2. JQuery仿淘宝商家后台管理 之 管理添加分类

    先看一下效果图: 实现功能: 1.打开时加载分类信息,折叠所有分类 2.动态添加子类和父类 3.顺序的调整 4.无刷新删除,添加 5.保存到数据库 下面是HTML代码 : <title>分 ...

  3. jQuery制作淘宝商城商品列表多条件查询功能

    一.介绍 这几天做网站的时候,突然用到这个功能,找了好久也没有找到.看到"希伟素材网"有这么一个JS,效果很不错,也正是我一直以来想要的结果.附图如下: 二:使用教程      1 ...

  4. 一款基于jQuery仿淘宝红色分类导航

    今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览    ...

  5. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

  6. 2 python大数据挖掘系列之淘宝商城数据预处理实战

    preface 在上一章节我们聊了python大数据分析的基本模块,下面就说说2个项目吧,第一个是进行淘宝商品数据的挖掘,第二个是进行文本相似度匹配.好了,废话不多说,赶紧上车. 淘宝商品数据挖掘 数 ...

  7. 一款仿PBA官网首页jQuery焦点图的切换特效

    一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...

  8. 基于js仿汽车之家2015新版焦点图代码

    今天给大家分享一款仿汽车之家2015新版焦点图代码.这是一款基于jQuery实现的适合电子商务网站或者企业产品展示功能特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  9. 一款jQuery特效编写的大度宽屏焦点图切换特效

    一款jQuery编写的大度宽屏焦点图切换特效 焦点图显示区域有固定的宽度,当前显示宽度之外是一个半透明层显示的其它的焦点图片, 最好的是,此特效兼容IE6以及其它浏览器. 适用浏览器:IE6.IE7. ...

随机推荐

  1. Intellij IDEA中file size exceeds configured limit解决

    把Hadoop源码导入IDEA中后,其中有个ClientNamenodeProtocolProtos文件代码高达82997行,IDEA直接就不把它当java类看了,报file size exceeds ...

  2. jmeter body 中文显示为乱码解决

    这种情况在jmeter3.0的版本中才会产生,注意:这不是乱码,而是由于3.0中优化body data后,使用默认的字体(Consolas)不支持汉字的显示.这样的情况可以这样调整:进入jmeter. ...

  3. 每个Android开发者必须知道的内存管理知识

    原文:每个Android开发者必须知道的内存管理知识 拷贝在此处,以备后续查看. 相信一步步走过来的Android从业者,每个人都会遇到OOM的情况.如何避免和防范OOM的出现,对于每一个程序员来说确 ...

  4. MySql的多存储引擎架构, 默认的引擎InnoDB与 MYISAM的区别(滴滴)

    1.存储引擎是什么? MySQL中的数据用各种不同的技术存储在文件(或者内存)中.这些技术中的每一种技术都使用不同的存储机制.索引技巧.锁定水平并且最终提供广泛的不同的功能和能力.通过选择不同的技术, ...

  5. 基于JVM原理、JMM模型和CPU缓存模型深入理解Java并发编程

    许多以Java多线程开发为主题的技术书籍,都会把对Java虚拟机和Java内存模型的讲解,作为讲授Java并发编程开发的主要内容,有的还深入到计算机系统的内存.CPU.缓存等予以说明.实际上,在实际的 ...

  6. （很难啊）如何实时获取DBGrid 中当前单元格输入的内容？ [问题点数：100分，结帖人yifawu100]

    如何获取DBGrid 中当前单元格输入的内容? 还没输入完成,我想实时获取 Cell中的内容,以便作其他处理,用什么事件呢? 所以Field的Onchange事件是没用的. DBGrid1.Selec ...

  7. ie8 ajaxSubmit 上传文件提示下载

    转载 解决ie下ajaxsubmit上传文件提示下载文件问题 主要是应为放回类型为json,返回text/html

  8. line search中的重要定理 - 梯度与方向的点积为零

    转载请注明出处:http://www.codelast.com/ 对精确的line search(线搜索),有一个重要的定理: ∇f(xk+αkdk)Tdk=0 这个定理表明,当前点在dk方向上移动到 ...

  9. 状压DP入门详解+题目推荐

    在动态规划的题型中,一般叫什么DP就是怎么DP,状压DP也不例外 所谓状态压缩,一般是通过用01串表示状态,充分利用二进制数的特性,简化计算难度.举个例子,在棋盘上摆放棋子的题目中,我们可以用1表示当 ...

  10. 【BZOJ1079】【SCOI2008】着色方案

    Time Limit: 10 Sec Memory Limit: 162 MB Description 有n个木块排成一行,从左到右依次编号为1~n.你有k种颜色的油漆,其中第i种颜色的油漆足够涂ci ...