zoukankan      html  css  js  c++  java

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

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

    效果图：

    实现代码：

    [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.                 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.                 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.                 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 {
				480px;
				height:300px;
				border:solid 1px #c1c1c1;
			}
			.roll-news-index-hover {
				background-color:white;
			}
			.roll-news-image img {
				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;
				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>

    附件中包含一张引用的图片，其它可以直接拷贝看效果。。
  • 相关阅读:
    jdk动态代理底层实现
    spring-FactoryBean
    大型网站技术架构 核心原理与案例分析 pdf
    实战JAVA虚拟机 JVM故障诊断与性能优化 pdf
    《实战Java高并发程序设计》pdf
    mysql-注意点
    Json入门
    inflate, findViewById与setContentView的区别与联系
    提高编程能力的7条建议
    JDBC之一：JDBC快速入门
  • 原文地址：https://www.cnblogs.com/freeliver54/p/3682160.html
Copyright © 2011-2022 走看看