• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

C3属性的轮播图(持续更新)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

  用的是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="images/p_5.jpg" height="220" width="587" alt=""></a></li>
			<li><a href="#"><img src="images/p_1.jpg" height="220" width="587" alt=""></a></li>
			<li><a href="#"><img src="images/p_2.jpg" height="220" width="587" alt=""></a></li>
			<li><a href="#"><img src="images/p_3.jpg" height="220" width="587" alt=""></a></li>
			<li><a href="#"><img src="images/p_4.jpg" height="220" width="587" alt=""></a></li>
			<li><a href="#"><img src="images/p_5.jpg" height="220" width="587" alt=""></a></li>
			<li><a href="#"><img src="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>


附 效果图



  


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
C/C++中的预编译指令(转)发布时间:2022-07-14
下一篇:
C#调用API发布时间:2022-07-14
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap