js实现图片轮播

最新推荐文章于 2022-03-22 20:11:58 发布
最新推荐文章于 2022-03-22 20:11:58 发布
阅读量644 收藏 1
点赞数 1
分类专栏： 前端工程师 
<!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
YZiAngel
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js简单实现轮播图，带触碰跳页效果，一看就懂，有简便原型模式
wurao_l的博客
03-13 674
js简单实现轮播图，带触碰跳页效果，一看就懂，一学就会。有简便原型模式
如何制作简单的轮播
weixin_57762639的博客
09-27 5069
1.首先，我们打开DW，新建一个HTML，CSS，还有一个JS文件。我们把它们保存到同一个文件夹下，再用link标签引入css样式文件到新建的HTML文件里。 2.然后，再给它一个<div>,给他一个类，设置类名为container。然后，再给一个用来放图片的div，给它一个类，设置类名为list。 3.之后我们用img标签引入图片。 4.然后，再给它一个<div>,给他一个类，设置类名为buttons，再写底部按钮和左右箭头。 5.之后，我们再设置第一.
jQuery+Owl Carousel 百度百科2014图片轮播
11-12
jQuery+Owl Carousel 百度百科2014图片轮播 jQuery+Owl Carousel 百度百科2014图片轮播 jQuery+Owl Carousel 百度百科2014图片轮播 jQuery+Owl Carousel 百度百科2014图片轮播 jQuery+Owl Carousel 百度百科2014图片轮播
jQuery幻灯片插件owlcarousel参数说明中文文档
11-29
Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件，它具有一下特点： 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式 支持进度条 支持自定义事件 支持延迟加载 支持自适应高度 浏览器兼容：兼容所有浏览器，包括 IE6、IE7。 jQuery 兼容：兼容 1.7 及以上版本。 Owl Carousel 使用方法： 新建一个HTML文件 1、在HTML文件中引入Owl Carousel必须文件 <link href="css/owl.carousel.css" rel="ext
jQuery OwlCarousel响应式插件列表图片滚动轮播
11-13
jQuery OwlCarousel响应式插件列表图片滚动轮播
JavaScript实现图片轮播组件代码示例
10-21
本文将详细解析使用JavaScript实现图片轮播组件的过程，包括其关键技术和实现方法。图片轮播组件是一种常见的网页元素，用于在有限的显示空间内展示多张图片，通常具有自动播放和手动切换等功能。 首先，需要了解...
原生JS实现图片轮播切换效果
10-20
在探讨如何使用原生JavaScript实现图片轮播切换效果之前，我们首先需要了解轮播效果的实现原理以及需要的基本HTML结构。 轮播图效果的实现原理主要涉及以下几个核心步骤： 1. 父元素作为显示窗口，我们通过CSS为它...
JS实现图片轮播
10-14
本文将深入探讨如何使用JavaScript实现一个基本的图片轮播效果，结合HTML和CSS来创建一个完整的交互式组件。 首先，我们需要创建HTML结构。一个简单的轮播通常包含一个容器元素，里面包含多个图片元素，以及左右...
基于vue.js实现图片轮播效果
10-20
需要注意的是，上述内容包含了实现图片轮播功能时可能遇到的一些细节，但是由于文档中存在OCR识别错误，部分代码和描述可能并不完整或存在偏差。因此，开发者在实际编码时应参考Vue.js官方文档和社区的最新实践，...
原生js实现点击轮播切换图片
11-21
【原生JS实现点击轮播切换图片】是一个常见的前端网页交互功能，主要目的是通过JavaScript代码实现在用户点击按钮时，图片能够按照指定顺序进行切换，形成一个动态的展示效果。以下将详细介绍实现这一功能的关键技术...
jQuery owl carousel响应式手机端图片触屏滑动特效
11-13
jQuery owl carousel响应式手机端图片触屏滑动特效
OwlCarousel使用
sz_09的博客
07-19 1万+
参考：http://www.jq22.com/jquery-info6010 使用方法 Owl Carousel 2是上一版Owl Carousel的升级版本。Owl Carousel 2可以让你创建漂亮的响应式旋转木马的jQuery插件，它支持移动触摸屏，功能十分强大。Owl的新特性有： 可以无限循环 项目可以居中显示 灵活的速度控制 多级别的paddin...
owlCarousel2学习
huangxiaonian的博客
06-05 880
//轮播 var owl = $('#test').owlCarousel({}); //切换后的函数 owl.on('changed.owl.carousel', function(event) { }); //切换时的函数 owl.on('change.owl.carousel', function() { }); $('#banner').owlCarousel({ //整数5幻灯片每页可见个数 items : 1, //分页 dots : true
JS轮播图的n种方法
热门推荐
Benxiaohai_311的博客
03-22 1万+
第一种 轮播图, 没有耳朵, 自动轮播, 鼠标放上去会停止, 只需在body里面更改图片宽高和图片路径 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一种轮播图，没有耳朵，自动轮播，鼠标放上去会停止，只需在body里面更改图片宽高和图片路径</title> <style> *.
Boostrap实现仿百度百科当前页快捷导航栏效果
luozhangwen的专栏
10-31 1906
Bootstrap实现跨屏自适应仿百度百科当前页快捷导航栏效果. 挺好用的, 用户体验效果比较好, 适合内容栏目比较多的页面.  代码可以直接复制粘贴到html后缀文件直接运行.          访百度百科三级导航当前页导航 /***SideBar**/ .sideBar {     z-index: 999999
Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动
zhh_Tony
11-14 3118
Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动浏览器 - 凤凰涅磐360yi 时间 2013-08-22 11:28:00  博客园精华区 原文  http://www.cnblogs.com/suchso/p/jquery-small-plug-OWLCarousel-touch-mobilebrowser.html 主题 jQuery HTML
html中使用JS实现图片轮播效果
小王先森的代码笔记
11-18 1693
HTML 部分 &lt;div id="bannner" class="main_center_bannar"&gt; &lt;img src="images/ad-01.jpg"/&gt; ...
owlCarousel
u012171227的专栏
07-22 2592
简介 Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件，它具有一下特点： 兼容所有浏览器支持响应式支持 CSS3 过度支持触摸事件支持 JSON 及自定义 JSON 格式支持进度条支持自定义事件支持延迟加载支持自适应高度…… Owl Carousel 提供了众多的参数、回调函数及自定义事件（具体请往下浏览），所以它几乎可以满足你的所有要求。 兼容
javascript实现图片轮播
最新发布
06-07
可以通过以下代码实现Javascript图片轮播： HTML: ```html <div id="slider"> <img class="sliderImg" src="img1.jpg"> <img class="sliderImg" src="img2.jpg"> <img class="sliderImg" src="img3.jpg"> </div> ``` CSS: ```css #slider { width: 500px; height: 300px; overflow: hidden; position: relative; } .sliderImg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } .sliderImg.active { opacity: 1; } ``` Javascript: ```javascript var sliderIndex = 0; var sliderImages = document.querySelectorAll(".sliderImg"); var sliderInterval = setInterval(nextSlide, 3000); function nextSlide() { sliderIndex++; if (sliderIndex >= sliderImages.length) { sliderIndex = 0; } for (var i = 0; i < sliderImages.length; i++) { sliderImages[i].classList.remove("active"); } sliderImages[sliderIndex].classList.add("active"); } ``` 首先，我们在HTML中定义了一个包含三张图片的div，每张图片都有一个类名为“sliderImg”。 接下来，我们在CSS中设置了“slider” div的宽度、高度和overflow属性，并将每张图片的position设置为absolute，top和left设置为0，以便它们都居中并重叠在一起。我们还为每张图片设置了一个opacity属性，以便在切换图片时进行渐变效果。 最后，在Javascript中，我们定义了一个sliderIndex变量，它将跟踪我们当前显示的图片。我们还定义了一个sliderImages变量，它是一个包含所有图片元素的数组。我们使用setInterval函数设置一个间隔时间，以便每隔3秒调用nextSlide函数。在nextSlide函数中，我们将sliderIndex增加1，以便显示下一张图片。如果sliderIndex的值大于或等于图片数量，我们将其重置为0。我们使用一个循环来删除所有图片的“active”类，并将其添加到当前显示的图片。这将触发我们在CSS中定义的渐变效果，并显示新的图片。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值