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


Posted in Javascript onMarch 04, 2016

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

先给大家展示下效果图:

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

<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图片轮播实例代码,希望对大家有所帮助!

Javascript 相关文章推荐
JavaScript 对象模型 执行模型
Oct 15 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 #Javascript
jquery实现右侧栏菜单选择操作
Mar 04 #Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 #Javascript
jquery实现页面常用的返回顶部效果
Mar 04 #Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 #Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 #Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 #Javascript
You might like
php htmlspecialchars加强版
2010/02/16 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
php比较两个绝对时间的大小
2014/01/31 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
python处理二进制数据的方法
2015/06/03 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
知识竞赛活动方案
2014/02/18 职场文书
财产公证书
2014/04/10 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
党建工作整改措施
2014/10/28 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
python_tkinter弹出对话框创建
2022/03/20 Python
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android