jquery - 焦点图左右按钮、下标显示、自动轮播

最新推荐文章于 2022-07-29 22:20:06 发布
風花_10969
最新推荐文章于 2022-07-29 22:20:06 发布
阅读量354
点赞数
文章标签： jquery
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点图左右按钮、下标显示、自动轮播</title>
<style type="text/css">
*{
	padding: 0;
	margin: 0;
}
img{
	vertical-align: top;
}
li{
	list-style: none;
}
#focus-banner{
	position: relative;
	width: 100%;
	overflow: hidden;
}

#focus-banner-list{
	position: relative;
}
#focus-banner-list li{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
#focus-banner-list li img{
	width: 100%;
}
.focus-banner-img{
	display: block;
}
#focus-banner .focus-handle{
	position: absolute;
	top: 50%;
	margin-top: -40px;
	z-index: 100;
	display: block;
	width: 80px;
	height: 80px;
	background-image: url("../images/focus_handle.png");
}
#next-img{
	left: 0;
}
#next-img{
	left: 50px;
	background-position: 0 0;
}
#next-img:hover{
	background-position: 0 -80px;
}
#prev-img{
	right: 0;
}
#prev-img{
	right: 50px;
	background-position: -80px 0;
}
#prev-img:hover{
	background-position: -80px -80px;
}

#focus-bubble{
	position: absolute;
	left: 50%;
	bottom: 10px;
	z-index: 999;
}
#focus-bubble li{
	float: left;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	border:1px #fff solid;
	cursor: pointer;
}
#focus-bubble li a{
	display: block;
	width: 100%;
	height: 100%;
	filter:alpha(opacity=0);
	opacity: 0;
}
#focus-bubble li.current{
	background-color: #fff;
}
</style>
</head>
<body>
<div id="focus-banner">
  <ul id="focus-banner-list">
    <li> <a href="#" class="focus-banner-img"> <img src="images/banner2.png" alt=""> </a>
    </li>
    <li> <a href="#" class="focus-banner-img"> <img src="images/banner3.png" alt=""> </a>
    </li>
    <li> <a href="#" class="focus-banner-img"> <img src="images/banner4.png" alt=""> </a>
    </li>
    <li> <a href="#" class="focus-banner-img"> <img src="images/banner5.png" alt=""> </a>
    </li>
  </ul>
  <a href="javascript:;" id="next-img" class="focus-handle"></a> <a href="javascript:;" id="prev-img" class="focus-handle"></a>
  <ul id="focus-bubble">
  </ul>
</div>
<script src="js/jquery-1.10.1.min.js"></script> 
<script>
		$(function(){
			var focusBanner=function(){
				var $focusBanner=$("#focus-banner"),
					$bannerList=$("#focus-banner-list li"),
					$focusHandle=$(".focus-handle"),
					$bannerImg=$(".focus-banner-img"),
					$nextBnt=$("#next-img"),
					$prevBnt=$("#prev-img"),
					$focusBubble=$("#focus-bubble"),
					bannerLength=$bannerList.length,
					_index=0,
					_timer="";

					var _height=$(".focus-banner-img").find("img").height();
					$focusBanner.height(_height);
					$bannerImg.height(_height);

					for(var i=0; i<bannerLength; i++){
						$bannerList.eq(i).css("zIndex",bannerLength-i);
						$focusBubble.append('<li><a href="javascript:;">'+i+'</a></li>');
					}
					$focusBubble.find("li").eq(0).addClass("current");
					var bubbleLength=$focusBubble.find("li").length;
					$focusBubble.css({
						"width":bubbleLength*22,
						"marginLeft":-bubbleLength*11
					});//初始化

					$focusBubble.on("click","li",function(){
						$(this).addClass("current").siblings().removeClass("current");
						_index=$(this).index();
						changeImg(_index);
					});//点击轮换

					$prevBnt.on("click",function(){
						_index++
						if(_index>bannerLength-1){
							_index=0;
						}
						changeImg(_index);
					});//下一张

					$nextBnt.on("click",function(){
						_index--
						if(_index<0){
							_index=bannerLength-1;
						}
						changeImg(_index);
					});//上一张

					function changeImg(_index){
						$bannerList.eq(_index).fadeIn(250);
						$bannerList.eq(_index).siblings().fadeOut(200);
						$focusBubble.find("li").removeClass("current");
						$focusBubble.find("li").eq(_index).addClass("current");
						clearInterval(_timer);
						_timer=setInterval(function(){$prevBnt.click()},5000)
					}//切换主函数
					_timer=setInterval(function(){$prevBnt.click()},5000);


					function isIE() { //ie?
						if (!!window.ActiveXObject || "ActiveXObject" in window)
						return true;
						else
						return false;
					}

					if(!isIE()){
						$(window).resize(function(){ 	
							window.location.reload();
						});
					}else{
						if(!+'\v1' && !'1'[0]){ 
							alert("ie8以下版本啊！")
						} else{
							$(window).resize(function(){ 	
								window.location.reload();
							});
						};
					}
			}();	
		})
	</script>
</body>
</html>