js实现图片轮播

转载 2015年07月09日 11:01:51
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Owl Carousel制作百度百科2014新首页幻灯片演示</title>

<link type="text/css" rel="stylesheet" href="css/owl.carousel.css">
<link type="text/css" rel="stylesheet" href="css/owl.theme.css">

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
.scroll-outer{height:421px;background:url(images/bg.jpg) 50% 0 no-repeat;}
#scroll{width:1080px;margin:0 auto;padding-top:30px;font-family:"Microsoft Yahei";}
#scroll .owl-wrapper-outer{margin:0 auto;}
#scroll .item{position:relative;width:250px;height:339px;margin:0 auto;background-color:#fff;overflow:hidden;}
#scroll .shd{position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.15);}
#scroll .shd a{display:block;width:250px;height:239px;*background-image:url(about:blank);background-image:url(about:blank)\0;}
#scroll .txt{position:absolute;left:0;bottom:0;width:226px;height:100px;padding:0 12px;color:#888;box-shadow:0 0 15px 15px rgba(228, 233, 238, 0.95);background-color:#e4e9ee\9;background-color:rgba(228, 233, 238, 0.95);}
#scroll h3{width:226px;height:25px;margin-bottom:6px;padding-top:6px;font:700 18px/25px arial,"Microsoft Yahei";overflow:hidden;}
#scroll h3 a{color:#333;text-decoration:none;}
#scroll h3 a:hover{color:#338de6;}
#scroll p{width:226px;height:54px;line-height:18px;font-size:12px;}

#scroll .item:hover .shd{background-color:rgba(0, 0, 0, 0);}
#scroll .item:hover .txt{background-color:#fff\9;background-color:rgba(248, 249, 249, 0.95);box-shadow:0 0 15px 15px rgba(248, 249, 249, 0.95);}

.owl-theme .owl-controls .owl-buttons div{position:absolute;top:180px;width:30px;height:60px;margin:0;padding:0;border-radius:0;font:60px/60px "宋体";background-color:transparent;overflow:hidden;_display:none;}
.owl-theme .owl-controls .owl-buttons .owl-prev{left:-40px;}
.owl-theme .owl-controls .owl-buttons .owl-next{right:-40px;}
.owl-theme .owl-controls .owl-buttons .owl-prev:before{content:"<";}
.owl-theme .owl-controls .owl-buttons .owl-next:before{content:">";}
</style>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script type="text/javascript">
$(function(){
	$('#scroll').owlCarousel({
		items: 4,
		autoPlay: true,
		navigation: true,
		navigationText: ["",""],
		scrollPerPage: true
	});
});
</script>

</head>

<body>

<div class="scroll-outer">
	<div id="scroll" class="owl-carousel">
		<div class="item">
			<img src="images/1.jpg" alt="">
			<div class="shd"><a href="http://www.17sucai.com/"></a></div>
			<div class="txt">
				<h3><a href="http://www.17sucai.com/">港版iPhone 6发布</a></h3>
				<p>苹果在2014年9月推出的新产品,4.7寸的iPhone6和5.5寸的iPhone 6 Plus携新广告文案“Bigger than Bigger”正式亮相。</p>
			</div>
		</div>
		<div class="item">
			<img src="images/2.jpg" alt="">
			<div class="shd"><a href="http://www.17sucai.com/"></a></div>
			<div class="txt">
				<h3><a href="http://www.17sucai.com/">500万Gmail用户名密码泄露</a></h3>
				<p>据美国CNN 9月10日报道,近500万个Gmail用户的账号密码被黑客发布到了俄罗斯的一个比特币论坛上。</p>
			</div>
		</div>
		<div class="item">
			<img src="images/3.jpg" alt="">
			<div class="shd"><a href="http://www.17sucai.com/"></a></div>
			<div class="txt">
				<h3><a href="http://www.17sucai.com/">柳宗元铜像被拆除</a></h3>
				<p>广西柳州投资7000万元修建柳宗元像,将成为国内最高的人物铜像,但由于资金不到位,仅完成底座和核心柱子就被拆除。</p>
			</div>
		</div>
		<div class="item">
			<img src="images/4.jpg" alt="">
			<div class="shd"><a href="http://www.17sucai.com/"></a></div>
			<div class="txt">
				<h3><a href="http://www.17sucai.com/">越狱案逃犯高玉伦被抓获</a></h3>
				<p>哈尔滨越狱案3名嫌犯之一,此前被判死刑,于9月11日下午17时许在延寿县青川乡被公安机关抓获。</p>
			</div>
		</div>
		<div class="item">
			<img src="images/5.jpg" alt="">
			<div class="shd"><a href="http://www.17sucai.com/"></a></div>
			<div class="txt">
				<h3><a href="http://www.17sucai.com/">21世纪网收企业“保护费”</a></h3>
				<p>2014年9月3日,21世纪网包括主编、副主编在内的相关人员,因涉嫌新闻敲诈被上海市公安局抓获。</p>
			</div>
		</div>
		<div class="item">
			<img src="images/6.jpg" alt="">
			<div class="shd"><a href="http://www.17sucai.com/"></a></div>
			<div class="txt">
				<h3><a href="http://www.17sucai.com/">电子港澳通行证15日起启用</a></h3>
				<p>2014年9月,公安部决定,全国公安机关出入境管理部门自9月15日起全面启用电子往来港澳通行证。</p>
			</div>
		</div>
		<div class="item">
			<img src="images/7.jpg" alt="">
			<div class="shd"><a href="http://www.17sucai.com/"></a></div>
			<div class="txt">
				<h3><a href="http://www.17sucai.com/">“刀锋战士”枪杀女友非故意</a></h3>
				<p>残疾人100、200、400米世界纪录保持者。因涉嫌枪杀女友受审,2014年9月11日,法院宣判其故意杀人罪不成立。</p>
			</div>
		</div>
		<div class="item">
			<img src="images/8.jpg" alt="">
			<div class="shd"><a href="http://www.17sucai.com/"></a></div>
			<div class="txt">
				<h3><a href="http://www.17sucai.com/">苏格兰将举行独立公投</a></h3>
				<p>苏格兰独立公投将于9月18日举行。9月10日英国首相前往苏格兰进行挽留,试图阻止公众在9月18日的公投中支持独立。</p>
			</div>
		</div>
		<div class="item">
			<img src="images/9.jpg" alt="">
			<div class="shd"><a href="http://www.17sucai.com/"></a></div>
			<div class="txt">
				<h3><a href="http://www.17sucai.com/">特色词条:小熊猫</a></h3>
				<p>躯体肥壮,身上披有粗长的毛,主要生活于海拔3000米以下有竹丛的地方,平日栖居于大的树洞或石洞中。</p>
			</div>
		</div>
		<div class="item">
			<img src="images/1.jpg" alt="">
			<div class="shd"><a href="http://www.17sucai.com/"></a></div>
			<div class="txt">
				<h3><a href="http://www.17sucai.com/">港版iPhone 6发布</a></h3>
				<p>苹果在2014年9月推出的新产品,4.7寸的iPhone6和5.5寸的iPhone 6 Plus携新广告文案“Bigger than Bigger”正式亮相。</p>
			</div>
		</div>
		<div class="item">
			<img src="images/2.jpg" alt="">
			<div class="shd"><a href="http://www.17sucai.com/"></a></div>
			<div class="txt">
				<h3><a href="http://www.17sucai.com/">500万Gmail用户名密码泄露</a></h3>
				<p>据美国CNN 9月10日报道,近500万个Gmail用户的账号密码被黑客发布到了俄罗斯的一个比特币论坛上。</p>
			</div>
		</div>
		<div class="item">
			<img src="images/3.jpg" alt="">
			<div class="shd"><a href="http://www.17sucai.com/"></a></div>
			<div class="txt">
				<h3><a href="http://www.17sucai.com/">柳宗元铜像被拆除</a></h3>
				<p>广西柳州投资7000万元修建柳宗元像,将成为国内最高的人物铜像,但由于资金不到位,仅完成底座和核心柱子就被拆除。</p>
			</div>
		</div>
	</div>
</div>

</body>
</html>
http://www.17sucai.com/pins/8650.html

原生javascript实现图片自动轮播和点击轮播代码

Document /*重置样式*/ *{margin: 0;padding: 0; list-style: none;} /*wrap的轮播图和切换按钮样式*/ .wrap{hei...
  • sinat_21206105
  • sinat_21206105
  • 2016年08月23日 09:56
  • 11693

js实现轮播图原理及示例

网上有很多的例子介绍,在这里我所做的无缝滚动就是 通过改变元素的left值让图片呈现左右滚动的效果。 我们首先看一下 div+css 的结构样式: div+css代码 ...
  • diligentkong
  • diligentkong
  • 2017年02月15日 15:06
  • 12900

原生JS-实现无限图片轮播

实现思路:      一、布局部分:                1、采用div>ul>li>img布局,来展示轮播的图片banner;                2、采用div>>ul>...
  • q908555281
  • q908555281
  • 2017年04月21日 14:01
  • 2409

js实现的图片轮播器效果

  • 2015年08月19日 19:27
  • 526KB
  • 下载

JS简单实现仿网页图片轮播

  • 2017年10月30日 17:00
  • 625KB
  • 下载

js实现图片轮播

  • 2015年10月14日 15:35
  • 631B
  • 下载

js实现左右按钮图片轮播效果

  • 2013年05月29日 22:45
  • 258KB
  • 下载

js实现图片轮播(根据同事代码整理而得)

本文主要copy了同事的代码,不过给代码加载了大量注释从而使得代码清晰。我想这也算是翻译吧。 先上图,看看本实例的具体轮播功能。 如图: 需要实现的功能点如下: 第一:上边一栏的翻屏功能,...
  • motian06
  • motian06
  • 2012年09月06日 13:59
  • 21626

js实现图片轮播效果

html部分:div(总容器)包含两个列表(图片列表&数字列表)css部分:1.全局:去掉所有列表前的样式(ul去点,ol去数字) 2.整个div容器:设置长宽(和图片大小一样),设置超过部分影藏。...
  • github_34644454
  • github_34644454
  • 2016年09月27日 11:41
  • 153

2个js实现图片轮播效果(用)

第一个(使用) 不过要注意在web.config中将该location的位置的访问权限设为allow user="*",设置了deny user="?"或"*"将导致无法看到图片,今天费了一番功...
  • GoodShot
  • GoodShot
  • 2013年02月22日 03:21
  • 1799
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js实现图片轮播
举报原因:
原因补充:

(最多只允许输入30个字)