[转]jQuery实现图片轮播效果，jQuery实现焦点新闻

2022-07-12 09:29:18

本文转自：http://blog.csdn.net/tsyj810883979/article/details/8986157

效果图：

[转]jQuery实现图片轮播效果，jQuery实现焦点新闻

实现代码：

[html] view plaincopyprint?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>图片轮播，新闻轮播，焦点新闻轮播</title>  
  5.         <meta http-equiv="content-type" content="text/html;charset=utf-8"/>  
  6.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
  7.         <script type="text/javascript">  
  8.             $(document).ready(function(){            
  9.                 var index=0;  
  10.                 var slideFlag = true;  
  11.                 var length=$(".roll-news-image img").length;  
  12.   
  13.                 function showImg(i){  
  14.                     $(".roll-news-image img")  
  15.                     .eq(i).stop(true,true).fadeIn(800)  
  16.                     .siblings("img").hide();  
  17.   
  18.                     $(".roll-news-index li").removeClass("roll-news-index-hover");  
  19.                     $(".roll-news-index li").eq(i).addClass("roll-news-index-hover");  
  20.   
  21.                     $(".roll-news-title a")  
  22.                     .eq(i).stop(true,true).fadeIn(800)  
  23.                     .siblings("a").hide();  
  24.                 }  
  25.                 showImg(index);  
  26.                   
  27.                 $(".roll-news-index li").click(function(){  
  28.                     index = $(".roll-news-index li").index(this);  
  29.                     showImg(index);  
  30.                     slideFlag = false;  
  31.                 });   
  32.                   
  33.                 function autoSlide() {  
  34.                     setInterval(function() {  
  35.                         if(slideFlag) {  
  36.                             showImg((index+1) % length);  
  37.                             index = (index+1)%length;  
  38.                         }  
  39.                         slideFlag = true;  
  40.                     }, 3000);  
  41.                 }  
  42.                   
  43.                 autoSlide();  
  44.                   
  45.             });  
  46.         </script>  
  47.         <style type="text/css">  
  48.             * {  
  49.                 padding:0px;  
  50.                 margin:0px;  
  51.             }  
  52.             .roll-news {  
  53.                 width:480px;  
  54.                 height:300px;  
  55.                 border:solid 1px #c1c1c1;  
  56.             }  
  57.             .roll-news-index-hover {  
  58.                 background-color:white;  
  59.             }  
  60.             .roll-news-image img {  
  61.                 width:480px;  
  62.                 height:300px;  
  63.             }  
  64.             .roll-news-index {  
  65.                 position:relative;  
  66.                 top:-50px;  
  67.                 margin-right:5px;  
  68.                 float:right;  
  69.             }  
  70.             .roll-news-index {  
  71.             }  
  72.             .roll-news-index li {  
  73.                 list-style:none;  
  74.                 float:left;  
  75.                 font-size:12px;  
  76.                 font-weight:600;  
  77.                 width:18px;  
  78.                 height:16px;  
  79.                 line-height:16px;  
  80.                 cursor:pointer;  
  81.                 margin:0 3px;  
  82.                 background-image:url(opacity_50.png);  
  83.                 text-align:center;  
  84.             }  
  85.             .roll-news-title {  
  86.                 position:relative;  
  87.                 top:-25px;  
  88.                 padding-left:10px;  
  89.                 height:22px;  
  90.                 line-height:20px;  
  91.                 background:url(opacity_50.png);  
  92.             }  
  93.             .roll-news-title a {  
  94.                 font-size:12px;  
  95.                 text-decoration:none;  
  96.                 color:#222222;  
  97.             }  
  98.             .roll-news-title a:hover {  
  99.                 color:red;  
  100.             }  
  101.         </style>  
  102.     </head>  
  103.     <body>  
  104.         <div class="roll-news">  
  105.             <div class="roll-news-image">  
  106.                 <img src="http://h.hiphotos.baidu.com/album/w%3D2048/sign=e952491b5243fbf2c52ca1238446ca80/d4628535e5dde711bfe12fe5a6efce1b9d1661f5.jpg">  
  107.                 <img src="http://img2.duitang.com/uploads/item/201111/15/20111115104036_AcnUz.thumb.600_0.jpg" style="display:none">  
  108.                 <img src="http://img4.duitang.com/uploads/item/201202/29/20120229160925_jJ2Ei.thumb.600_0.jpg" style="display:none">  
  109.             </div>  
  110.             <div class="roll-news-index">  
  111.                 <ul>  
  112.                     <li class="roll-news-index-hover">1</li>  
  113.                     <li>2</li>  
  114.                     <li>3</li>  
  115.                 </ul>  
  116.             </div>  
  117.             <div class="roll-news-title">  
  118.                 <a href="" target="_blank">图片1：点击后跳转</a>  
  119.                 <a href="" target="_blank" style="display:none">图片2：点击后跳转</a>  
  120.                 <a href="" target="_blank" style="display:none">图片3：点击后跳转</a>  
  121.             </div>  
  122.         </div>  
  123.     </body>  
  124. </html>  
<!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实现焦点新闻,布布扣,bubuko.com

[转]jQuery实现图片轮播效果，jQuery实现焦点新闻

上一篇：Chapter06-Phylogenetic Trees Inherited（POJ 2414）（状态压缩DP）


下一篇：在ASP.NET中处理 datetime 的一些通用函数(vb)