• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 特效插件 > 滚动图片 >  html5背景晃动的带产品正文

html5背景晃动的带产品预览图和产品描述的jquery首页轮播效果

作者:我爱模版网
大小:0.535MB
点击次数:
发布时间:2014-02-14 13:57
分享到:

特效介绍

jquery网页banner图片滚动

基于html5和css,兼容IE6,带IE6PNG背景透明的背景晃动的带产品预览图和产品描述的jquery首页轮播效果

使用方法

1、在head区引入下面的代码
<link href="css/slider.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]><script src="js/html5.js"></script><![endif]-->
<script type='text/javascript' src='http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js'></script>
<script type='text/javascript' src='js/common.js'></script>
<script type='text/javascript' src='js/slider.js'></script>
<!--[if IE 6]>
<script type="text/javascript" src="js/iepng.js"></script>
<script type="text/javascript">
    EvPNG.fix('div, ul, img, li, input, a');
</script>
<![endif]-->

2、把以下代码拷贝到你想引用的地方
<div class="header-content home">
    <div class="parallax-bg" id="slider-wrap">
    <div class="slider parallax-bg" id="slider"> <div class="slider-sections sandbox">
    <section class="first"> <img alt="Kendo UI" src="images/home-banner-1.png"/> <div class="text"> <h2>SmartSite Ver 2.2<br />
    智能网站管理系统 </h2> <p class="copy">采用前后台完全分离技术,通过标签(支持标签循环嵌套、判断标签、自定义标签、文件循环嵌套等)加模板技术.全站生成纯静态页。</p> <p class="button"><a href="http://www.lanrentuku.com/" onclick="_gaq.push(['_trackPageview', 'http://www.lanrentuku.com/']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', 'http://www.lanrentuku.com/']);" href="http://www.lanrentuku.com/">Learn More</a></p> </div> </section>
    <section> <img src="images/dataviz-home-image-q2.png" alt="Kendo UI" /> <div class="text" style="padding-top: 10px;"> <h2>企业网站管理系统</h2> <p class="copy">单页面、单页面索引、新闻、产品展示、下载、友情链接、网上商城,在线支付、配送、支付方式管理、广告等模块。</p> <p class="button"><a href="http://www.lanrentuku.com/" onclick="_gaq.push(['_trackPageview', 'http://www.lanrentuku.com/']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', 'http://www.lanrentuku.com/']);" href="http://www.lanrentuku.com/">Learn More</a></p> </div> </section>
    <section> <img src="images/home_banner_web-q2.png" alt="Kendo UI" /> <div class="text"> <h2>智能移动网站管理系统</h2> <p class="copy">基于jquery.Mobile、HTML5技术框架,前后台完全分离,采用标签加模板技术,全站生成纯静态页。</p> <p class="button"><a href="http://www.lanrentuku.com/" onclick="_gaq.push(['_trackPageview', 'http://www.lanrentuku.com/']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', 'http://www.lanrentuku.com/']);" href="http://www.lanrentuku.com/">Learn More</a></p> </div> </section></div> </div> <a class="slider-prev" href="javascript: void(0)">?</a> <a class="slider-next" href="javascript: void(0)">?</a>
    </div>
</div>


注:下面代码是为了解决IE6的png透明问题,如果您不需要,可以删除。
<script type='text/javascript' src='js/slider.js'></script>
<!--[if IE 6]>
<script type="text/javascript" src="js/iepng.js"></script>
<script type="text/javascript">
    EvPNG.fix('div, ul, img, li, input, a');
</script>
<![endif]-->


  • 本文标签:
  • html5轮播效果,jquery首页轮播效果,jquery图
仿Lenovo手机官网首页大屏焦点图jquery滚动效果
只要引入一个js文件即可实现图片轮播的幻灯图片特效