tab切换-自动、点击、内容变换

  <div class="tab">
                    <ul class="pics">
                        <li><a href=""><img src="images/pic2.jpg" width="448" height="315" alt="宝业大和工业化住宅制造有限公司第一次董事会顺"/></a></li>
                        <li><a href=""><img src="images/pic1.jpg" width="448" height="315" alt="111" /></a></li>
                        <li><a href=""><img src="images/pic3.jpg" width="448" height="315" alt="222"/></a></li>
                        <li><a href=""><img src="images/pic4.jpg" width="448" height="315" alt="333"/></a></li>
                    </ul>
                    <div class="content">宝业大和工业化住宅制造有限公司第一次董事会顺</div>
                    <ul class="list">
                        <li style="background:#f00">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                    </ul>
                  
                </div>

 

 

 

body {
}
/*基本设置*/

body{margin:0;padding:0;font-size:12px;font-family:Arial,"宋体";backgorund:#fff;}/*文档清零,字体,字号,背景设置.*/
div,ul,li,p,form,h1,h2,h3,h4,h5,input,dl,dt,dd,fieldset,table,tr,td{margin:0;padding:0;}/*边界元素清零*/
ul,li,ol{list-style:none;}/*去除列表符号*/
img{border:none;}/*去除图片按钮边框*/
a{text-decoration:none;}/*去除超链接下划线*/
img,input,textarea{vertical-align:middle;}
.clear{ clear:both;}
table{border-collapse:collapse;}
td{border:#000 solid 1px;}

 


.tab {
width:450px;
height:317px;
border:1px solid #CCCCCE;
margin:15px 0 0 10px;
position:relative
}
.pics {
width:448px;
height:315px;
margin:0 auto;
margin-top:1px;
overflow:hidden;
}
.pics li img{
width:448px;
height:315px;
        }
.list {
height:17px;
width:96px;
background:#000;
position:absolute;
right:6px;
bottom:6px
}
    .list li {
    width:23px;
    height:17px;
    line-height:17px;
    font-size:12px;
    border-left:1px solid #fff;
    color:#fff;
    float:left;
    cursor:pointer;
    text-align:center
    }
        .list li.cur {
        background:#f00
        }
.content {
height:25px;
width:443px;
background:#000;
opacity:0.6;
position:absolute;
bottom:1px;
left:1px;
color:#fff;
  line-height:25px;
    color:#fff;
    padding-left:5px;
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

.footer {
height:90px;
width:1003px;
background:url(../images/header.png) no-repeat;
margin:0 auto;
}
    .footer p {
    line-height:20px;
    color:#fff;
    font-size:12px;
   padding-top:18px;
    padding-left:327px
    }

 

 

 

 


//焦点图tab
var t = n = 0, count;
$(document).ready(function () {
    $('.list li').each(function (x) {
        $(this).click(function () {
            count = $(".pics li ").length;
            $('.pics li').hide();
            $('.pics li').eq(x).fadeIn();
            $('.list li').css('background', '');
            $('.list li').eq(x).css('background', '#f00');
            $(".content").html($(".pics li ").find("img").attr('alt'));
            $(".content").html($(".pics li ").eq(x).find("img").attr('alt'));
            var i = $(this).text() - 1; //获取Li元素内的值,即1,2,3,4
            n = i;
            if (i >= count) return;
        })
    });
    t = setInterval("showAuto()", 3000);

    $(".tab").hover(function () { clearInterval(t) }, function () { t = setInterval("showAuto()", 3000); });
})
function showAuto() {
    n = n >= (count - 1) ? 0 : ++n;
    $(".list li").eq(n).trigger('click');
}

转载于:https://www.cnblogs.com/xiaoleidiv/p/3373774.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/360327.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在JAX-RS中使用@Context [第1部分]

JAX-RS提供Context批注&#xff0c;以在RESTful服务中注入各种资源。 一些最常用的注入组件是HTTP标头&#xff0c;HTTP URI相关信息。 这是完整列表&#xff08;无特定顺序&#xff09; HTTP标头 HTTP URI详细信息 安全上下文 资源上下文 请求 组态 应用 提供者 让我…

babel原理_带你了解 snowpack 原理,你还学得动么(下)

作者&#xff1a;AlienZHOU转发链接&#xff1a;https://zhuanlan.zhihu.com/p/149351900目录带你了解 snowpack 原理&#xff0c;你还学得动么(上)带你了解 snowpack 原理&#xff0c;你还学得动么(下)本篇小编建议小伙们从第一篇开始&#xff0c;按照顺序来看&#xff0c;更清…

测试社交软件有哪些,性格测试:测你适合哪个社交平台

你喜欢通过什么方式和人交流&#xff1f;随着网络世界越来越发达&#xff0c;人们越来越倾向于使用社交工具来维系与家人、朋友、同事之间的关系。不但在现实生活中不好直接表达出来的话通过网上交流的方式可以顺畅地表达出来&#xff0c;而且也节约了时间上的成本&#xff0c;…

VS2012无法安装cocos2d-x-2.1.4 解决方法及VS2012新建coco2d-x项目(一)

转自&#xff1a;http://www.cnblogs.com/wangpei/admin/EditPosts.aspx?opt1 &#xff08;注&#xff1a;此方法是可行&#xff0c;仅供参考&#xff0c;建议大家直接看我的 一见命令解决vs安装并创建cocos2d-x&#xff0c;如果你习惯了和以前一样在vs点击创建就用这个方法&a…

JMS 2.0中JMSContext的类型

如果您遵循Java EE&#xff0c;您将不会知道JMS 2.0&#xff08;Java EE 7&#xff09;中的简化API组件。 构成简化API一部分的重要接口之一是javax.jms.JMSContext接口。 根据实例的获取和管理方式&#xff08;生命周期&#xff09;&#xff0c;JMSContext可以分为两种类型&a…

excelexportentity中设置null不显示的方法_一般人不知道的线程间数据交换Exchanger

线程间的数据共享除了定义一个共享数据然后各个线程去访问这种方式外&#xff0c;还可以使用Exchanger交换数据。简单案例首先看看Exchanger的运用&#xff0c;Exchanger最简单的测试代码&#xff0c;如下图&#xff1a;对应打印的结果如下&#xff1a;线程2创建对象java.lang.…

画毛毛虫代码计算机图形学,考试计算机图形学考试计算机图形学.docx

考试计算机图形学考试计算机图形学计算机图形学大题第四章1个。第六章2个第七章1个第一章4、比较个人计算机与工作站的图形功能个人计算机仅限于符合二维&#xff0c;又是单任务操作方式工作站可处理二、三维&#xff0c;多任务操作方式区别个人计算机工作站显示分别率640 X 48…

网卡驱动程序之编写虚拟网卡(二)

一、virt_net.c /** 参考 drivers\net\cs89x0.c*/#include <linux/module.h> #include <linux/errno.h> #include <linux/netdevice.h> #include <linux/etherdevice.h> #include <linux/kernel.h> #include <linux/types.h> #include <…

冷热rx-java可观察

我自己对“热的和冷的可观察的”的理解是不稳定的&#xff0c;但这是我到目前为止所了解的&#xff01; 冷观测 考虑一个返回rx-java Observable的API&#xff1a; import obs.Util; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import rx.Observable; import…

布尔表达式的语法及语义分析程序_XSS语义分析的阶段性总结(一)

作者&#xff1a;Kale 合天智汇前言由于X3Scan的研发已经有些进展了&#xff0c;所以对这一阶段的工作做一下总结&#xff01;对于X3Scan的定位&#xff0c;我更加倾向于主动被动的结合。主动的方面主要体现在可以主动抓取页面链接并发起请求&#xff0c;并且后期可能参考XSStr…

计算机上的usb设备是什么东西,联接一个USB的线在电脑桌上方便插U盘的东西叫什么?...

HUB&#xff0c;即俗称的集线器。它是一个多端口的转发器&#xff0c;当以HUB为中心设备时&#xff0c;网络中某条线路产生了故障&#xff0c;并不影响其它线路的工作。所以HUB在局域网中得到了广泛的应用。大多数的时候它用在星型与树型网络拓扑结构中&#xff0c;以RJ45接口与…

【黑金原创教程】【TimeQuest】【第二章】TimeQuest模型角色,网表概念,时序报告...

声明&#xff1a;本文为黑金动力社区&#xff08;http://www.heijin.org&#xff09;原创教程&#xff0c;如需转载请注明出处&#xff0c;谢谢&#xff01; 黑金动力社区2013年原创教程连载计划&#xff1a; http://www.cnblogs.com/alinx/p/3362790.html 《FPGA那些事儿--Tim…

设置springboot日志级别_Spring Boot 日志框架实践

概述Java应用中&#xff0c;日志一般分为以下5个级别&#xff1a;ERROR 错误信息WARN 警告信息INFO 一般信息DEBUG 调试信息TRACE 跟踪信息Spring Boot使用Apache的Commons Logging作为内部的日志框架&#xff0c;其仅仅是一个日志接口&#xff0c;在实际应用中需要为该接口来指…

简单的类来测量延迟

这是我编写的用于测量延迟的非常简单的类。 HDRHistogram并不是劳斯莱斯解决方案&#xff0c;但是如果您只想向项目添加一个类&#xff0c;则可以很好地解决问题。 这是一个简单的测试程序&#xff0c;向您展示其用法&#xff1a; package util;public class LatencyMeasureE…

计算机加分乘法套用,8+8+8+8+8写成乘法算式要怎样写?小学数学为何这么死板?...

88888写成乘法算式只能写8x5不能写5x8吗&#xff1f;小学数学为何这么死板&#xff1f;这个题目来自于某小学的期考试卷&#xff0c;是个填空题&#xff0c;88888写成乘法算式时给了两个空( )和( )&#xff0c;就有人提出来只能写8x5不能写5x8&#xff0c;所以应该只给一个空。…

债券价格和通胀率

一般规律&#xff0c;通胀率于债券收益率正相关。 当通胀率较高时&#xff0c;市场会降低对债券的需求&#xff08;固定息票&#xff09; 》 导致债券价格下跌&#xff0c;收益率上升。转载于:https://www.cnblogs.com/xispace/p/3383357.html

净值:测试编码器/解码器

我最近与Netty进行了一些合作&#xff0c;并且按照此出色的教程中的说明构建了编码器/解码器管道&#xff0c;以测试编码器和解码器是否在正常工作而不必发送真实的消息。 幸运的是&#xff0c;有一个EmbeddedChannel确实使我们的生活变得非常轻松。 假设我们有一条消息“ Fo…

投影元素直接隔离_摸着夜色上露台开投影,是巴塞罗那设计师的浪漫

总有人说&#xff0c;世界为你关上一扇门&#xff0c;定会为你留有一扇窗。在家闷上个把月&#xff0c;窗户直接担起了连接人们与外界的通道。既然观众出不了门&#xff0c;那不如让加油打气的海报们&#xff0c;自己爬上墙好了——人们打开窗子就能撞上。平面设计师Ral Goi一直…

天涯明月刀7月4号服务器维护,7月8日服务器例行维护公告

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼亲爱的玩家&#xff1a;青龙乱舞区、大地飞鹰区、沧海云帆区、把酒邀月区、边城浪子区全部服务器将在7月8日6:00~10:00停机维护更新&#xff0c;&#xff0c;维护完成后上述各服务器客户端版本更新至2.1.20.23&#xff0c;给您带来…

关于ecshop中jquery与js冲突解决的方案

ECShop把AJAX事件和JSON解析的模块放在common/transport.js之中&#xff0c;可以说它也有自己封装的一套工具&#xff0c;这其实是很正常的。但恰恰的&#xff0c;在封装JSON各种方法的同时对object的模型进行了重写&#xff0c;这个就跟jQuery冲突了。因为众所周知的&#xff…