十年专注于品牌网站建设 十年专注于品牌网站建设,低调、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

可控左右动态图片切换效果实现方法及代码

百恒网络 2013-08-04 1574

更多的对高品质网站追求的用户不希望网站上使用flash动画,所以对网站建设公司来讲也必须有更强的实力,就是要用js代替传统的flash动画,并不是说flash动画不好,由于多方面的原因,例如网速、搜索引擎收录等原因,用js实现动画对用户或搜索引擎更友好,呈现的内容更多.不管是企业网站,还是政府网站一般都会有一些图片新闻或企业文化图片和产品图片,用户都希望效果尽量炫,这样更有利于他的营销,占用资源尽量少.对于网站建设程序开发人员来讲有一定难度,接下来由南昌网站设计公司技术人员向大家介绍其实现方法.
1.样式如下:

<style type="text/css">
.slideContainer { width:696px; height:308px; position:relative; overflow:hidden;}
.imgWapper { width:4176px; height:308px; position:absolute;}
.imgWapper a:hover{text-decoration:none;}
.imgItem1,.imgItem2,.imgItem3,.imgItem4,.imgItem5 { width:696px; height:308px; position:absolute; top:0;}
.imgItem1 { left:0px; } .imgItem2 { left:696px; } .imgItem3 { left:1392px; } .imgItem4 { left:2088px; } .imgItem5 { left:2784px; }
.slideContainer span.slideindex{ display:block; position:absolute; top:276px; left:605px; font-family:Arial; font-size:14px; color:#A9A6A6; cursor:pointer;}
.slideContainer span.slideindex span { padding:0px 2px; margin:0 2px;}
.nowIndex { color:#A64705;}
.posi_rela { position:relative; display:block;}
.maintitle{ display:block; position:absolute; left:0px; color:white; background:#826359; font-family:"微软雅黑"; padding:0px 15px; }
.maintitle{ bottom:20px; line-height:46px; font-size:30px; font-weight:bold;}
img{vertical-align:top;border:0;}
.maintitle { font-weight:normal; font-size:26px; }
.slideContainer span.slideindex span { background:#59372C; padding:0px 4px; }
</style>

2.排版代码如下:

<div class="slideContainer">
<div style="left: 0px;" class="imgWapper" id="imgWapper">
<div style="left: 0px;" class="imgItem1">
<a href="#" class="posi_rela"><img src="Pic/201306271034310c779.jpg" alt="17套简洁搭配提升气质 最适合OL上班" height="308" width="696">
<span class="maintitle">17套简洁搭配提升气质 最适合OL上班</span>
</a>
</div>
<div style="left: 696px;" class="imgItem2"><a href="#" class="posi_rela"><img src="Pic/201306251140381faae.jpg" alt="Pitti Uomo场外商务街拍 蓝色狂潮席卷" height="308" width="696">
<span class="maintitle">Pitti Uomo场外商务街拍 蓝色狂潮席卷</span>
</a>
</div>

<div style="left: 1392px;" class="imgItem3">
<a href="#" class="posi_rela">
<img src="Pic/2013062410110330f7a.jpg" alt="明星穿大牌:chanel展 周迅李宇春倾巢出动" height="308" width="696">
<span class="maintitle">明星穿大牌:chanel展 周迅李宇春倾巢出动</span>
</a>
</div>

<div style="left: 2088px;" class="imgItem4">
<a href="#" class="posi_rela">
<img src="Pic/20130624100956562c1.jpg" alt="街拍大师Tommy Ton镜头下的夏日型男潮女们" height="308" width="696">
<span class="maintitle">街拍大师Tommy Ton镜头下的夏日型男潮女们</span>
</a>
</div>
</div>
<span class="slideindex" id="slideindex"><span class="nowIndex">1</span><span class="">2</span><span class="">3</span><span class="">4</span></span>
</div>
<script src="jsFile/slide_v1.js" type="text/javascript"></script>
<script type="text/javascript"></script>
var _options={};
leftslide(_options);
</script>

3.核心js代码(由于篇幅有限点击下面链接即可下载):
js代码下载

   希望本文对广大网站建设公司技术或站长有所帮助,如有什么疑问可以与南昌网络公司百恒网络技术人员联系,相互学习相互成长.

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×