jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图：
（jq需自己加载）（图片需自己加载）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>banner轮播图</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
#banner {
position: relative;
height: 454px;
width: 730px;
margin: 100px auto 0;
}
#banner-con li {
position: absolute;
left: 0;
top: 0;
/*opacity: 0;*/
display: none;
}
#banner-con li.show {
opacity: 1;
display: block;
}
#banner-con li img {
float: left;
height: 454px;
width: 730px;
}
#banner-num {
position: absolute;
right: 41%;
bottom: 20px;
}
#banner-num li {
float: left;
height: 20px;
width: 20px;
line-height: 20px;
font-size: 18px;
text-align: center;
border-radius: 20px;
color: #fff;
margin-right: 5px;
background: #333;
cursor: pointer;
}
#banner-num li.active {
background: red;
}
#banner-left {
position: absolute;
top: 200px;
left: 10px;
display: block;
height: 60px;
width: 20px;
font-size: 30px;
line-height: 60px;
text-align: center;
background: gray;
color: #fff;
cursor: pointer;
opacity: 0;
}
#banner-right {
position: absolute;
top: 200px;
right: 10px;
display: block;
height: 60px;
width: 20px;
font-size: 30px;
line-height: 60px;
text-align: center;
background: gray;
color: #fff;
cursor: pointer;
opacity: 0;
}
</style>
<!--js原生方式-->
<!--<script type="text/javascript">
window.onload = function() {
var banner = document.getElementById('banner');
bannerCon = document.getElementById('banner-con'),
bannerConLis = bannerCon.children,
bannerNum = document.getElementById('banner-num'),
bannerNumLis = bannerNum.children,
bannerLeft = document.getElementById('banner-left'),
bannerRight = document.getElementById('banner-right'),
timer = null,
timer2 = null,
num = 0;
function move() {
clearInterval(timer);
for (var i = 0; i < bannerConLis.length; i++) {
bannerConLis[i].style.opacity = 0;
bannerConLis[i].style.display = 'none';
bannerNumLis[i].style.background = '#ccc'
}
bannerConLis[num].style.display = 'block';
bannerNumLis[num].style.background = 'red';
var index = 0;
timer = setInterval(function() {
index += 0.02;
if(index >= 1) {
index = 1;
clearInterval(timer);
}
bannerConLis[num].style.opacity = index;
},20);
}
function automove() {
num ++;
if(num >= bannerConLis.length) {
num = 0;
}
move();
}
timer2 = setInterval(automove,2000);//进入页面执行
//鼠标移上左右侧按钮显示效果
banner.onmouseenter = function() {
bannerLeft.style.opacity = 1;
bannerRight.style.opacity = 1;
}
banner.onmouseleave = function() {
bannerLeft.style.opacity = 0;
bannerRight.style.opacity = 0;
}
for (var i = 0; i < bannerNumLis.length; i++) {
bannerNumLis[i].index = i;
bannerNumLis[i].onmouseover = function() {
clearInterval(timer2);
num = this.index;
move();
}
bannerNumLis[i].onmouseout = function() {
timer2 = setInterval(automove,2000);
}
}
bannerRight.onclick = function() {
clearInterval(timer2);
num ++;
if(num >= bannerConLis.length) {
num = 0;
}
move();
timer2 = setInterval(automove,2000);
}
bannerLeft.onclick = function() {
clearInterval(timer2);
num --;
if(num < 0) {
num = bannerConLis.length - 1;
}
move();
timer2 = setInterval(automove,2000);
}
}
</script>-->
<!--jq实现方式 -->
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$('#banner').mouseenter(function() {
$('#banner-left').css('opacity','1');
$('#banner-right').css('opacity','1');
});
$('#banner').mouseleave(function() {
$('#banner-left').css('opacity','0');
$('#banner-right').css('opacity','0');
});
var n = 0;
$('#banner-right').click(function() {
clearInterval(timer);
n ++;
if (n >= $('#banner-con li').length) {
n = 0;
}
$('#banner-con li').eq(n).fadeIn(800).siblings().hide();
$('#banner-num li').eq(n).addClass('active').siblings().removeClass('active');
Move();
});
$('#banner-left').click(function() {
clearInterval(timer);
n --;
if (n < 0) {
n = $('#banner-con li').length - 1;
}
$('#banner-con li').eq(n).fadeIn(800).siblings().hide();
$('#banner-num li').eq(n).addClass('active').siblings().removeClass('active');
Move();
});
$('#banner-num li').mouseenter(function() {
clearInterval(timer);
n=$('#banner-num li').index(this);
$('#banner-con li').eq(n).fadeIn(800).siblings().hide();
$('#banner-num li').eq(n).addClass('active').siblings().removeClass('active');
Move();
});
var timer = null;
function Move() {
clearInterval(timer);
timer = setInterval(function() {
n ++;
if(n >= $('#banner-con li').length) {
n = 0;
}
$('#banner-con li').eq(n).fadeIn(800).siblings().hide();
$('#banner-num li').eq(n).addClass('active').siblings().removeClass('active');
},2000);
}
Move();
});
</script>
</head>
<body>
<div id="banner">
<ul id="banner-con">
<li class="show"><a href="javascript:;"><img src="data:images/57d9134bN975e81a4.jpg"/></a></li>
<li><a href="javascript:;"><img src="data:images/57e0e2d9N2e23e425.jpg"/></a></li>
<li><a href="javascript:;"><img src="data:images/57e230beN8dacb637.jpg"/></a></li>
<li><a href="javascript:;"><img src="data:images/57e23970N9b28af32.jpg"/></a></li>
<li><a href="javascript:;"><img src="data:images/57e25734N989a9c70.jpg"/></a></li>
<li><a href="javascript:;"><img src="data:images/57e339a5Nac4207ad.jpg"/></a></li>
</ul>
<ul id="banner-num">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<span id="banner-left"><</span>
<span id="banner-right">></span>
</div>
</body>
</html>
jQuery与原生js实现banner轮播图的更多相关文章
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
- 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
- 原生 js 左右切换轮播图
使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...
- 原生JS实现旋转木马轮播图特效
大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...
- photoSlider-html5原生js移动开发轮播图-相册滑动插件
简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...
- 原生js写简单轮播图方式１－从左向右滑动
轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...
- jquery.flexslider-min.js实现banner轮播图效果
实现方法 引用jQuery和flexslider.js到你的页面 <script type="text/javascript" src="js/jquery-1.7 ...
随机推荐
- 区块链入门(1):搭建(Ubuntu系统)Truffle v3.2.1 开发和测试环境
本文主要讲解ubuntu 16.04下, truffle开发测试环境的搭建. 第一步:安装nodejs 和 npm,有两种比较常见的方法. 方法1:直接在nodejs官网下载nodejs-v6.10 ...
- Hive load from hdfs 出错
hive 加载HDFS的数据时出现错误, FATAL:SemanticException [Error 10028] search了一下,跟他一样Hive load from hdfs 出错. 我按照 ...
- 响应式网站-全屏banner响应的2中方法 - 被吃掉的banner
通常来讲, 设计师们喜欢把banner设计成全屏(1920px或以上) 主题内容控制在一定的范围内一般在1200px左右 这样的设计即可以在宽屏上的表现很好.也能向下兼容一些小屏幕的设备: 如下图(所 ...
- Greys学习笔记(未完待续)
Greys介绍 greys-anatomy是一个Java线上诊断工具,取名来自美剧<实习医生格雷>,由菜鸟-杜琨同学开发维护.比我们常用的脚本工具btrace提供更多的功能,greys采用 ...
- jmeter 环境部署、数据库设置、分布式设置、多网卡配置等随笔
<!-- linux系统修改系统环境变量 系统语言-->[root@web-249 ~]# env|grep LANGLANG=zh_CN.UTF-8[root@web-249 ~]# ...
- html或者php中 input框限制只能输入正整数，逻辑与和或运算
有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字.小数点.英文字母.汉字等代码. 例如,输入大于0的正整数 代码如下: <input onkeyup="if ...
- 容器扩展属性 IExtenderProvider 实现WinForm通用数据验证组件
大家对如下的Tip组件使用应该不陌生,要想让窗体上的控件使用ToolTip功能,只需要拖动一个ToolTip组件到窗口,所有的控件就可以使用该功能,做信息提示. 本博文要记录的,就是通过容器扩展属性 ...
- java实现文件批量导入导出实例（兼容xls,xlsx）
1.介绍 java实现文件的导入导出数据库,目前在大部分系统中是比较常见的功能了,今天写个小demo来理解其原理,没接触过的同学也可以看看参考下. 目前我所接触过的导入导出技术主要有POI和iRepo ...
- java GUI （课堂笔记）
关于java GUI Swing组件: JFrame 窗口组件 JLabel 标签 JButton 按钮组件 JTextField 单行文本框 系统控件(JDK自带) 自定义控件(模仿系统控件): 继 ...
- 隐马尔科夫模型HMM（二）前向后向算法评估观察序列概率
隐马尔科夫模型HMM(一)HMM模型 隐马尔科夫模型HMM(二)前向后向算法评估观察序列概率 隐马尔科夫模型HMM(三)鲍姆-韦尔奇算法求解HMM参数(TODO) 隐马尔科夫模型HMM(四)维特比算法 ...