实用资源超酷全屏Banner图片轮播多重特效代码

超酷全屏Banner图片轮播多重特效代码

这款全屏的图片轮播特效是模仿自金山猎豹浏览器官网,其特点是在图片轮播切换的同时还伴随过渡的特效,很大气很动感。在网页头部引入css和js代码,body中加入轮播代码即可使用。

head区域代码:
<head>
<link href="css/lb.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slide.js"></script>
</head>
body区域代码:
<div class="slide-main" id="touchMain">
 <div class="slide-box" id="slideContent">
  <div class="slide" id="bgstylec">
   <a stat="sslink-3" href="#" target="_blank">
    <div class="obj-e"><img src="images/baomi-t-1.png" /></div>
    <div class="obj-f"><img src="images/baomi-kl.jpg" /></div>
   </a>
  </div>
  <div class="slide" id="bgstylea">
   <a stat="sslink-1" href="#" target="_blank">
    <div class="obj-a"><img src="images/bao.png" /></div>
    <div class="obj-b"><img src="images/nt-1.png" /></div>
   </a>
  </div>
  <div class="slide" id="bgstyleb">
   <a stat="sslink-2" href="#" target="_blank">
    <div class="obj-c"><img src="images/bao-2.png" /></div>
    <div class="obj-d"><img src="images/st-2.png" /></div>
   </a>
  </div>
 </div>
 <div class="item">
  <a class="cur" stat="item1001" href="javascript:;"></a><a href="javascript:;" stat="item1002"></a><a href="javascript:;" stat="item1003"></a>
 </div>
</div>

预览效果 下载地址

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/down/98.html