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轮播图的更多相关文章

  1. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  2. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  3. 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。

    自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...

  4. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  5. 原生 js 左右切换轮播图

    使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...

  6. 原生JS实现旋转木马轮播图特效

    大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...

  7. photoSlider-html5原生js移动开发轮播图-相册滑动插件

    简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...

  8. 原生js写简单轮播图方式１－从左向右滑动

    轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...

  9. jquery.flexslider-min.js实现banner轮播图效果

    实现方法 引用jQuery和flexslider.js到你的页面 <script type="text/javascript" src="js/jquery-1.7 ...

随机推荐

  1. MySQL的SELECT ...for update

    最近的项目中,因为涉及到Mysql数据中乐观锁和悲观锁的使用,所以结合项目和网上的知识点对乐观锁和悲观锁的知识进行总结. 悲观锁介绍 悲观锁是对数据被的修改持悲观态度(认为数据在被修改的时候一定会存在 ...

  2. 计算facebook sdk需要的key hashes

    1. 下载openssl,在C盘创建openssl文件夹,解压下载的zip到openssl文件夹. 2. 找到debug.keystore. windows下在C:\Users\用户名\.androi ...

  3. MyBatis之简单了解Plugin

    MyBatis的Configuration配置中有一个Plugin配置,根据其名可以解释为"插件",这个插件实质可以理解为"拦截器"."拦截器&quo ...

  4. 腾讯云万象优图每个账户提供50G的图片存储（支持黄图检测）

    文章由GIT博客迁移过来 程序下载地址(源码也在):点我下载 设计说明 10月20号晚上,准备写这么一个程序. 腾讯云万象优图每个账户提供50G的图片存储(支持黄图检测) 可以在截图之后,直接点击上传 ...

  5. Day1-模块初识

    模块,也叫库,分为标准库和第三方库.标准库,直接导入使用,比如import getpass:第三方库,需下载安装才能使用,比如paramiko: 一.sys模块 import sys print(sy ...

  6. 前端工程之node基础

    Node.exe是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Nodejs定义了一个构造函数 Module,所有的模块(Node中一个文件即一个模块)都是 Module 的 ...

  7. spring-线程池（2）

    继承:http://www.cnblogs.com/crazylqy/p/4220743.html spring设置容器启动时运行线程类(可循环执行) 修改以下两文件, 1.spring设置容器启动时 ...

  8. 开涛spring3(5.4) - Spring表达式语言 之 5.4在Bean定义中使用EL

    5.4.1  xml风格的配置 SpEL支持在Bean定义时注入,默认使用“#{SpEL表达式}”表示,其中“#root”根对象默认可以认为是 ApplicationContext,只有Applica ...

  9. 微信小程序 获取OpenId

    微信小程序 官方API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/ 首先 以下代码是 页面加载请求用户 是否同意授权 同意之后 用code 访问 微信 ...

  10. 构建自己的PHP框架--构建模版引擎(2)

    自从来到新公司就一直很忙,最近这段时间终于稍微闲了一点,赶紧接着写这个系列,感觉再不写就烂尾了. 之前我们说到,拿到{{ $name }}这样一段内容时,我们只需要将它转化成<?php echo ...