jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图

jQuery结合css3动画属性制作猎豹浏览器宽屏banner焦点图切换支持手机触屏滑动焦点图切换代码

代码如下:

<div class="slide-main" id="touchMain">
    <a class="prev" href="javascript:;" stat="prev1001"><img src="images/l-btn.png" /></a>
    <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" /><p>全新chrome内核，内存占用最低，轻巧炫酷皮肤</p></div>
            </a>
        </div>
    </div>
    <a class="next" href="javascript:;" stat="next1002"><img src="images/r-btn.png" /></a>
    <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>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>

以上就是本文所述的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • 手把手教你用ViewPager自定义实现Banner轮播

    手把手教你用ViewPager自定义实现Banner轮播

    欢迎大家关注Android开源网络框架NoHttp:https://github.com/yanzhenjie/NoHttp 我们在实际开发中,很多App都会在做一个广告轮播器(可能是图片,可能是其他View),很多同学都是使用别人封装好的或者直接使用ViewPager自己来改,但是有人可能并不理解里面的原理,或者有人遇到了手势滑动冲突.我们今天就用150行代码实现一自定义的广告轮播器并不干扰原来View滑动事件. 本例代码源码及Demo传送门 效果演示 需求分析.解决方案 轮播器最重要的几个特

  • Android自动播放Banner图片轮播效果

    Android自动播放Banner图片轮播效果

    先看一下效果图 支持本地图片以及网络图片or本地网络混合. 使用方式: <com.jalen.autobanner.BannerView android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="230dip"> </com.jalen.autobanner.BannerView> 核心代码: int length

  • jquery Banner轮播选项卡

    本文实例为大家分享了jquery Banner轮播选项卡的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wraper{ width: 1200px; margin: 0 auto; position: r

  • 运用jQuery定时器的原理实现banner图片切换

    运用jQuery定时器的原理实现banner图片切换

    主要运用了定时器的原理,bind,trigger应用等 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>banner切换实现</title> <style type="text/css"> /* * @description: banner切换样式 * @author: lanfeng(beryl) * @tim

  • 简单的jQuery banner图片轮播实例代码

    简单的jQuery banner图片轮播实例代码

    朋友给我看了一个轮播效果,把js下载一看,丫丫的一个这么简单的效果,这么的就能写个几百行的,严重影响浏览器加载速度嘛,以为人家宽带流量不要钱玩的哦..无奈之下给他写了个简单的,把所有代码放上去都没有超过70行,还有圆角的那个CSS,不是每个浏览器都是圆角的,不过不影响美观,嘻嘻. 先给大家展示下效果图: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</title&

  • Android UI实现广告Banner轮播效果

    Android UI实现广告Banner轮播效果

    本篇博客要分享的一个效果是实现广告Banner轮播效果,这个效果也比较常见,一些视频类应用就经常有,就拿360影视大全来举例吧: 用红框框住的那个效果就是小巫今天要分享的,先来思考一下会用到什么控件?有什么用户体验? 控件我们可能一下子就可以想到的自然是ViewPager,没错!用到的就是ViewPager,那么它会有什么用户体验呢,它可能有以下几个体验: 1. 间隔不停的切换图片,指示器也跟着变 2. 点击图片可以跳转到指定的页面 如何实现? 布局开始着手 /BannerAutoScrollD

  • jquery实现滑屏大图定时收缩为小banner图片的广告代码

    jquery实现滑屏大图定时收缩为小banner图片的广告代码

    本文实例讲述了jquery实现滑屏大图定时收缩为小banner图片的广告代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的JS广告特效,滑屏大图广告定时收缩为小banner图片广告代码,这种广告在各大门户网站现在还能看得到,刚打开网页的时候可以看到滑下来的大图片广告,过一会,广告自动缩小变成了一个banner横幅广告,并带有关闭按钮,可以关闭广告,对于广告来说,这个代码挺实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/

  • jquery实现的Banner广告收缩效果代码

    jquery实现的Banner广告收缩效果代码

    本文实例讲述了jquery实现的Banner广告收缩效果代码.分享给大家供大家参考.具体如下: 这里演示一个Banner广告收缩效果,点开后,网页显示大广告,用鼠标点击"关闭"后,广告会收缩上去,此效果已在各大网站见到过,欢迎借鉴使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-banner-show-close-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "

  • jquery实现简单的banner轮播效果【实例】

    jquery实现简单的banner轮播效果【实例】

    朋友给我看了一个轮播效果,把js下载一看,丫丫的一个这么简单的效果,这么的就能写个几百行的,严重影响浏览器加载速度嘛,以为人家宽带流量不要钱玩的哦..无奈之下给他写了个简单的,把所有代码放上去都没有超过70行,还有圆角的那个CSS,不是每个浏览器都是圆角的,不过不影响美观,嘻嘻. <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</title> <scri

  • Android实现Banner界面广告图片循环轮播（包括实现手动滑动循环）

    Android实现Banner界面广告图片循环轮播（包括实现手动滑动循环）

    前言:经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环.本以为单纯的ViewPager就可以实现这些功能.但是蛋疼的事情来了,ViewPager并不支持循环翻页.所以要实现循环还得需要自己去动手.自己在网上也找了些例子,本博文的Demo是结合自己找到的一些相关例子的基础上去改造,也希望对读者有用. Demo实现的效果图如下: Demo代码: 工程目录如下图: 废话不多说,上代码. 1.主Activity代码如下: package com.stevenhu.and

随机推荐