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


Posted in Javascript onMarch 30, 2016

朋友给我看了一个轮播效果,把js下载一看,丫丫的一个这么简单的效果,这么的就能写个几百行的,严重影响浏览器加载速度嘛,以为人家宽带流量不要钱玩的哦。。无奈之下给他写了个简单的,把所有代码放上去都没有超过70行,还有圆角的那个CSS,不是每个浏览器都是圆角的,不过不影响美观,嘻嘻。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>无标题页</title>
  <script src="js/jquery-2.1.4.js" type="text/javascript"></script>
  <style type="text/css">
    .clear{overflow:hidden; clear:both; width:0px; height:0px; }
    .imgbox{width:640px; margin:0 auto; text-align:center; }
    ul{padding:0px; margin:0px;}
    ul li{float:left; list-style:none; }
    ul li.select{display:block;}
    .imgnum span{border-radius:10px; font:normal normal bold 12px/15px 微软雅黑; color:#FFF; margin-left:5px; padding:3px 6px 3px 6px; background-color:#F90; cursor:pointer;}
    .imgnum span.onselect{background-color:#F00;}
    .imgnum{text-align:center; float:right; margin:-30px 30px; position:relative;}
  </style>
</head>
<body>
  <div class="imgbox">
      <ul id="banner_img">
        <li><img src="images/banner1.jpg"/></li>
        <li><img src="images/banner2.jpg"/></li>
        <li><img src="images/banner3.jpg"/></li>
        <li><img src="images/banner4.jpg"/></li>
        <li><img src="images/banner5.jpg"/></li>
      </ul>
  <div class="clear"></div>
  <div class="imgnum">
    <span class="onselect">1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
  </div>
</div>
<script type="text/javascript">
     var time = "";
     var index = 1;
     $(function () {
       showimg(index);
       //鼠标移入移出
       $(".imgnum span").hover(function () {
        clearTimeout(time);
        var icon=$(this).text();
        $(".imgnum span").removeClass("onselect").eq(icon-1).addClass("onselect");
        $("#banner_img li").hide().stop(true,true).eq(icon-1).fadeIn("slow");
       }, function () {
        index=$(this).text()> 4 ? 1 :parseInt($(this).text())+1;
        time = setTimeout("showimg(" + index + ")", 3000);
       });
     });
 
     function showimg(num) {
       index = num;
       $(".imgnum span").removeClass("onselect").eq(index-1).addClass("onselect");
       $("#banner_img li").hide().stop(true,true).eq(index-1).fadeIn("slow");
       index = index + 1 > 5 ? 1 : index + 1;
       time = setTimeout("showimg(" + index + ")", 3000);
     }
  </script>
</body>
</html>

注意要引用 Jquery 文件,图片我就不放上来了,自己替换掉,注意图片长宽。

效果图如下:

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

以上这篇jquery实现简单的banner轮播效果【实例】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery实现图片广告轮换效果代码
Jul 07 Javascript
js的延迟执行问题分析
Jun 23 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
jquery实现一个简单的表单验证实例
Mar 30 #Javascript
js实现密码强度检测【附示例】
Mar 30 #Javascript
原生javascript实现的一个简单动画效果
Mar 30 #Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 #Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 #Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 #Javascript
Jquery判断form表单数据是否变化
Mar 30 #Javascript
You might like
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
vue以组件或者插件的形式实现throttle或者debounce
2019/05/22 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
python如何生成各种随机分布图
2018/08/27 Python
Python适配器模式代码实现解析
2019/08/02 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
SQL面试题
2013/12/09 面试题
软件测试工程师面试问题精选
2016/10/28 面试题
党校培训自我鉴定范文
2014/03/20 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
公关活动策划方案
2014/05/25 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
休学证明范本
2015/06/19 职场文书
百年孤独读书笔记
2015/06/29 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis
Python中rapidjson参数校验实现
2021/07/25 Python
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers