jQuery实现图片轮播效果,jQuery实现焦点新闻

效果图:

jQuery实现图片轮播效果,jQuery实现焦点新闻_第1张图片

实现代码:

<!DOCTYPE html>
<html>
	<head>
		<title>图片轮播,新闻轮播,焦点新闻轮播</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){		   
				var index=0;
				var slideFlag = true;
				var length=$(".roll-news-image img").length;

				function showImg(i){
					$(".roll-news-image img")
					.eq(i).stop(true,true).fadeIn(800)
					.siblings("img").hide();

					$(".roll-news-index li").removeClass("roll-news-index-hover");
					$(".roll-news-index li").eq(i).addClass("roll-news-index-hover");

					$(".roll-news-title a")
					.eq(i).stop(true,true).fadeIn(800)
					.siblings("a").hide();
				}
				showImg(index);
				
				$(".roll-news-index li").click(function(){
					index = $(".roll-news-index li").index(this);
					showImg(index);
					slideFlag = false;
				});	
				
				function autoSlide() {
					setInterval(function() {
						if(slideFlag) {
							showImg((index+1) % length);
							index = (index+1)%length;
						}
						slideFlag = true;
					}, 3000);
				}
				
				autoSlide();
				
			});
		</script>
		<style type="text/css">
			* {
				padding:0px;
				margin:0px;
			}
			.roll-news {
				width:480px;
				height:300px;
				border:solid 1px #c1c1c1;
			}
			.roll-news-index-hover {
				background-color:white;
			}
			.roll-news-image img {
				width:480px;
				height:300px;
			}
			.roll-news-index {
				position:relative;
				top:-50px;
				margin-right:5px;
				float:right;
			}
			.roll-news-index {
			}
			.roll-news-index li {
				list-style:none;
				float:left;
				font-size:12px;
				font-weight:600;
				width:18px;
				height:16px;
				line-height:16px;
				cursor:pointer;
				margin:0 3px;
				background-image:url(opacity_50.png);
				text-align:center;
			}
			.roll-news-title {
				position:relative;
				top:-25px;
				padding-left:10px;
				height:22px;
				line-height:20px;
				background:url(opacity_50.png);
			}
			.roll-news-title a {
				font-size:12px;
				text-decoration:none;
				color:#222222;
			}
			.roll-news-title a:hover {
				color:red;
			}
		</style>
	</head>
	<body>
		<div class="roll-news">
			<div class="roll-news-image">
				<img src="http://h.hiphotos.baidu.com/album/w%3D2048/sign=e952491b5243fbf2c52ca1238446ca80/d4628535e5dde711bfe12fe5a6efce1b9d1661f5.jpg">
				<img src="http://img2.duitang.com/uploads/item/201111/15/20111115104036_AcnUz.thumb.600_0.jpg" style="display:none">
				<img src="http://img4.duitang.com/uploads/item/201202/29/20120229160925_jJ2Ei.thumb.600_0.jpg" style="display:none">
			</div>
			<div class="roll-news-index">
				<ul>
					<li class="roll-news-index-hover">1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</div>
			<div class="roll-news-title">
				<a href="" target="_blank">图片1:点击后跳转</a>
				<a href="" target="_blank" style="display:none">图片2:点击后跳转</a>
				<a href="" target="_blank" style="display:none">图片3:点击后跳转</a>
			</div>
		</div>
	</body>
</html>

附件中包含一张引用的图片,其它可以直接拷贝看效果。。

你可能感兴趣的:(jQuery实现图片轮播效果,jQuery实现焦点新闻)