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 ...
随机推荐
- 开源框架是如何通过JMX来做监控的(一) - JMX简介和Standard MBean
相关文章目录: 开源框架是如何通过JMX来做监控的(一) - JMX简介和Standard MBean 开源框架是如何通过JMX来做监控的(二) - Druid连接池的监控 相信很多做Java开发的同 ...
- 用python实现对图像的卷积(滤波)
之前在看卷积神经网络,很好奇卷积到底是什么,最后看到了这篇文章http://blog.csdn.net/zouxy09/article/details/49080029,讲得很清楚,这篇文章中提到了对 ...
- IO回忆录之怎样过目不忘(BIO/NIO/AIO/Netty)
有热心的网友加我微信,时不时问我一些技术的或者学习技术的问题.有时候我回微信的时候都是半夜了.但是我很乐意解答他们的问题.因为这些年轻人都是很有上进心的,所以在我心里他们就是很优秀的,我愿意多和努力的 ...
- Pandas日期数据处理：如何按日期筛选、显示及统计数据
前言 pandas有着强大的日期数据处理功能,本期我们来了解下pandas处理日期数据的一些基本功能,主要包括以下三个方面: 按日期筛选数据 按日期显示数据 按日期统计数据 运行环境为 windows ...
- LindAgile.Modules模块化的设计
在LindAgile中有一个比较主推的技术,就是模块化,一切组件都可以被抽象成一个小小的模块,而每个小模块的实现可能又有多种方式,如日志模块可以有LindLoger,Log4net等实现,而具体在程序 ...
- 你知道现在有一种新的OCR技术叫“移动端车牌识别”吗？
核心内容:车牌识别.OCR识别技术.移动端车牌识别.手机端车牌识别.安卓车牌识别.Android车牌识别.iOS车牌识别 一.移动端车牌识别OCR技术研发原理 移动端车牌识别是基于OCR识别的一种应用 ...
- net.sf.json.JSONException: java.lang.reflect.InvocationTargetException Caused by: java.lang.IllegalArgumentException at java.sql.Date.getHours(Unknown Source)
数据库字段类型为Date,转成JSON格式会有问题,解决方案如下: json-lib有一个配置类JsonConfig通过JsonConfig可以注册一个字段处理器实现JsonValueProcesso ...
- Js获取url传递过来的参数
原理跟取cookie值一样的 function getParamer(paramer){ var url=window.location.href.split("?")[1];/* ...
- React制作吸顶功能总结
总结一下最近用react写项目时,遇到的一些坑,恩,真的还蛮坑的,主要是设置状态的时候特别不好控制,下面我们一起来看下,这里自己做了几个demo,分别看下, 主页面代码如下: class Head e ...
- 【初码干货】记一次分布式B站爬虫任务系统的完整设计和实施
[初码文章推荐] 程序员的自我修养 Azure系列文章 阿里云系列文章 爬虫系列文章 [初码产品推荐] AlphaMS开发模式 闪送达城市中央厨房 今天带来一个有意思的东西-分布式B站爬虫任务系统 这 ...