原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>原生js实现tab选项卡里内嵌图片滚动特效代码</title>
<meta name="keywords" content="原生js实现tab选项卡里内嵌图片滚动特效代码" />
<meta name="description" content="原生js实现tab选项卡里内嵌图片滚动特效代码" />
<style>
*{margin: 0;padding: 0}
.TTSlider{width: 980px;margin: 30px auto}
.TTSlider li{list-style-type:none;float: left;}
.TTSlider li img{border: none;}
.TTSliderTitle{background: #FAFAFA;height: 63px;}
.TTSliderTitle ul{width: 980px;}
.TTSliderTitle li{width: 140px;height: 63px;position: relative;z-index: 3;left: 0;}
.TTSliderTitle li div{border-right: 1px solid #C3C5C7;border-top: 1px solid #C3C5C7;left: 0;right: 0;top: 0;bottom: 0;position: absolute;_width:139px;_height:62px}
.TTSliderTitle .cur div{border: 2px solid #C3C5C7;background: #fff;z-index: 3;border-bottom: none;bottom: -2px;_height:63px;_width:136px}
.TTSliderTitle .noneBorRight div{border-right: none;}
.TTSliderTitle li a{display: block;width: 50%;float: left;height: 100%;line-height: 61px;text-decoration: none;overflow: hidden;*width:49%;font-size: 12px}
.TTSliderTitle li a img{height: 50px;margin: 6px;width: 50px}
.TTSliderPic{width: 910px;padding: 13px 33px;border: 2px solid #C3C5C7;position: relative;height: 180px;z-index: 1}
.TTSliderPicList{position: relative;width:890px;overflow: hidden;height:180px;}
.TTSliderPic ul{position: absolute;display: none;top:3px;left: 0}
.TTSliderPic ul.show{display: block;}
.TTSliderPic li img{width:150px }
.TTSliderPic li{width: 150px;padding: 0 14px;height: 180px;}
.TTSliderPic li a{display: block;height: 150px;overflow: hidden;}
.TTSliderPic li p{height: 30px;line-height: 30px;text-align: center;color: #ED0A0A}
.TTSliderPrevBtn,.TTSliderNextBtn{height: 100%;width: 45px;position: absolute;z-index: 999;top: 0;text-align: center;}
.TTSliderPrevBtn{left:0}
.TTSliderNextBtn{right: 0;}
.TTSliderPrevBtn a,.TTSliderNextBtn a{height: 30px;width: 20px;display: inline-block;background: url(./images/btn.png) no-repeat;margin-top: 75px}
.TTSliderNextBtn a{background: url(./images/btn.png) no-repeat -30px 0}
</style>
</head>
<body>
<div class='TTSlider' id='TTSlider'>
<div class='TTSliderTitle'>
<ul>
<li class='cur'><div><a href=''><img src='images/one.jpg'/></a><a href=''>栏目一</a></div></li>
<li><div><a href=''><img src='images/one.jpg'/></a><a href=''>栏目二</a></div></li>
<li><div><a href=''><img src='images/one.jpg'/></a><a href=''>栏目三</a></div></li>
<li><div><a href=''><img src='images/one.jpg'/></a><a href=''>栏目四</a></div></li>
<li><div><a href=''><img src='images/one.jpg'/></a><a href=''>栏目五</a></div></li>
<li><div><a href=''><img src='images/one.jpg'/></a><a href=''>栏目六</a></div></li>
<li><div><a href=''><img src='images/one.jpg'/></a><a href=''>栏目七</a></div></li>
</ul>
</div>
<div class='TTSliderPic'>
<div href='javascript:;' id='TTSliderPrevBtn' class='TTSliderPrevBtn'><a href='javascript:;'></a></div>
<div href='javascript:;' id='TTSliderNextBtn' class='TTSliderNextBtn'><a href='javascript:;'></a></div>
<div class='TTSliderPicList'>
<ul class='show'>
<li class='on'><a href=''><img src='images/1.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/2.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/3.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/4.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/5.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/11.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/4.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/5.jpg'/></a><p>35元</p></li>
</ul>
<ul>
<li><a href=''><img src='images/11.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/22.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/33.jpg'/></a><p>75元</p></li>
<li><a href=''><img src='images/44.jpg'/></a><p>75元</p></li>
<li><a href=''><img src='images/11.jpg'/></a><p>75元</p></li>
<li><a href=''><img src='images/44.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/55.jpg'/></a><p>85元</p></li>
</ul>
<ul>
<li><a href=''><img src='images/2.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/22.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/33.jpg'/></a><p>75元</p></li>
<li><a href=''><img src='images/44.jpg'/></a><p>75元</p></li>
<li><a href=''><img src='images/11.jpg'/></a><p>75元</p></li>
<li><a href=''><img src='images/44.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/55.jpg'/></a><p>85元</p></li>
</ul>
<ul>
<li><a href=''><img src='images/5.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/33.jpg'/></a><p>75元</p></li>
<li><a href=''><img src='images/44.jpg'/></a><p>75元</p></li>
<li><a href=''><img src='images/11.jpg'/></a><p>75元</p></li>
<li><a href=''><img src='images/44.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/55.jpg'/></a><p>85元</p></li>
</ul>
<ul>
<li><a href=''><img src='images/3.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/33.jpg'/></a><p>75元</p></li>
<li><a href=''><img src='images/44.jpg'/></a><p>75元</p></li>
<li><a href=''><img src='images/11.jpg'/></a><p>75元</p></li>
<li><a href=''><img src='images/44.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/55.jpg'/></a><p>85元</p></li>
</ul>
<ul>
<li><a href=''><img src='images/11.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/22.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/33.jpg'/></a><p>75元</p></li>
<li><a href=''><img src='images/44.jpg'/></a><p>75元</p></li>
<li><a href=''><img src='images/11.jpg'/></a><p>75元</p></li>
<li><a href=''><img src='images/44.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/55.jpg'/></a><p>85元</p></li>
<li><a href=''><img src='images/44.jpg'/></a><p>75元</p></li>
<li><a href=''><img src='images/11.jpg'/></a><p>75元</p></li>
<li><a href=''><img src='images/44.jpg'/></a><p>35元</p></li>
</ul>
<ul>
<li><a href=''><img src='images/4.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/22.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/33.jpg'/></a><p>75元</p></li>
<li><a href=''><img src='images/44.jpg'/></a><p>75元</p></li>
<li><a href=''><img src='images/11.jpg'/></a><p>75元</p></li>
<li><a href=''><img src='images/44.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/44.jpg'/></a><p>75元</p></li>
<li><a href=''><img src='images/11.jpg'/></a><p>75元</p></li>
<li><a href=''><img src='images/44.jpg'/></a><p>35元</p></li>
<li><a href=''><img src='images/55.jpg'/></a><p>85元</p></li>
</ul>
</div>
</div>
</div>
<script>
window.onload=function()
{
var oTTSlider=document.getElementById('TTSlider');
var oTTSliderTitle=getByClass('TTSliderTitle',oTTSlider,'div')[0];
var aSubNav=oTTSliderTitle.getElementsByTagName('li');
var oTTSliderPrevBtn=document.getElementById('TTSliderPrevBtn');
var oTTSliderNextBtn=document.getElementById('TTSliderNextBtn');
var oTTSliderPicList=getByClass('TTSliderPicList',oTTSlider,'div')[0];
var aItem=oTTSliderPicList.getElementsByTagName('ul');
var len=aItem.length;
var showIndex=aItemImgWidth=iNow=0;
var aEle=[];
for(var i=0;i<len;i++)
{
var aItemImgs=aItem[i].getElementsByTagName('li');
if(!aItemImgWidth)
{
aItemImgWidth=aItemImgs[0].offsetWidth;
}
aEle.push(aItemImgs); //存入数组,考虑到有多个轮播,且每个轮播里面的图片个数可能一致.
aSubNav[i].index=i;
aSubNav[i].onmouseover=function()//切换
{
var index=showIndex=this.index;
for(var j=0;j<len;j++)
{
if(j!=index)
{
aItem[j].className='';
aSubNav[j].className='';
}
}
aSubNav[index-1] && (aSubNav[index-1].className='noneBorRight' );
if(index>0)
{
(aSubNav[0].getElementsByTagName('div')[0].style.borderLeft='1px solid #C3C5C7');
}
else
{
aSubNav[0].getElementsByTagName('div')[0].style.borderLeft='2px solid #C3C5C7';
}
aSubNav[index].className='cur';
aItem[index].className='show';
}
}
for(var i=0;i<len;i++)
{
var num=aEle[i].length;
if(aItem[i].className=='show')
{
showIndex=i;
}
aItem[i].style.width=num*(aItemImgWidth)+'px'
}
oTTSliderNextBtn.onclick=function()
{
var maxNum=aEle[showIndex].length-1;
aItem[showIndex].insertBefore(aEle[showIndex][maxNum],aEle[showIndex][0]);
aItem[showIndex].style.left=-aItemImgWidth+'px';
doMove(aItem[showIndex],0);
}
oTTSliderPrevBtn.onclick=function()
{
doMove(aItem[showIndex],-(aItemImgWidth),function(){
aItem[showIndex].style.left=0;
aItem[showIndex].appendChild(aEle[showIndex][0])
});
}
function doMove(o,t,fn)
{
clearInterval(o.timer);
o.timer=setInterval(function(){
var is= (t-getStyle(o,'left'))/8;
is= is>0?Math.ceil(is):Math.floor(is);
if(t==o.offsetLeft)
{
clearInterval(o.timer);
(typeof fn==='function') && fn();
}
else
{
o.style.left=o.offsetLeft+is+'px';
}
},30)
}
function getStyle(o,a)
{
return o.currentStyle ? parseFloat(o.currentStyle[a]) : parseFloat(getComputedStyle(o,false)[a]);
}
function getByClass(s,p,e)
{
var reg=new RegExp('(\\b)'+s+'(\\b)');
var aElement=(p||document).getElementsByTagName(e||'*');
var aResult=[];
for(var i=0;i<aElement.length;i++)
{
reg.test(aElement[i].className) && aResult.push(aElement[i]);
}
return aResult;
}
}
</script>
</body>
</html>
效果图：
原生js实现tab选项卡里内嵌图片滚动特效代码的更多相关文章
- 原生js实现tab选项卡
1.html部分 <body> <div id="tab"> <div class="tab_menu& ...
- 原生js面向对象编程-选项卡(自动轮播)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- [Tool] 透过PowerPoint Online在部落格文章里内嵌简报
[Tool] 透过PowerPoint Online在部落格文章里内嵌简报 前言 讲课的时候,用PowerPoint做简报,好像已经成了讲课的惯例.而在课后,将课堂简报整理成部落格的文章,如果单纯是在 ...
- python 里内嵌函数是可以修改外部环境里的变量的
python 里内嵌函数是可以修改外部环境里的变量的 关键是细节. 如果是简单变量类型, 那么不可以. 但是如果是容器类变量, 则没问题了. 代码如下: class G: pass def f(): ...
- Win64 驱动内核编程-24.64位驱动里内嵌汇编
64位驱动里内嵌汇编 讲道理64位驱动是不能直接内链汇编的,遇到这种问题,可以考虑直接把机器码拷贝到内存里,然后直接执行. 获得机器码的方式,可以写好代码之后,直接通过vs看反汇编,然后根据地址在看内 ...
- 『Asp.Net 组件』Asp.Net 服务器组件 内嵌图片：自己的图片控件
代码: using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace ...
- java发送内嵌图片邮件
前言: 博客系统中需要邮件服务的功能,以前写过类似的功能,不过功能太简单了,仅仅是发送文本内容,现在尝试一下发送内嵌图片邮件! 准备工作: 请参考:http://www.cnblogs.com/huj ...
- Spring 发送内嵌图片的邮件 遇到的问题
问题1:spring 发送带图片的html格式的邮件? 解决方法1:直接在发送内容里面添加 <img src="http://www.rgagnon.com/images/jht.gi ...
- 使用MailKit发送带有内嵌图片的邮件且图片不显示成附件
使用MailKit发送带有内嵌图片的邮件且图片不显示成附件 参考文章:MailKit---发送邮件 注意 在邮件客户端中是否显示内嵌图片为附件依据不同邮件有所不同,暂经测试Outlook和qq不显示为 ...
随机推荐
- 单片机IO口驱动能力
以STM32的IO口为例,最大的输出电流和灌入电流在芯片手册上都有说明.单个IO口一般都是十几mA到几十mA,同时总的VDD电流也有限制,大概为150mA.所以单片机驱动外设时,如果不是信号型而是功率 ...
- POJ 3614 Sunscreen 优先队列 贪心
题意 有C个奶牛去晒太阳 (1 <=C <= 2500),每个奶牛各自能够忍受的阳光强度有一个最小值和一个最大值,太大就晒伤了,太小奶牛没感觉. 而刚开始的阳光的强度非常大,奶牛都承受不住 ...
- ArcGIS Engine中如何获取Map中已经选择的要素呢
1.使用IEnumFeturea对象获取map中的FeatureSelection,该方法可以获取所有图层的选择要素.IMap中的FeatureSelection可不是IFeatureSelectio ...
- [CSS] Targeting Elements with CSS Attribute Selectors
Beyond classes and IDs CSS also provides selectors to target element based on their attributes. In t ...
- Android获取设备隐私 忽略6.0权限管理
1.前言 (1).由于MIUI等部分国产定制系统也有权限管理,没有相关api,故无法判断用户是否允许获取联系人等隐私.在Android 6.0之后,新增权限管理可以通过官方api判断用户的运行状态: ...
- oracle3
查看表结构 DESC emp; 查询所有列 SELECT * FROM dept; 切忌动不动就用select * set timing on; 打开显示操作时间的开关,在下面显示查询时间. CREA ...
- 用C语言扩展Python的功能
https://www.ibm.com/developerworks/cn/linux/l-pythc/
- NodeJs读取源代码使用的字符集
今天用NodeJs写了个简单的客户端/服务器程序,并让客户端向服务器发送汉字.当在Windows上执行客户端时,发现服务器端打印的接收到的数据是乱码.后来发现Windows上的客户端文件的储存编码方案 ...
- Android with Eclipse - Waiting for HOME ('android.process.acore') to be launched?
mac机中使用命令行方式启动android sdk manager,有需要的朋友可以参考下. 相信使用mac机的用户做android开发都会有一个困惑,就是如何更新android sdk,或者说直接使 ...
- 4G上网卡NIDS拨号之Rmnet驱动
4G上网卡一般为双对外通讯口,一个是串口.一个是USB. 但是基于串口的常用波特率为115200,速度过于底下,所以大多使用USB. 1)一般来说常用ppp拨号方式,ppp拨号方式分为应用层pppd与 ...