上海11选5走势图

如何用js实现鼠标点击方向键的轮播图?

很多大网站上都有鼠标点击方向键向左或向右走一张图片,不点击的时候自动轮播。那么它是如何实现的呢?下面介绍具体实现方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文汇软件</title>
<style>
*{ margin:0; padding:0;}
.aa{ width:450px; height:200px; background:#CC0; margin:100px; position:relative; overflow:hidden;}
.aa ul{ position:absolute; top:0; width:750px;}
.aa li{ list-style:none; float:left; width:150px; height:200px; }
.aa li img{ width:130px; height:180px; padding:10px;}
.aa .zuo,.aa .you{ position:absolute; width:40px; height:20px; background:#333; color:#FFF; text-align:center; padding:20px 0; z-index:10; top:60px; display:none;}
.aa .zuo{ left:0; border-radius:0 8px 8px 0;}
.aa .you{ right:0; border-radius:8px 0 0 8px;}
</style>
<script src="jquery-1.11.3.js"></script>
<script>
$(function(){
	var timer=null;
	function moveleft(){
		$('.aa ul').animate({'left':'-150px'},500,function(){
		$(this).css('left',0).children('li').first().appendTo($(this))
		})
		}
	function moveright(){
		$('.aa ul li').last().prependTo($('ul'))
		$('.aa ul').css('left','-150px')
		$('.aa ul').stop().animate({left:'0px'},500)
		}
	//setInterval(moveleft,2000)
	timer=setInterval(moveleft,2000)
	$('.aa').mouseenter(function(){
		clearInterval(timer)
		$('.zuo').fadeTo(100,0.8)
		$('.you').fadeTo(100,0.8)
		})
	$('.aa').mouseleave(function(){
	timer=setInterval(moveleft,2000)
	    $('.zuo').fadeTo(100,0)
		$('.you').fadeTo(100,0)
		})
	$('.aa .zuo').click(function(){
		moveleft()
		})	
	$('.aa .you').click(function(){
		moveright()
		})
	})
</script>
</head>

<body>
<div class="aa">
<div class="zuo">&lt;</div><div class="you">&gt;</div>
<ul>
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
<li><img src="4.jpg" /></li>
<li><img src="5.jpg" /></li>
</ul>
</div>
</body>
</html>

通过上述代码就能实现点击的轮播效果了。

关键词:
返回列表

上海11选5走势图相关的文章

相关案例

悠洋棋牌 悠洋棋牌 易玩棋牌app下载 上海11选5走势图 上海11选5 上海11选5走势图 上海11选5 上海11选5分布走势图 上海11选5APP 上海11选5