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. 搭建企业级Docker Registry -- Harbor

    Harbor 是一个企业级的 Docker Registry,可以实现 images 的私有存储和日志统计权限控制等功能,并支持创建多项目(Harbor 提出的概念),基于官方 Registry V2 ...

  2. windows多线程（七） 事件event

    前面说的互斥量Mutex与关键段CriticalSection都不能实现线程的同步,只能实现互斥,接下来我们用时间event就可以实现线程的同步了,事件也是一个内核对象. 一.相关函数说明 (一) 创 ...

  3. 计算机网络【1】—— OSI七层协议和TCP/IP四层协议

    新开一贴,专门用来记录计算机网络相关知识. 一.OSI七层协议 物理层.数据链路层.网络层.传输层.会话层.表示层.应用层 二.TCP/IP四层协议 网络接口层.网际层.运输层.应用层 三.五层协议 ...

  4. JavaScript的setTimeout()和setInterval()

    1. setTimeout()方法 作用:在制定的毫秒数后调用函数或计算表达式 语法: setTimeout(code,millisec) 实例: function timedMsg() { var ...

  5. ZOJ3435_Ideal Puzzle Bobble

    把L,H,W分别减一就变成上面一个题目了. 不多说,也不召唤代码君了.

  6. DB磁盘满导致Zabbix Server Crash一例

    故障描述 今天线上zabbix出现几次数据中断的情况,经排查为DB服务器磁盘空间不足导致的.还好我们目前我们zabbix,falcon两套监控系统并存,哈哈. 故障排查过程没什么技术含量,简单的将故障 ...

  7. Java 继承和多态

                                                        Java  继承和多态 Java 继承 继承的概念 继承是java面向对象编程技术的一块基石,因 ...

  8. 【刷题】BZOJ 2588 Spoj 10628. Count on a tree

    Description 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始 ...

  9. Libssh认证绕过CVE-2018-10933漏洞复现

    0x00 漏洞描述 libssh 0.6 及以上的版本,在服务端的代码实现中存在身份认证绕过漏洞.在向服务端认证的流程中,攻击者通过将 SSH2_MSG_USERAUTH_REQUEST 消息替换为  ...

  10. 单点登录(三)-----实战-----cas server 源码下载和部署

    我们在上一篇文章中使用的是4.0版本的cas,4.0版本的有发布好的war包可以直接使用,那如果我们要使用更新的版本怎么办呢? 就需要下载源码自己编辑打包了. 步骤如下: 版本选择 我们在cas的gi ...