jquery焦点图切换代码 jQuery图片滑动切换

特效描述：利用jQuery实现 图片滑动 切换，利用jQuery实现图片滑动切换

代码结构

1. 引入CSS

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

2. 引入JS

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

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

3. HTML代码

<div class="lanrenzhijia">
<div class="frame960 relative">
<div class="banner-img absolute" >
<div class="relative" >
<div class="leftimg left1"
moveInDerection="6"
moveInSpeed="1000"
moveInType="linear"
fadeInSpeed="1000"
fadeInType="linear"
moveOutDerection="2"
moveOutSpeed="1000"
moveOutType="linear"
fadeOutSpeed="1000"
fadeOutType="linear"
> <a href="http://cxvn.com " title="盈峰资本网站建设上线"> <img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/bannerindex-5/text.png’);"
src="images/bannerindex-5/text.png" alt="盈峰资本网站建设上线"/> </a> </div>
<div class="rightimg right1"
moveInDerection="2"
moveInSpeed="1000"
moveInType="linear"
fadeInSpeed="1000"
fadeInType="linear"
moveOutDerection="2"
moveOutSpeed="1000"
moveOutType="linear"
fadeOutSpeed="1000"
fadeOutType="linear"
> <a target="_blank" href="http://cxvn.com " title="盈峰资本网站建设上线"> <img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/bannerindex-5/盈峰资本.png’);"
src="images/bannerindex-5/盈峰资本.png" alt="盈峰资本网站建设上线"/> </a> </div>
<div class="leftimg left2"
moveInDerection="7"
moveInSpeed="1000"
moveInType="linear"
fadeInSpeed="1000"
fadeInType="linear"
moveOutDerection="7"
moveOutSpeed="700"
moveOutType="linear"
fadeOutSpeed="700"
fadeOutType="linear"
> <a href="http://cxvn.com " title="深中润投资控股网站改版"> <img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/bannerindex-2/文本.png’);"
src="images/bannerindex-2/文本.png" alt="深中润投资控股网站改版"/> </a> </div>
<div class="rightimg right2"
moveInDerection="3"
moveInSpeed="700"
moveInType="linear"
fadeInSpeed="700"
fadeInType="linear"
moveOutDerection="3"
moveOutSpeed="1500"
moveOutType="linear"
fadeOutSpeed="700"
fadeOutType="linear"
> <a target="_blank" href="http://cxvn.com " title="深中润投资控股网站改版"> <img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/bannerindex-2/案例图.png’);"
src="images/bannerindex-2/案例图.png" alt="深中润投资控股网站改版"/> </a> </div>
<div class="leftimg left3"
moveInDerection="8"
moveInSpeed="700"
moveInType="linear"
fadeInSpeed="500"
fadeInType="linear"
moveOutDerection="4"
moveOutSpeed="700"
moveOutType="linear"
fadeOutSpeed="700"
fadeOutType="linear"
> <a href="http://cxvn.com " title="盐田港环球网站建设"> <img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/bannerindex-1/文本.png’);"
src="images/bannerindex-1/文本.png" alt="盐田港环球网站建设"/> </a> </div>
<div class="rightimg right3"
moveInDerection="4"
moveInSpeed="700"
moveInType="linear"
fadeInSpeed="500"
fadeInType="linear"
moveOutDerection="4"
moveOutSpeed="700"
moveOutType="linear"
fadeOutSpeed="700"
fadeOutType="linear"
> <a target="_blank" href="http://cxvn.com " title="盐田港环球网站建设"> <img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/bannerindex-1/alt.png’);"
src="images/bannerindex-1/alt.png" alt="盐田港环球网站建设"/> </a> </div>
<div class="leftimg left4"
moveInDerection="3"
moveInSpeed="700"
moveInType="linear"
fadeInSpeed="500"
fadeInType="linear"
moveOutDerection="3"
moveOutSpeed="700"
moveOutType="linear"
fadeOutSpeed="700"
fadeOutType="linear"
> <a href="http://cxvn.com " title="兰开夏大学中文版改版"> <img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/bannerindex-3/1_03.png’);"
src="images/bannerindex-3/1_03.png" alt="兰开夏大学中文版改版"/> </a> </div>
<div class="rightimg right4"
moveInDerection="7"
moveInSpeed="700"
moveInType="linear"
fadeInSpeed="500"
fadeInType="linear"
moveOutDerection="7"
moveOutSpeed="700"
moveOutType="linear"
fadeOutSpeed="700"
fadeOutType="linear"
> <a target="_blank" href="http://cxvn.com " title="兰开夏大学中文版改版"> <img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/bannerindex-3/1_04.png’);"
src="images/bannerindex-3/1_04.png" alt="兰开夏大学中文版改版"/> </a> </div>
<div class="leftimg left5"
moveInDerection="3"
moveInSpeed="700"
moveInType="easeOutCubic"
fadeInSpeed="500"
fadeInType="easeOutCubic"
moveOutDerection="7"
moveOutSpeed="700"
moveOutType="easeOutCubic"
fadeOutSpeed="500"
fadeOutType="easeOutCubic"
> <a href="http://cxvn.com " title="面点王品牌网站改版"> <img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/bannerindex-4/04字.png’);"
src="images/bannerindex-4/04字.png" alt="面点王品牌网站改版"/> </a> </div>
<div class="rightimg right5"
moveInDerection="7"
moveInSpeed="700"
moveInType="easeOutCubic"
fadeInSpeed="500"
fadeInType="easeOutCubic"
moveOutDerection="7"
moveOutSpeed="700"
moveOutType="easeOutCubic"
fadeOutSpeed="500"
fadeOutType="easeOutCubic"
> <a target="_blank" href="http://cxvn.com " title="面点王品牌网站改版"> <img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/bannerindex-4/04.png’);"
src="images/bannerindex-4/04.png" alt="面点王品牌网站改版"/> </a> </div>
<div class="leftimg left6"
moveInDerection="2"
moveInSpeed="700"
moveInType="linear"
fadeInSpeed="500"
fadeInType="linear"
moveOutDerection="6"
moveOutSpeed="700"
moveOutType="linear"
fadeOutSpeed="500"
fadeOutType="linear"
> <a href="http://cxvn.com " title="联塑官网改版上线"> <img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/bannerindex-6/联塑 – 文字.png’);"
src="images/bannerindex-2/文本.png" alt="联塑官网改版上线"/> </a> </div>
<div class="rightimg right6"
moveInDerection="6"
moveInSpeed="700"
moveInType="linear"
fadeInSpeed="500"
fadeInType="linear"
moveOutDerection="2"
moveOutSpeed="700"
moveOutType="linear"
fadeOutSpeed="500"
fadeOutType="linear"
> <a target="_blank" href="http://cxvn.com " title="联塑官网改版上线"> <img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/bannerindex-6/ls.png’);"
src="images/bannerindex-6/ls.png" alt="联塑官网改版上线"/> </a> </div>
<div class="leftimg left7"
moveInDerection="8"
moveInSpeed="700"
moveInType="easeOutCubic"
fadeInSpeed="500"
fadeInType="easeOutCubic"
moveOutDerection="4"
moveOutSpeed="700"
moveOutType="easeOutCubic"
fadeOutSpeed="500"
fadeOutType="easeOutCubic"
> <a href="http://cxvn.com " title="扬智科技品牌网站制作"> <img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/bannerindex-7/07字.png’);"
src="images/bannerindex-7/07字.png" alt="扬智科技品牌网站制作"/> </a> </div>
<div class="rightimg right7"
moveInDerection="4"
moveInSpeed="700"
moveInType="easeOutCubic"
fadeInSpeed="500"
fadeInType="easeOutCubic"
moveOutDerection="8"
moveOutSpeed="1000"
moveOutType="easeOutCubic"
fadeOutSpeed="500"
fadeOutType="easeOutCubic"
> <a target="_blank" href="http://cxvn.com " title="扬智科技品牌网站制作"> <img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/bannerindex-7/07.png’);"
src="images/bannerindex-7/07.png" alt="扬智科技品牌网站制作"/> </a> </div>
</div>
</div>
<ul class="banner-bt absolute">
<li> <a class="pointer" target="1"> <span class="ico" style="background-image: url(‘images/bannerindex-5/d.png’)"></span> </a> </li>
<li> <a class="pointer" target="2"> <span class="ico" style="background-image: url(‘images/bannerindex-2/点击.png’)"></span> </a> </li>
<li> <a class="pointer" target="3"> <span class="ico" style="background-image: url(‘images/bannerindex-1/点击.png’)"></span> </a> </li>
<li> <a class="pointer" target="4"> <span class="ico" style="background-image: url(‘images/bannerindex-3/按钮.png’)"></span> </a> </li>
<li> <a class="pointer" target="5"> <span class="ico" style="background-image: url(‘images/bannerindex-4/04L.png’)"></span> </a> </li>
<li> <a class="pointer" target="6"> <span class="ico" style="background-image: url(‘images/bannerindex-6/点击.png’)"></span> </a> </li>
<li> <a class="pointer" target="7"> <span class="ico" style="background-image: url(‘images/bannerindex-7/07L.png’)"></span> </a> </li>
</ul>
</div>
</div>
<div style="text-align:center;clear:both"><br>
</div>

下载地址

立即下载