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 关于# 和 void的区别分析
Oct 26 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
SVG实现时钟效果
Jul 17 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
vscode vue 文件模板的配置方法
Jul 23 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 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 swfupload图片上传的实例代码
2013/09/30 PHP
php中hashtable实现示例分享
2014/02/13 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
js实现点击烟花特效
2020/10/14 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Python箱型图处理离群点的例子
2019/12/09 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
什么是接口(Interface)?
2013/02/01 面试题
安全资料员岗位职责
2013/12/14 职场文书
新学期开学标语
2014/06/30 职场文书
商场租赁意向书
2014/07/30 职场文书
七一建党节慰问信
2015/02/14 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS