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. 谷歌地图api 开发 （转载）

    https://www.cnblogs.com/520lin/p/5800024.html

  2. （二）Jmeter各部件的作用

    JMeter主要组件介绍 1.测试计划(Test Plan)是使用 JMeter 进行测试的起点,它是其它 JMeter 测试元件的容器. 2.线程组(Thread Group)代表一定数量的并发用户 ...

  3. gitlab邮箱服务配置

    配置邮箱服务的用途 有合并请求时,邮件通知 账号注册时,邮件验证 修改密码时,通过邮件修改 配置步骤: .开启QQ邮箱的smtp服务(不建议使用163邮箱,发几次之后,就不能发送) 设置-->账 ...

  4. Node初识笔记 1第一周

    #下载安装好node > https://nodejs.org/en/ #  打开cmd  调整好执行路径 . 1.js是JS文件名,cd调招路径,‘node’+空格 +JS文件名(带上扩展名) ...

  5. Thread start（）方法和run（）方法的区别

    转自:http://www.cnblogs.com/skywang12345/p/3479083.html start():作用一个新的线程,新线程会执行相应的run()方法,start()不能被重复 ...

  6. 解决多进程中APScheduler重复运行的问题

    转自:http://blog.csdn.net/raptor/article/details/69218271 问题 在一个Python web应用中需要定时执行一些任务,所以用了APSchedule ...

  7. 深入理解JAVA虚拟机阅读笔记5——Java内存模型与线程

    Java内存模型是定义线程共享的变量的访问规则(实例字段.静态字段和构成数组对象的元素),但不包括线程私有的局部变量和方法参数. 1.主内存与工作内存 Java内存模型规定,所有的变量都必须存储在主内 ...

  8. C# QR二维码DEMO

    QR二维码 二维码的一种 相关类库 ThoughtWorks.QRCode 第三方类库 DEMO功能 Encode 生成二维码图片 Encoding 编码 Correction Level 等级 Ve ...

  9. python的N个小功能(图片预处理：打开图片，滤波器，增强，灰度图转换，去噪，二值化，切割，保存)

    ############################################################################################# ###### ...

  10. # DZY Love Math 系列

    DZY Love Math 系列 [BOZJ3309] DZY Loves Math 顺着套路就能得到:\(Ans = \sum_{T=1}\lfloor \frac{n}{T} \rfloor \l ...