简单的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 相关文章推荐
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
浅谈webpack+react多页面开发终极架构
Nov 11 Javascript
javascript中的闭包概念与用法实践分析
Jul 26 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
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
document.write的几点使用心得
2014/05/14 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
python3中函数参数的四种简单用法
2018/07/09 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
对Python w和w+权限的区别详解
2019/01/23 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
应用电子技术专业个人求职信
2013/09/21 职场文书
总经理司机职责
2014/02/02 职场文书
简单的项目建议书模板
2014/03/12 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
六年级学生评语大全
2014/12/26 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
个人催款函范文
2015/06/24 职场文书
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL