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 ...
随机推荐
- 每天一道Java题[2]
问题 可以直接根据hashCode()方法产生的值判断两个对象是否相等吗? 解答 不能!根据Wikipedia(https://en.wikipedia.org/wiki/Java_hashCode( ...
- JAVA中断机制详解
Java提供了中断机制,可以使用它来结束一个线程.这种机制要求线程检查它是否被中断了,然后决定是不是响应这个中断请求.线程允许忽略中断请求并继续执行.Java的中断是一种协作机制.也就是说调用线程对象 ...
- 如何升级php版本---从php5.5.12 升级php7.1.5 wamp实践
1.从官网下载一个php7.1.5 2.将刚下载的压缩包解压缩,修改命名为php7.1.5,即php+版本号. 3.将这个文件夹放在wamp/bin/php 目录下. 4.将原来版本的php5.5.1 ...
- WINFORM实现进程信息的查看，listview，点击，右键，右键菜单
1. 程序设计要求 设计程序来获取计算机中的进程信息 2.程序设计流程图 3.程序设计亮点 (0)程序启动时加载guide引导使用视频 (1)使用Listview控件显示出所有控件的名称. (2) ...
- Kotlin学习第一课：从对比Java开始
1. 介绍 今年初,甲骨文再次对谷歌所谓的安卓侵权使用Java提起诉讼,要求后者赔偿高达90亿美元.随后便传出谷歌因此计划将主力语言切换到苹果主导的Swift,不过这事后来没了跟进. 但谷歌在这两天的 ...
- 自定义控件pickView
package com.example.healthembed.util; import java.util.ArrayList; import java.util.List; import java ...
- Azure Event Hub 技术研究系列3-Event Hub接收事件
上篇博文中,我们通过编程的方式介绍了如何将事件消息发送到Azure Event Hub: Azure Event Hub 技术研究系列2-发送事件到Event Hub 本篇文章中,我们继续:从Even ...
- C# 特性（Attribute）
个人定义:不侵入对象的情况下,添加对象附注信息. 官方定义:将预定义的系统信息或用户定义的自定义信息与目标元素相关联.目标元素可以是程序集.类.构造函数.委托.枚举.事件.字段.接口.方法.可移植可执 ...
- OpenCv关于灰度积分图的SSE代码学习和改进。
最近一直沉迷于SSE方面的优化,实在找不到想学习的参考资料了,就拿个笔记本放在腿上翻翻OpenCv的源代码,无意中看到了OpenCv中关于积分图的代码,仔细研习了一番,觉得OpenCv对SSE的灵活运 ...
- python中文字符串编码问题
接口测试的时候,发现接口返回内容是uncodie类型但是包含中文.在使用print进行打印时输出提示错误: UnicodeEncodeError: 'ascii' codec can't encode ...