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. IDEA小插件之快速修改Maven多模块的工程版本

    Github:https://github.com/zwjlpeng/versions 问题在Maven构建的多模块块程中,如果我们需要修改工程的版本号,会怎么操作呢example例如工程A包括了A- ...

  2. Alpha阶段敏捷冲刺⑥

    1.提供当天站立式会议照片一张. 每个人的工作 (有work item 的ID),并将其记录在码云项目管理中: 昨天已完成的工作. 实现对账单条目的编辑 初步设计设置页面 今天要完成的工作. 账单明细 ...

  3. 字符串拆分函数 func_splitstr

    create type str_split is table of varchar2(4000) ; 1 CREATE OR REPLACE FUNCTION splitstr(p_string IN ...

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

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

  5. 2013杭州网赛 1001 hdu 4738 Caocao's Bridges(双连通分量割边/桥)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4738 题意:有n座岛和m条桥,每条桥上有w个兵守着,现在要派不少于守桥的士兵数的人去炸桥,只能炸一条桥 ...

  6. javascript获取当前日期和时间

    ){ ){ _time = year+"-"+month+"-"+date+" "+hour+":"+minu+&quo ...

  7. css 样式 文字过长 换行处理方法

    css强制换行.强制不换行及自动换行的写法 css强制不换行 div{white-space:nowrap;} css自动换行 div{ word-wrap: break-word; word-bre ...

  8. hdu3712 Detector Placement

    题意:给一束激光,一个三棱柱,三棱柱会折射光,问这束激光最终是否会和y = 0相交: 分析:模拟题,为了方便处理折射角,事先求出每条边的向内和向外的法向量: findpoint : 找第一交点 ste ...

  9. Digits of Factorial LightOJ - 1045(数学题？)

    原文地址: https://blog.csdn.net/fenghoumilin/article/details/52293910 题意:求 n 的阶乘在 base 进制下的位数,这里有一个简单的方法 ...

  10. oracle 恢复误删数据

    快照  select * from sys_info as of timestamp to_Date('2014-04-08 15:28:00', 'yyyy-mm-dd hh24:mi:ss')   ...