天气好冷，都不想写代码。就先写个没有焦点的轮播图，过两天在补全。

　　用的是CSS3的属性 过渡transition 和 转换 transfrom:translateX()

　　只做了轮播和 鼠标进入停止轮播，离开继续轮播这几项。

　　

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="utf-8">

	<style>

		.banner{

			width: 960px;

			height: 360px;

			/* border: 1px solid black; */

			margin: 100px auto;

			overflow: hidden;

			position: relative;

		}

		ul{

			width: 200000px;

			list-style: none;

			height: 360px;

			transform:  translateX(-960px);

			transition: all .5s;

		}

		li{

			float: left;

		}

		img{

			width: 960px;

			height: 360px;

			vertical-align: middle;

			display: block;

		}

		*{

			margin: 0;

			padding: 0;

		}

		.right,.left {

			position: absolute;

			top: 50%;

			font-size: 50px;

			text-decoration: none;

			color: white;

			display: block;

			background-color: #ccc;

			width: 50px;

			height: 60px;

			text-align: center;

			display: none;

		}

		.right{

			right: 0px;

		}

	</style>

</head>

<body>

	<div class="banner">

		<a href="#" class="right">></a>

		<a href="#" class="left"><</a>

		<ul>

			<li><a href="#"><img src="data:images/p_5.jpg" height="220" width="587" alt=""></a></li>

			<li><a href="#"><img src="data:images/p_1.jpg" height="220" width="587" alt=""></a></li>

			<li><a href="#"><img src="data:images/p_2.jpg" height="220" width="587" alt=""></a></li>

			<li><a href="#"><img src="data:images/p_3.jpg" height="220" width="587" alt=""></a></li>

			<li><a href="#"><img src="data:images/p_4.jpg" height="220" width="587" alt=""></a></li>

			<li><a href="#"><img src="data:images/p_5.jpg" height="220" width="587" alt=""></a></li>

			<li><a href="#"><img src="data:images/p_1.jpg" height="220" width="587" alt=""></a></li>

		</ul>

	</div>

</body>

</html>

<script>

	//获取banner

	var banner = document.querySelector('.banner');

	//获取宽度

	var bannerWidth = banner.offsetWidth;

	//获取Ul

	var moveUl = document.querySelector('ul');

	//获取li

	var lis = document.querySelectorAll('li');

	//循环遍历li 为li绑定index

	for (var i = 0; i < lis.length; i++) {

		lis[i].index = i;

	};

	var index = 1;

	var setTime = setInterval(function (){

		index++;

		moveUl.style.transition = 'all .5s';

		moveUl.style.transform = 'translateX('+index*bannerWidth*-1+'px)';

	},1000)

	moveUl.addEventListener('webkitTransitionEnd', function (){

		if(index == 6){

			index = 1;

			moveUl.style.transition = 'none';

			moveUl.style.transform = 'translateX('+index*bannerWidth*-1+'px)';

		}

	})

	//鼠标移入停止轮播

	banner.onmouseenter = function (){

		//清空计时器

		clearInterval(setTime);

	}

	banner.onmouseleave = function (){

		setTime = setInterval(function (){

			index++;

			moveUl.style.transition = 'all .5s';

			moveUl.style.transform = 'translateX('+index*bannerWidth*-1+'px)';

		},1000)

	}

</script>

附 效果图 







　　
												


											
C3属性的轮播图（持续更新）的更多相关文章
	

    
								
  1. 自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图
		
    引言 学习jQuery有年头了,刚开始学习时自己动手写过轮播图,放的久了以至于忘了大致思路了.现在转而做前端,抽空把jquery轮播图拿出来写一写,把各种思路都自己练习练习,这里主要使用动态修改mar ...
    
		
    2. 
						
  2. css动画属性--轮播图效果
		
    通过css的动画属性实现轮播图的显示效果 代码如下: 主体部分: <div id="move"> <ul> <li><img src=&q ...
    
		
    3. 
						
  3. JavaScript动画：offset家族和匀速动画详解(含轮播图的实现)
		
    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. offset家族简介 我们知道,三大家族包括:offset/scroll ...
    
		
    4. 
						
  4. JavaScript动画：offset和匀速动画详解(含轮播图的实现)
		
    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. offset简介 我们知道,三大家族包括:offset/scroll/c ...
    
		
    5. 
						
  5. ViewPager轮播图
		
    LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...
    
		
    6. 
						
  6. React视角下的轮播图
		
    天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...
    
		
    7. 
						
  7. 一步一步拆解一个简单的iOS轮播图（三图）
		
    导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈...  ...
    
		
    8. 
						
  8. 初识 swift 封装轮播图
		
    一.简介 换了一家公司.换了一个环境刚开始来公司自然不能有一丝一毫的放松,每天即使是没有什么工作也是看看这个博客.那个源码.尽量让自己更充实.慢慢的开始写几篇博客记录下自己遇到的一些问题和解决方法.其 ...
    
		
    9. 
						
  9. Bootstrap实现轮播图
		
    第一步:设计轮播图容器:div.carousel,添加slide平滑切换,并定义id,方便后面采用data属性来触发 <div class='carousel slide' id="t ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. WEB页面采集器编写经验之一：静态页面采集器
			
    严格意义来说,采集器和爬虫不是一回事:采集器是对特定结构的数据来源进行解析.结构化,将所需的数据从中提取出来:而爬虫的主要目标更多的是页面里的链接和页面的TITLE. 采集器也写过不少了,随便写一点经 ...
    
			
    2. 
						
  2. Mysql使用workbench迁移数据
			
    原文:http://jingyan.baidu.com/article/925f8cb8f3ec25c0dce05644.html 打开Mysql WorkBench,连接到数据库: 首先选中:Man ...
    
			
    3. 
						
  3. C++设计模式-Facade模式
			
    Facade模式 作用:为子系统中的一组接口提供一个一致的界面,Facade模式定义了一个高层接口,这个接口使得这一子系统更加容易使用. 动机 将一个系统划分成为若干个子系统有利于降低系统的复杂性.一 ...
    
			
    4. 
						
  4. Ajax跨域请求
			
    客户端前台: //浏览器支持跨域访问,置于Ajax方法前$.support.cors = true; 服务器后台: //设置服务器端对于CORS的跨域请求支持,置于后台方法第一行 Response.A ...
    
			
    5. 
						
  5. 如何创建vss2005的数据库
			
    配置如下 VSS手工创建数据库的步骤(设数据库根目录为D:\VSS): 1.在根目录中创建名为srcsafe.ini(全局配置文件)的文件,文件内容如下: Data_Path = data Temp_ ...
    
			
    6. 
						
  6. JQuery 插件之Ajax Autocomplete（ajax自动完成）搜索引擎自动显示下拉框
			
    平时用百度,谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个JQuery 插件 名叫Ajax Autocomplete 顾名思义 ajax 也就是用ajax的方式获取 ...
    
			
    7. 
						
  7. jsp中两种include的区别【转】
			
    引用文章:http://www.ibm.com/developerworks/cn/java/j-jsp04293/ http://www.cnblogs.com/lazycoding/archive ...
    
			
    8. 
						
  8. oracle 触发器学习
			
    触发器使用教程和命名规范 目  录触发器使用教程和命名规范 11,触发器简介 12,触发器示例 23,触发器语法和功能 34,例一:行级触发器之一 45,例二:行级触发器之二 46,例三:INSTEA ...
    
			
    9. 
						
  9. 深入jQuery中的data()
			
    引入 data函数在jQuery中看起来很不起眼, 就像沙滩上一颗平凡的沙子, 但仔细一瞅, 却惊讶的发现data是jQuery中无比重要的一环, 甚至jQuery中各种事件都基于此. data有什么 ...
    
			
    10. 
						
  10. Linux Shell脚本实现根据进程名杀死进程
			
    Shell脚本源码如下: #!/bin/sh #根据进程名杀死进程 if [ $# -lt 1 ] then echo "缺少参数:procedure_name" exit 1 f ...
    
			
    11.