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. 学霸数据处理项目之数据处理网页以及后台以及C#代码部分开发者手册

    写在前面,本文将详细介绍学霸数据处理项目中的数据处理网页与后台函数,以及c#代码中每一个方法的意义及其一些在运行方面需要注意的细节,供开发人员使用,开发人员在阅读相关方法说明时请参照相关代码,对于本文 ...

  2. Swift: 比较Swift中闭包传值、OC中的Block传值

    一.介绍 开发者对匿名函数应该很清楚,其实它就是一个没有名字的函数或者方法,给人直观的感觉就是只能看到参数和返回值.在iOS开发中中,它又有自己的称呼,在OC中叫Block代码块,在Swift中叫闭包 ...

  3. jira操作

    1. 字段 关键字 issuetype 2. 语法 2.1 in AND issuekey in (WQBNEWSDLDL-348, WQBNEWSDLDL-348, WQBNEWSDLDL-352, ...

  4. 利用tween.js算法生成缓动效果

    在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等 ...

  5. PostgreSQL function examples

    warehouse_db=# CREATE TABLE warehouse_tbl(warehouse_id INTEGER NOT NULL,warehouse_name TEXT NOT NULL ...

  6. Leetcode: Design Snake Game

    Design a Snake game that is played on a device with screen size = width x height. Play the game onli ...

  7. Windows XP 新增API函数列表

    SetFileShortNameConvertFiberTothreadCreateFiberExDuplicateEncryptionInfoFileEnumGeoInfoProcEnumSyste ...

  8. paper 131：【图像算法】图像特征：GLCM【转载】

    转载地址:http://www.cnblogs.com/skyseraph/archive/2011/08/27/2155776.html 一 原理 1 概念:GLCM,即灰度共生矩阵,GLCM是一个 ...

  9. C# BackgroundWorker组件学习入门介绍

    C# BackgroundWorker组件学习入门介绍 一个程序中需要进行大量的运算,并且需要在运算过程中支持用户一定的交互,为了获得更好的用户体验,使用BackgroundWorker来完成这一功能 ...

  10. Objective-C基础3

    1.OC内存管理 1)范围:管理任何继承NSObject的对象,对其他的基本数据类型无效(堆区),否则会造成内存泄露 2)原理:任何对象都可能有用一个或多个所有者,只要一个对象至少还拥有一个所有者,它 ...