百度校园 频道的JS焦点图代码 带缩略图

最新推荐文章于 2024-07-15 13:17:25 发布
最新推荐文章于 2024-07-15 13:17:25 发布
阅读量762 收藏
点赞数
分类专栏： html 文章标签： html js
  • 百度校园 频道的JS焦点图代码 带缩略图，鼠标只需放在缩略图上就可以切换大图片，上面显示大图片，下面显示缩略图，是一种比较经典的图片切换特效，来自百度官方的图片特效，基于jquery1.6.2插件，期待前端开发者一同参考研究。
<!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>
<title>百度校园jQuery焦点图</title>
<script type="text/javaScript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
<style>
html, form, h1, h2, h3, h4, h5, h6, p{margin:0; padding:0;}
body {
margin:0; padding:0; border:none;
font-size:12px;
line-height:150%;
color:#676767;
background:#fff;
font-family:Arial, Helvetica, sans-serif;
/*font-family:'\5FAE\8F6F\96C5\9ED1';*/
font-family:'\5B8B\4F53';
}
img{ margin:0; padding:0; border:none;}
ol, ul, li, dl, dt, dd{
margin:0; padding:0;
list-style: none;
}
.fl{ float:left;}
.fr{ float:right;}
a{ color:#0068CC; text-decoration:none;}
a:hover{ color:#0151A7; text-decoration:underline;}
.w1003{ width:800px; margin:0 auto;}
.w733{ width:733px; overflow:hidden;}
.w256{ width:256px; overflow:hidden;}
.highlight_tip{ padding:7px 0 0; z-index:10; position:relative; position:absolute; left:0; bottom:0; width:733px; height:57px;}
.highlight_tip ul li{ position:absolute; z-index:20; top:10px; cursor:pointer;}
ul li.tab1{ left:8px}
ul li.tab2{ left:110px}
ul li.tab3{ left:212px}
ul li.tab4{ left:316px}
ul li.tab5{ left:419px}
ul li.tab6{ left:524px}
ul li.tab7{ left:628px}
.v_content_list ul{ position:absolute}
.v_content_list ul li{ width:733px; float:left; overflow:hidden; position:relative}
li.navigation img{width:95px;border: 1px #fff solid;position:absolute;opacity:0.5;-moz-opacity:0.5;-webkit-opacity:0.5;	filter:alpha(opacity=50);}
li.current img{border: 2px #0076A8 solid;opacity:1;-moz-opacity:1;-webkit-opacity:1;filter:alpha(opacity=100)}
#slider_container_2 { float: left; margin: 0 0 0 -15px; padding: 15px; width: 700px; background: url(../img/bg.png) no-repeat 0 0; }
.SliderName_2 {
	float: left;
	height: 337px;
	overflow: hidden;
}
.SliderNamePrev_2 {
	background: url(../img/left.png) no-repeat left center;
	width: 50px;
	height: 450px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	text-decoration: none;
}
.SliderNameNext_2 {
	background: url(../img/right.png) no-repeat right center;
	width: 50px;
	height: 450px;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	text-decoration: none;
}
.SliderName_2Description {
	padding: 10px;
	font-family: Tahoma,Arial,Helvetica;
	font-size: 14px;
	line-height: 30px;
	letter-spacing: 1px;
	text-align: center;
	color: #ffffff;
	text-shadow: 0 1px 3px #000000;
}
#SliderNameNavigation_2 { margin: 0; padding: 0; text-align: center; position: absolute;bottom: 0px;z-index: 100;left:9px; }
#SliderNameNavigation_2 a:link, #SliderNameNavigation_2 a:active, #SliderNameNavigation_2 a:visited, #SliderNameNavigation_2 a:hover{
	margin: 0;
	padding: 0;
	font-size: 0;
	line-height: 0;
	text-decoration: none;
}
#SliderNameNavigation_2 a img
{
	border: 1px #fff solid;
	width: 95px;
	opacity:0.5;
	-moz-opacity:0.5;
	-webkit-opacity:0.5;
	filter:alpha(opacity=50);
	height: 44px;
}
#SliderNameNavigation_2 a.active img
{
	border: 2px #0076A8 solid;
	opacity:1;
	-moz-opacity:1;
	-webkit-opacity:1;
	filter:alpha(opacity=100);
}
div.w733{ position:relative;left:0px;top:0px;}
</style>
</head>
<body>
<div class="w1003 main">
<div class="boxa" style="margin-top:10px;">
<script type="text/javascript">
$(document).ready(function(){
var picWidth = $(".v_content_list").width(); //获取显示焦点图的宽度
var len = $(".v_content_list ul li").length; //获取焦点图个数
var img_container = $(".v_content_list ul"); //定义变量
var button_container = $(".highlight_tip li"); //定义变量
var index = 0; //初始化index=0
//设置tab按钮的背景透明度为0.5
//$(".highlight_bg").css("opacity","0.5")
//为tab按钮添加鼠标滑入事件，以显示相应的内容
button_container.mouseenter(function() {
	index = button_container.index(this);
	showPics(index);
}).eq(0).trigger("mouseenter");
//计算出外围ul元素的宽度
img_container.css("width",picWidth * (len));
//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
$(".v_content_list").hover(function() {
	clearInterval(picTimer);
},function() {
	picTimer = setInterval(function() {
		showPics(index);
		index++;
		if(index == len) {index = 0;}
	},4000); //4000代表自动播放的间隔，单位：毫秒，1秒=1000毫秒
}).trigger("mouseleave");
//显示图片函数，根据接收的index值显示相应的内容
function showPics(index) { //默认效果
	var nowLeft = -index*picWidth; //根据index值计算ul元素的left值
	//alert(nowLeft);
	img_container.stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
	button_container.eq(index).addClass("current").siblings().removeClass("current"); //为当前的tab按钮添加class="current"
//button_container.eq(index).stop(true).animate({"opacity":"1","top":-5+"px"},300).siblings().stop(true).animate({"opacity":"0.6","top":10+"px"},300); //为当前的tab按钮添加选中的效果
	}
})
</script>
		<div class="w733 fl" style="height:337px;">
			<div class="highlight_tip">
				<ul class="tab clear">
					<li class="tab1 navigation">
					<a href="/" target="_blank">
					<img src="/jscss/demoimg/201402/up_5281c48354ddb.jpg" width="99" height="48" /></a>
					</li>
					<li class="tab2 navigation">
					<a href="/" target="_blank">
					<img src="/jscss/demoimg/201402/up_529707516da03.jpg" width="99" height="48" /></a>
					</li>
					<li class="tab3 navigation">
					<a href="/" target="_blank">
					<img src="/jscss/demoimg/201402/up_5289cedae6005.png" width="99" height="48" /></a>
					</li>
					<li class="tab4 navigation">
					<a href="/" target="_blank">
					<img src="/jscss/demoimg/201402/up_52689f01d614e.jpg" width="99" height="48" /></a>
					</li>
					<li class="tab5 navigation">
					<a href="/" target="_blank">
					<img src="/jscss/demoimg/201402/up_529703723c8d7.jpg" width="99" height="48" /></a>
					</li>
					<li class="tab6 navigation">
					<a href="/" target="_blank">
					<img src="/jscss/demoimg/201402/up_50594c1f97227.jpg" width="99" height="48" /></a>
					</li>
					<li class="tab7 navigation">
					<a href="/" target="_blank">
					<img src="/jscss/demoimg/201402/up_514fc23184f3d.jpg" width="99" height="48" /></a>
					</li>
				</ul>
			</div>
			<div class="v_content_list">
				<ul class="clear">
					<li></a>
					<a href="/" target="_blank">
					<img src="/jscss/demoimg/201402/up_5281c48354ddb.jpg" width="733" height="337" /></a></li>
					<li><a href="/" target="_blank">
					<img src="/jscss/demoimg/201402/up_529707516da03.jpg" width="733" height="337" /></a></li>
					<li><a href="/" target="_blank">
					<img src="/jscss/demoimg/201402/up_5289cedae6005.png" width="733" height="337" /></a></li>
					<li>
					<a href="/" target="_blank">
					<img src="/jscss/demoimg/201402/up_52689f01d614e.jpg" width="733" height="337" /></a></li>
					<li>
					<a href="/" target="_blank">
					<img src="/jscss/demoimg/201402/up_529703723c8d7.jpg" width="733" height="337" /></a></li>
					<li><a href="/" target="_blank">
					<img src="/jscss/demoimg/201402/up_50594c1f97227.jpg" width="733" height="337" /></a></li>
					<li><a href="/" target="_blank">
					<img src="/jscss/demoimg/201402/up_514fc23184f3d.jpg" width="733" height="337" /></a></li>
				</ul>
			</div>
		</div>
	</div>
</div>
<div style="text-align:center;clear:both">
</div>
</body>
</html>


xlhu618
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery百度百家首页新闻焦点图切换效果代码
11-16
jQuery百度百家首页新闻焦点图切换效果代码
百度新闻首页焦点图代码.rar
05-25
百度新闻首页焦点图代码是一款基于jQuery制作的图片切换焦点图代码，带有圆形左右箭头按钮控制图片切换，淡进淡出显示图片效果，图片定时轮播切换，代码有详细的中文注释，供大家参考使用。
分享111个JS焦点图代码，总有一款适合您
zy0412326的专栏
02-09 790
JS
Dreamweaver之简单实现网站布局、图片漂浮、区域跳转、登陆注册及图片查看器
杨秀璋的专栏
11-22 1万+
这篇文章是作者《中小型网站开发及web设计》课程给同学们分享的网页设计在线知识，主要涉及Dreamweaver实现网站布局、简单站点开发、区域跳转、注册登录界面、图片查看器等内容，课程前期已经详细讲解了TXT撰写HTML基础代码，后期准备结合软件加深下。非常基础的文章，希望对初学者有所帮助。 1.Dreamweaver创建站点及注册页面 2.DW实现网页区域跳转 3.图片广告漂浮及Spry菜单栏 4.网站简单布局及样式设置 5.JS登陆界面实现 6.图片浏览器
毕业设计，校园新闻系统，使用SpringBoot、SpringMVC、Mybatis、Bootstrap
xiaoa全栈开发的博客
01-21 925
此系统是基于Java EE的校园新闻平台。在后端方面选择以Spring Boot 为主整合Spring、Spring MVC和MyBatis的结构，实现了后台对整个系统的全方位管理，包括普通用户的注册、登录，新闻资讯信息的编辑、修改与发布，以及管理员对新闻资讯信息监管、完善与审核等一系列操作。在数据库方面选择MySQL作为数据库，使用MyBatis + Druid简化多源数据库的配置以及数据库操作。
android安卓源码海量项目合集打包-1
热门推荐
chenhao0568的专栏
06-11 13万+
下载地址 最后更新共计113个分类5177套源码29.2 GB。 卷 新加卷 的文件夹 PATH 列表 卷序列号为 00000200 5E7A:7F30 F:. ├─前台界面 │ ├─3D标签云卡片热门 │ │ Android TagCloudView云标签的灵活运用.rar │ │ Android 实现 标签 拖动 改变位置.rar │ │ android 流式布局和热门标签.zip │ │ ...
jQuery带缩略图的焦点图代码
04-07
"jQuery带缩略图的焦点图代码"是一个专门用于创建这种效果的脚本，它结合了jQuery库的优势，为用户提供了一种交互性强、视觉效果良好的图片切换功能。下面将详细介绍这个焦点图代码的核心知识点。 1. **jQuery库**...
四屏JS带缩略图和箭头的焦点图代码
01-23
总的来说，"四屏JS带缩略图和箭头的焦点图代码"是一个集成了多种前端技术的实用工具，它结合了JavaScript的动态性、DOM的操作、CSS的美化以及用户友好的交互设计，为网页内容展示提供了一个高效且灵活的解决方案。...
带缩略图5屏轮换焦点图代码
04-07
"带缩略图5屏轮换焦点图代码"就是一种这样的技术，它结合了图片轮播、缩略图导航以及淡入淡出的过渡效果，使得网站上的图片展示更加生动有趣。以下将详细介绍这一技术的关键知识点： 1. **图片轮播**：图片轮播是...
四屏带缩略图的焦点图代码
01-23
四屏带缩略图的焦点图代码是一种常见的网页设计元素，用于展示一组图像或内容，通常在网站的首页或产品展示区域使用。这种设计模式能够吸引用户的注意力，并提供交互式的用户体验。焦点图由四个主要部分组成：主显示...
js新闻焦点图代码制作带缩略图的焦点图代码
11-13
利用JavaScript（JS）来制作带缩略图的焦点图代码，可以提供更加交互式和用户体验友好的效果。下面将详细介绍这个主题，并围绕相关知识点进行展开。 首先，我们要理解JavaScript的基本概念。JavaScript是一种轻量级...
HTML的文档类型与字符集＜!DOCTYPE html＞
最新发布
m0_65696193的博客
07-15 224
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">我们使用的是 html 5 的版本。
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 2953
title>充电效果
html 关闭信息窗口
cuisidong1997的博客
07-14 189
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
HTML 学习指南：从入门到精通
英英的博客
07-09 451
HTML（HyperText Markup Language）是构建网页的框架。掌握HTML不仅能更好的理解网页的结构，还能为进一步学习CSS、JavaScript等前端技术打下坚实的基础。本篇文章将为你规划一条从HTML入门到精通的学习路线，并概述每个阶段的核心内容。
html转markdown nodejs实现
学习使我快乐_玉祥
07-09 265
用到了jsdom库，直接现成处理html标签结构，只需要关心format格式化样式即可。比较简易，待后续优化，目前只是短时间批量转换html文件。
ChatGPT对话：如何把Html文件转换为Markdown文件
uestcai的博客
07-15 1023
【编者按】ChatGPT提供了多种方法。编者常用VS Code，所以想使用VS Code解决问题，但ChatGPT提供了一些错误的方法，失败了。最后发现编写python程序最简单。
什么是HTML？
m0_65696193的博客
07-15 437
Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。Presto（已经废弃） 是挪威产浏览器 opera 的 "前任" 内核，为何说是 "前任"，因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。- 行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript js。- 表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。- 重要的原则：页面三层分离(HTML,css，js书写的时候分开来写)。
右侧带缩略图jquery焦点图
08-06
右侧带缩略图jQuery焦点图是一种常见的网页设计元素，用于展示多个图片并且以焦点图的形式呈现在网页的右侧。它常用于网站首页或者产品展示页面，能够突出展示图片，吸引用户的注意力。 这种焦点图使用了jQuery库，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值