html和js部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

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

<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />

<meta name="description" content="此代码内容为仿2015汽车之家首页焦点图，属于站长常用代码，更多焦点图代码请访问懒人图库JS代码频道。" />

<title>仿2015汽车之家首页焦点图</title>

<link href="css/lrtk.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/lrtk.js"></script>

<base target="_blank" />

</head>

<body>

<!-- 代码 开始 -->

<div id="box">

    <div class="prev"></div>

    <div class="next"></div>

    <ul class="bigUl">

        <li><a href="#"><img src="data:images/1.jpg" alt="定位精品路线 原创试驾奇瑞艾瑞泽3" /></a></li>

        <li><a href="#"><img src="data:images/2.jpg" alt="锂电池是亮点 米儿低速电动车设计解读" /></a></li>

        <li><a href="#"><img src="data:images/3.jpg" alt="舒适及操控更上一层楼 测试长安金欧诺" /></a></li>

        <li><a href="#"><img src="data:images/4.jpg" alt="外观动感/配置丰富 天籁2.0L用车记" /></a></li>

        <li><a href="#"><img src="data:images/5.jpg" alt="走到哪都信心十足 普拉多用车心得" /></a></li>

        <li><a href="#"><img src="data:images/6.jpg" alt="全新东风标致508 驾乘尽享的中高级杰座" /></a></li>

        <li><a href="#"><img src="data:images/7.jpg" alt="C4L 动力快人一步礼遇更胜一筹" /></a></li>

    </ul>

    <ul class="numberUl"></ul>

    <ul class="textUl"></ul>

 </div>

</body>

</html>

<script type="text/javascript">

function slide(json){

    this.index=json.index||0;

    this.timeout=json.timeout;

    this.curIndex=this.index;

    this.box=document.getElementById(json.id);

    this.allUl=this.box.getElementsByTagName("ul");

    this.btn=this.allUl[1];

    this.txt=this.allUl[2];

    //左右箭头

    this.allDiv=this.box.getElementsByTagName("div");

    this.prev=this.allDiv[0];

    this.next=this.allDiv[1];

    //所有图片

    this.allLi=this.allUl[0].getElementsByTagName("li");

    this.aImg=this.allUl[0].getElementsByTagName("img");

    this.init();

}

slide.prototype.init=function(){

    var htmltxt="";

    var subscrble="";

    for(var i=0;i<this.allLi.length;i++){

        var n=i+1;

        htmltxt+="<li><a href='javascript:;'>"+n+"</a></li>";

        var txt=this.aImg[i].getAttribute("alt");

        subscrble+="<li><a href='#'>"+txt+"</a></li>";

    }

    this.btn.innerHTML=htmltxt;

    this.txt.innerHTML=subscrble;

    this.tab(this.index);

    this.prevFn();

    this.nextFn();

    if(this.timeout){

        this.autoRun(this.index);

    }

}

slide.prototype.tab=function(n){

    var allLi=this.btn.getElementsByTagName("li");

    var allLiTxt=this.txt.getElementsByTagName("li");

    for(var i=0;i<this.allLi.length;i++){

        this.allLi[i].style.display="none";

        allLiTxt[i].style.display="none";

        allLi[i].className="";

    }

    allLi[n].className="night";

    allLiTxt[n].style.display="block";

    this.allLi[n].style.display="block";

    this.clickFn();

}

slide.prototype.clickFn=function(){

    var allLi=this.btn.getElementsByTagName("li");

    var _this=this;

    for(var i=0;i<allLi.length;i++){

        (function(ind){

            allLi[ind].onclick=function(){

                _this.tab(ind);

            }

            this.curIndex=ind;

        })(i)

    }

}

slide.prototype.autoRun=function(n){

    this.timer=null

    var _this=this;

    this.box.onmouseout=function(){

        _this.prev.style.display="none";

        _this.next.style.display="none";

        _this.timer=setInterval(function(){

            _this.tab(n)

            n++;

            if(n==_this.allLi.length){

                n=0;

            }

            if(n<0){

                n=_this.allLi.length-1;

            }

            this.curIndex=n;

        },_this.timeout)

    }

    this.box.onmouseover=function(){

        clearInterval(_this.timer);

        _this.prev.style.display="block";

        _this.next.style.display="block";

    }

    this.box.onmouseout();

}

slide.prototype.nextFn=function(){

    var _this=this;

    this.next.onclick=function(){

        _this.curIndex++;

        if(_this.curIndex==_this.allLi.length){

            _this.curIndex=0;

        }

        _this.tab(_this.curIndex)

    }

}

slide.prototype.prevFn=function(){

    var _this=this;

    this.prev.onclick=function(){

        _this.curIndex--;

        if(_this.curIndex<0){

            _this.curIndex=_this.allLi.length-1;

        }

        _this.tab(_this.curIndex)

    }

}

var json={

    index:0,

    id:"box",

    timeout:1000,

}

new slide(json);

</script>

css部分

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:; padding:; }

body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }

td,th,caption { font-size:14px; }

h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }

address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}

a { color:#555; text-decoration:none; }

a:hover { text-decoration:underline; }

img { border:none; }

ol,ul,li { list-style:none; }

input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }

table { border-collapse:collapse; }

html {overflow-y: scroll;}

/* css common */

.clearfix:after {content: "."; display: block; height:; clear:both; visibility: hidden;}

.clearfix { *zoom:; }

#box{ position:relative; width:368px; height:221px; border:1px solid #f2f2f2; margin:100px auto;}

#box .bigUl{}

#box .prev{ position:absolute; width:40px; height:60px; background:url(../images/icon-focusimg-btn-png24-20131225.png) -44px -63px no-repeat; z-index:; top:67px; left:0px; cursor:pointer; display:none;}

#box .next{ position:absolute; width:40px; height:60px; background:url(../images/icon-focusimg-btn-png24-20131225.png) -74px -63px no-repeat; z-index:; top:67px; right:0px; cursor:pointer; display:none}

.bigUl li { position:absolute;}

.numberUl { position:absolute; right:; bottom:37px; z-index:}

.numberUl li{width:24px; height:13px;  float:left; background:#3b5998; opacity:0.7; margin-left:1px;}

.numberUl li a{ display:block ;width:24px; height:13px; color:#fff; font-size:12px; text-align:center; line-height:13px;}

#box .textUl li{ position:absolute; left:20px; bottom:10px;}

#box .textUl li a{ font-size:18px; font-family:"Microsoft Yahei"; color:#000; font-weight:bold;}

.numberUl li.night a{ background:yellow; color:black; }

别问我为什么css这么多，我也不知道，我是从懒人图库里面直接找来的样式，然后自己改吧改吧js做的，没有花哨的效果，就是现实隐藏，自己看着办吧，想花哨，请把tab()，改花哨就行了，具体的效果请参照这个来：http://www.lanrentuku.com/js/jiaodiantu-1184.html

slide效果的更多相关文章

  1. vue页面切换效果（slide效果切换）

    最近碰到一个需求,单页应用里面页面切换的效果需要做成跟轮播图滑动slide一样,让这个页面在切换时感觉是一个页面.反复琢磨的vue里面的transition,最终将实现的核心代码贴出来.这里实现的是上 ...

  2. 纯css实现slide效果

    尝试一下,仅作记录. <!DOCTYPE html><html><head><style>    *{transition:all 1s ease 0s ...

  3. 为Zepto添加Slide动画效果

    一.缘由 公司的移动端项目,采用zepto为主要框架,但是zepto毕竟是精简版的jquery,体积小了,功能自然没有这么强大,特别是动画和选择器这两块,需要我们自己去拓展. 在项目开发过程中,很多页 ...

  4. 自己动手丰衣足食，为Zepto添加Slide动画效果

    一.缘由 公司的移动端项目,采用zepto为主要框架,但是zepto毕竟是精简版的jquery,体积小了,功能自然没有这么强大,特别是动画和选择器这两块,需要我们自己去拓展. 在项目开发过程中,很多页 ...

  5. 纯后端尝试写一个前端slide插件

    概述 由于项目组前端人员缺失,又赶上需要在手机端做一个slide效果的页面,所以只能自己硬着头皮上了,写的很简单,请大家不要笑话,只是拿出来分享下,大家先看下完成后的效果,如下: 过程 看了效果图是不 ...

  6. jQuery中的动画与效果

    1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback])  返回值: ...

  7. 总结一下使用react-native的一些入门级重要点

    经过多方的协调沟通,我们决定至4.1日起,停止向新用户透出该服务:今年10.15以后,老用户也停止该服务(具体表现是网站上传APK-Android或者URL-iOS入口会下掉,已经发版的App,SDK ...

  8. jQuery的动画处理总结

    最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...

  9. jQuery Mobile 1.1八大新特性介绍

    随着HTML 5时代的来临,移动开发开始进入了一个新的时代,现在只需要懂得HTML5,配合一定的开发框架,就可以开发出十分漂亮的HTML5的移动应用.在众多的 移动HTML5开发框架中,比较著名的是j ...

随机推荐

  1. web前端开发培训和自学 哪种选择更适合你

    web前端相对于其他软件开发是比较容易入门的,但是如果深入学习就比较困难了,这门技能需要从业人员掌握一定的设计.代码.交互技能和一些SEO技能,容易入门还涉及这么多知识和技能,那学习web前端开发到底 ...

  2. Java反射使用技巧

    1. 通过setAccessible关闭安全检查,关闭的目的不是因为访问的field/method是私有的,而且因为关闭后访问公有方法也不会再有安全检查. SomeObject someObject ...

  3. mybatis---实现关联表查询

    推荐学习博客: 1.http://www.cnblogs.com/xdp-gacl/p/4264440.html 2.http://www.cnblogs.com/yaobolove/p/544404 ...

  4. glob模块

    Python模块(glob) 主要是用来在匹配文件,相当于在shell中用通配符匹配.  参考:  http://python.usyiyi.cn/python_278/library/glob.ht ...

  5. ios通知机制

  6. ACM-JAVA基础

    ACM中的JAVA(基础) 众所周知,Java拥有良好的可移植性.无论在软件还是硬件领域,它都得到了广泛的使用,但是任何语言都有其缺陷,Java也不例外,Java运行在Java虚拟机上,因而相比C/C ...

  7. CDC的StretchBlt函数载入位图时图片失真问题

    最近遇到加载的bmp图片出现失真问题,查找得知需要用SetStretchBltMode函数设置拉伸模式. 函数原型:int SetSTretchBltMode(HDC hdc, int iStretc ...

  8. YII2.0 Activeform表单组件的使用方法

    Activeform文本框:textInput();密码框:passwordInput();单选框:radio(),radioList();复选框:checkbox(),checkboxList(); ...

  9. data([key],[value])

    概述 在元素上存放或读取数据,返回jQuery对象. 当参数只有一个key的时候,为读取该jQuery对象对应DOM中存储的key对应的值,值得注意的是,如果浏览器支持HTML5,同样可以读取该DOM ...

  10. tomcat部署https+TLS 1.2+Apple ATS支持

    因为苹果ATS的要求, tomcat服务器要求上https+TLS1.2, 前面搞定了https,但是tls一直是1.0, 甚至把跑了一年的服务器重启了, 不解决问题. 思路如下: 1. 将openJ ...