简单常用的图片轮播，新闻轮播，焦点新闻轮播

最新推荐文章于 2019-06-09 22:03:17 发布

阿聪世家

最新推荐文章于 2019-06-09 22:03:17 发布

阅读量2.1k

点赞数

分类专栏：网站常用jquery效果各种焦点图滚动效果文章标签： jQuery 点击滚动常用

本文链接：https://blog.csdn.net/congcong875/article/details/8989303

版权

网站常用jquery效果同时被 2 个专栏收录

52 篇文章 0 订阅

订阅专栏

各种焦点图滚动效果

11 篇文章 0 订阅

订阅专栏

简单常用的图片轮播，新闻轮播，焦点新闻轮播,废话不说，贴代码，代码简单易懂，非插件，欢迎留言啊，有什么问题可以指出来,效果图如下

<!DOCTYPE html>
<html>
	<head>
		<title>简单常用的图片轮播，新闻轮播，焦点新闻轮播</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
		<script type="text/javascript">
			$(function(){		   
				var index=0;
				var slideFlag = true;
				var length=$(".roll_pic img").length;

				function showImg(i){
					$(".roll_pic a")
					.eq(i).stop(true,true).fadeIn(600)
					.siblings("a").hide();

					$(".roll_num li").removeClass("roll_num_hover");
					$(".roll_num li").eq(i).addClass("roll_num_hover");

					$(".roll_title a")
					.eq(i).stop(true,true).fadeIn(600)
					.siblings("a").hide();
				}
				showImg(index);
				
				$(".roll_num li").click(function(){
					index = $(".roll_num 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();
				
				$("div.roll").hover(function(){
					slideFlag = false;
				}, function(){
					slideFlag = true;
				});

			});
		</script>
		<style type="text/css">
			* {padding:0px;	margin:0px;}
			.roll {width:580px;height:300px;border:solid 1px #c1c1c1;position:relative;}
			.roll_num li.roll_num_hover {background:#dc282b;color:#fff;}
			.roll_pic img {width:580px;height:300px;display:block;}
			.roll_num {position:relative;top:-25px;margin-right:5px;float:right;z-index:10;}
			.roll_num li {list-style:none;float:left;font-size:12px;font-weight:600;width:18px;height:18px;line-height:18px;cursor:pointer;margin:0 3px;text-align:center;color:#dc282b;background:#fff;-moz-border-radius:8px;border-radius:8px;}
			.roll_title {position:relative;top:-30px;padding-left:10px;height:30px;line-height:22px;z-index:10;float:left;}
			.roll_title a {font-size:12px;text-decoration:none;color:#fff;}
			.roll_title a:hover {color:red;}
			.roll_mask{position:relative;background:#000;opacity:0.50;z-index:5;top:-30px;height:30px;}
		</style>
	</head>
	<body>
		<div class="roll">
			<div class="roll_pic">
				<a href="http://www.875.cn/" target="_blank"><img src="http://pic.875.cn/upload/2013-05-22/1751132091.jpg"></a>
				<a href="http://www.875.cn/" style="display:none" target="_blank"><img src="http://pic.875.cn/upload/2013-03-26/1504517406.jpg" ></a>
				<a href="http://www.875.cn/" style="display:none" target="_blank"><img src="http://pic.875.cn/upload/2013-04-12/1003432197.jpg"></a>
			</div>
			
			<div class="roll_num">
				<ul>
					<li class="roll_num_hover">1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</div>
			<div class="roll_title">
				<a href="http://www.875.cn/" target="_blank">图片1的标题</a>
				<a href="http://www.875.cn/" target="_blank" style="display:none">图片2的标题</a>
				<a href="http://www.875.cn/" target="_blank" style="display:none">图片3的标题</a>
			</div>
			<div class="roll_mask"></div>
		</div>
	</body>
</html>