<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://www.5icool.org/demo/2012/a00552/jquery.min.js">
</script>
<script>
$(function() {
var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
var len = $("#focus ul li").length; //获取焦点图个数
var index = 0;
var picTimer;
//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
var btn = "<div class='btnBg'></div><div class='btn'>";
for(var i=0; i < len; i++) {
btn += "<span></span>";
}
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$("#focus").append(btn);
$("#focus .btnBg").css("opacity",0.5);
//为小按钮添加鼠标滑入事件，以显示相应的内容
$("#focus .btn span").css("opacity",0.4).mouseenter(function() {
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");
//上一页、下一页按钮透明度处理
$("#focus .preNext").css("opacity",0.2).hover(function() {
$(this).stop(true,false).animate({"opacity":"0.5"},300);
},function() {
$(this).stop(true,false).animate({"opacity":"0.2"},300);
});
//上一页按钮
$("#focus .pre").click(function() {
index -= 1;
if(index == -1) {index = len - 1;}
showPics(index);
});
//下一页按钮
$("#focus .next").click(function() {
index += 1;
if(index == len) {index = 0;}
showPics(index);
});
//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
$("#focus ul").css("width",sWidth * (len));
//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
$("#focus").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index);
index++;
if(index == len) {index = 0;}
},4000); //此4000代表自动播放的间隔，单位：毫秒
}).trigger("mouseleave");
//显示图片函数，根据接收的index值显示相应的内容
function showPics(index) { //普通切换
var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
var bgcolor = $("#focus ul li").eq(index).children("a").css("background-color");
$(".wrapper").stop(true,false).css("background-color",bgcolor);
}
});
</script>
</head>
<body>
<style type="text/css">
* {margin:0; padding:0;}
body {font-size:12px; color:#222; font-family:Verdana,Arial,Helvetica,sans-serif; background:#f0f0f0;}
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {zoom:1;}
ul,li {list-style:none;}
img {border:0;}
.wrapper {width:100%; padding-bottom:50px;}
h1 {height:50px; line-height:50px; font-size:22px; font-weight:normal; font-family:"Microsoft YaHei",SimHei;}
.download {display:block; width:120px; height:34px; background:#333; line-height:34px; font-size:14px; font-weight:bold; text-align:center; color:#fff; border:1px solid #999; margin-top:10px;}
.fenxiang {height:16px; padding:20px 0 10px; margin-bottom:10px;}
.shuoming {margin-top:20px; border:1px solid #ccc; padding-bottom:10px;}
.shuoming dt {height:30px; line-height:30px; font-weight:bold; text-indent:10px;}
.shuoming dd {line-height:20px; padding:5px 20px;}
/* qqshop focus */
#focus {width:800px; height:280px; overflow:hidden; position:relative; margin:0 auto;}
#focus ul {height:380px; position:absolute;}
#focus ul li {float:left; width:800px; height:280px; overflow:hidden; position:relative; background:#000;}
#focus ul li div {position:absolute; overflow:hidden;}
#focus .btnBg {position:absolute; width:800px; height:20px; left:0; bottom:0; background:#000;}
#focus .btn {position:absolute; width:780px; height:10px; padding:5px 10px; right:0; bottom:0; text-align:right;}
#focus .btn span {display:inline-block; _display:inline; _zoom:1; width:25px; height:10px; _font-size:0; margin-left:5px; cursor:pointer; background:#fff;}
#focus .btn span.on {background:#fff;}
#focus .preNext {width:45px; height:100px; position:absolute; top:90px; background:url(http://www.5icool.org/demo/2012/a00552/img/sprite.png) no-repeat 0 0; cursor:pointer;}
#focus .pre {left:0;}
#focus .next {right:0; background-position:right top;}
</style>
<div class="wrapper">
<div id="focus">
<ul>
<li>
<a style="background-color: yellow;" href="http://www.5icool.org/"><img src="http://www.5icool.org/demo/2012/a00552/img/01.jpg" alt="QQ商城焦点图效果下载" /></a>
</li>
<li>
<a style="background-color: blue;" href="http://www.5icool.org/"><img src="http://www.5icool.org/demo/2012/a00552/img/02.jpg" alt="QQ商城焦点图效果教程" /></a>
</li>
<li>
<a style="background-color: black;" href="http://www.5icool.org/"><img src="http://www.5icool.org/demo/2012/a00552/img/03.jpg" alt="jquery商城焦点图效果" /></a>
</li>
<li>
<a style="background-color: pink;" href="http://www.5icool.org/"><img src="http://www.5icool.org/demo/2012/a00552/img/04.jpg" alt="jquery商城焦点图代码" /></a>
</li>
<li>
<a style="background-color: purple;" href="http://www.5icool.org/"><img src="http://www.5icool.org/demo/2012/a00552/img/05.jpg" alt="jquery商城焦点图源码" /></a>
</li>
</ul>
</div>
</div>
<style type="text/css">
#ttt{
width: 100%;
height: 50px;
}
</style>
<div id="ttt"></div>
</body>
</html>
分享到：
相关推荐
在MFC（Microsoft Foundation Class）库中，Slider控件（也称为TBS）通常用于创建一个可滚动的条形控件，用户可以通过拖动滑块来选择一个数值范围内的值。然而，MFC默认的Slider控件并不支持透明效果，这在某些需要...
Slider.js 是一款强大的开源图片播放控件，专为网页设计者和开发者打造，用于实现高质量的图片展示和交互功能。这款控件具有丰富的特性，包括图片备注和切换效果，能够帮助用户在网页上构建出引人入胜的视觉体验。 ...
在用户界面设计中，滑块（Slider）是一种常见的控件，用于让用户选择一个范围内的值。当用户点击Slider的任意位置时，滑块应能响应并移动到点击的位置，以提供直观的交互体验。 首先，我们要了解Slider的基本结构。...
在Windows Presentation Foundation (WPF) 中，`Slider`控件是一种常见的用户界面元素，它允许用户通过拖动滑块在指定范围内选择一个值。在这个特定的项目中，“wpf slider（滑块随时间滑动） 时间轴”是利用`Slider...
本文将深入探讨如何在Unity中创建弧形UI，特别是圆形的Slider组件，这在各种游戏和应用程序中都有广泛的应用，比如进度指示器、能量条等。 首先，我们来理解"圆形Slider"的概念。在Unity的传统UI系统中，Slider通常...
在IT行业中，滑动条（Slider）是一种常见的用户界面元素，用于表示和调整数值或进度。"slider相当漂亮扩展类库"是一个专为滑动条组件设计的集合，提供了多种不同特性和样式的slider实现，旨在提升用户体验和界面美观...
《nivo-slider3.2：打造出色的jQuery滑动特效》 在Web开发中，动态、交互的用户体验往往能提升网站的吸引力。nivo-slider3.2是一款基于jQuery的滑动插件，它以其丰富的功能、良好的兼容性和简洁的API，深受开发者...
### MFC中Slider Control 使用简例 在Microsoft Foundation Classes (MFC)中，`Slider Control`（滑块控件）是一种常用的用户界面元素，用于让用户通过拖动滑块来选择一个值或设置某个参数。本篇文章将详细介绍如何...
本文将深入探讨MFC中的滑块（Slider）控件的使用，以及如何在MFC界面中实现跳转和线程的运用。 首先，让我们关注“MFC界面跳转”。在MFC应用程序中，界面跳转通常涉及到对话框（Dialog）之间的切换或导航。这可以...
**jQuery Slider 深入解析** 在Web开发中，滑块是一种常见的用户界面元素，用于展示图片、数据或实现进度条功能。jQuery Slider是jQuery库中的一个强大组件，它为开发者提供了灵活且易于使用的滑块解决方案。本篇将...
【标题】中的“基于jQuery实现的EasySlider图片滚动切换插件”是指一种使用JavaScript库jQuery设计的滑动轮播组件。EasySlider是一款流行的轻量级解决方案，它允许开发者在网页上创建美观、流畅的图片或内容滚动效果...
在Windows编程领域，滑块控件（Slider Control）是一种常见的用户界面元素，它允许用户通过在一定范围内选择一个值来调整参数。在VC6（Microsoft Visual C++ 6.0）这样的早期开发环境中，尽管提供了基本的滑块控件，...
滑动条（Slider）作为UI组件之一，通常用于显示数值范围或进度。本篇将深入探讨如何利用C#语言扩展Unity3D中的滑动条功能，包括滑动开始、结束以及点击事件的处理。 首先，我们需要了解Unity3D的UI系统基础。Unity...
《jQuery Royalty Slider：打造触屏手机响应式焦点图片轮播》 在现代网页设计中，视觉效果的吸引力是至关重要的。"jQuery Royalslider.js" 是一款强大的JavaScript库，专为创建高质量、触屏友好的响应式焦点图片...
jQuery nivo.slider是一款广受欢迎的图片滑动幻灯片插件，它以其丰富的特性、出色的动画效果和良好的自定义能力，被广泛应用于网站设计中，为网页增添动态展示的元素。这款插件不仅支持简单的图片轮播，还能配合标题...
Revolution Slider是一个具有视差功能的幻灯片插件，此插件是wordpress上目前为至最强大的幻灯片插件，具有自适应功能、可创建全宽幻灯片、具有视差效果，所有幻灯片拥有的功能他全部拥有。所以，你值得拥有！ 图片...
**royalslider** 是一款强大的、支持触屏的响应式焦点图插件，它专为创建高质量的轮播图和图像滑块而设计。这款插件的独特之处在于它能够适应不同设备的屏幕尺寸，无论是桌面电脑、平板还是手机，都能提供流畅的用户...
在Vue生态中，slider组件是常见的交互元素，常用于展示图片轮播、滑动选择器等场景。本篇文章将深入探讨Vue.js中的slider组件及其开发。 首先，Vue组件是Vue.js的核心特性之一，它允许我们将UI分解为可重用的模块，...
Vue-Concise-Slider是一款基于Vue.js的轻量级滑动组件，专为Vue应用程序设计。这个组件的主要目的是提供一个简单、易用且高度可定制的解决方案，用于创建各种滑动展示，如幻灯片、产品展示或者图像轮播。在本文中，...
**MFC：一个不错的贴图Slider，CBitmapSlider** 在Windows应用程序开发中，Microsoft Foundation Class (MFC) 库提供了一种高效的方式来构建用户界面。MFC 是对 Windows API 的面向对象封装，使得开发者可以使用 ...