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 相关文章推荐
$.ajax json数据传递方法
Nov 19 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
js自定义input文件上传样式
Oct 26 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 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 字符串函数收集
2010/03/29 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
跟老齐学Python之??碌某?? target=
2014/09/12 Python
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python中最大递归深度值的探讨
2019/03/05 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
阳光体育活动方案
2014/02/16 职场文书
员工安全承诺书
2014/05/22 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
合伙购房协议样本
2014/10/06 职场文书
导游词之崇武古城
2019/10/07 职场文书
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers