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 相关文章推荐
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
AngularJS基础知识
Dec 21 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 Javascript
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
php miniBB中文乱码问题解决方法
2008/11/25 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
PHP精确计算功能示例
2016/11/29 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
可实现多表单提交的javascript函数
2007/08/01 Javascript
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
Python同步遍历多个列表的示例
2019/02/19 Python
opencv python如何实现图像二值化
2020/02/03 Python
Python如何访问字符串中的值
2020/02/09 Python
python 回溯法模板详解
2020/02/26 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
法学专业应届生求职信
2013/10/16 职场文书
打架检讨书400字
2014/01/17 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
银行资信证明
2015/06/17 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
美容院管理规章制度
2015/08/05 职场文书
初中英语教学随笔
2015/08/15 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js