那些小事（二）---滚动图片的实现与特效
在许多网站中随处可见各种滚动图片，例如电子商务网站的轮播图以及新闻网站将各个重要新闻的图片滚动的展示在最显眼的地方。还有许多是将礼品或是商品放在一个大小固定的窗口中，提供向左或是向右的按钮看那些没有展示的礼品。那么这些是如何实现的呢？
先来2个滚动图片的实现，还是比较简单的，主要利用了jquery强大的选择器。
<!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" />
<style type="text/css">
a {text-decoration:none; color:#282828;}
a img {border:none;}
body {font-size:12px; font-family:宋体,arial, helvetica, sans-serif; color:#282828;}
.img_nav {position: relative; width: 300px; float: left; height: 356px}
.big_img a {position: absolute; top: 0px; left: 0px}
.img_nav img {width: 300px; height: 356px}
.link_nav {position: absolute; width: 300px; bottom: 0px; background: #000; height: 32px;filter: alpha(opacity=0); opacity: 0.5}//filter设置了滤镜效果，要使用该属性，对象必须具有height，width，position三个属性中的一个。opacity是设置透明度，opacity: 0.5是FF识别的表达方式
.link_nav a {position: absolute; line-height: 32px; color: #fff; left: 5px}
.num_nav {position: absolute; bottom: 7px; right: 2px}
.num_nav span {border-bottom: #b2b2b2 1px solid; text-align: center; border-left: #b2b2b2 1px solid; line-height: 18px; width: 18px; background: #84827e; float: left; height: 18px; color: #fff; font-size: 14px; border-top: #b2b2b2 1px solid; cursor: pointer; font-weight: bold; margin-right: 4px; border-right: #b2b2b2 1px solid}
.num_nav span.selected {border-bottom: #c25e5e 1px solid; border-left: #c25e5e 1px solid; background: #86312e; border-top: #c25e5e 1px solid; border-right: #c25e5e 1px solid}
</style>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript" src="foucs.js"></script>
<title>滚动图片-示例1</title>
</head>
<body>
<div class="img_nav">
<div class="big_img">
<a href="http://" target="_blank"><img src="images/1.jpg" /></a>
<a href="http://" target="_blank"><img src="images/2.jpg" /></a>
<a href="http://" target="_blank"><img src="images/3.jpg" /></a>
</div>
<div class="link_nav">
<a href="http://" target="_blank">图片1</a> <a href="http://" target="_blank">图片2</a> <a href="http://" target="_blank">图片3</a>
</div>
<div class="num_nav">
<span class="selected">1</span> <span>2</span> <span>3</span>
</div>
</div>
</body>
</html>
JS代码
var t = count = n = 0;
$(function(){
$(".big_img a:not(:first)").hide();//默认显示第一个图片
$(".link_nav a:not(:first)").hide();
$num_nav = $(".num_nav span");
$big_img = $(".big_img a");
count = $big_img.length;
t = setInterval("showAuto()", 3000);
$num_nav.click(function(){
var num_nav = $(".num_nav span").index(this);
//得到点击的索引值
$(this).addClass("selected").siblings().removeClass("selected");
//设置该索引的样式，并去除其他同辈元素的样式
$big_img.filter(":visible").fadeOut(500).parent().children().eq(num_nav).fadeIn(1000);
$(".link_nav a").filter(":visible").fadeOut(500).parent().children().eq(num_nav).fadeIn(1000);
});
//将当前可见的图片淡出，parent().children()之后重新得到所有图片，便利出选中的索引图片添加淡入
$(".img_nav").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 3000);});
})
//当鼠标放在图片上时，停止滚动，移出后重新设置了方法执行的间隔。
function showAuto()
{
n = n >= 2 ? 0 : (n + 1);
$num_nav.eq(n).trigger('click');
}
也可以通过图片索引还显示不同的图片
//关键函数：通过控制i ，来显示不同的幻灯片
function showImg(i){
$(".big_img img").eq(i).stop(true,true).fadeIn(2000).parent().siblings().find("img").hide();
$(".link_nav a").eq(i).stop(true,true).fadeIn(2000).siblings().hide();
$(".num_nav span").eq(i).addClass("selected").siblings().removeClass("selected");
}
//放置礼品的那种窗口等待稍后更新吧
开始滑动窗口吧
应某大神的建议，上图先
一共有7个礼品，只显示5个，可以通过左右两端的按钮滑动。
HTML代码
<div class="pro">
<div style="float:left;position:relative;left:50%;">
<div style="float:left;position:relative;left:-50%;">
<div class="btnL"><img id="btnL" src="annuoImg/pre.gif" /></div>
<div class="wrapDiv" style="overflow:hidden;">
<div id="prdtInfoComponent" class="listDiv">
<ul id="products">
<li><a href="#"><img src="annuoImg/1.jpg" width="146" height="146" /></a></li>
<li><a href="#"><img src="annuoImg/2.jpg" width="146" height="146" /></a></li>
<li><a href="#"><img src="annuoImg/3.jpg" width="146" height="146" /></a></li>
<li><a href="#"><img src="annuoImg/4.jpg" width="146" height="146" /></a></li>
<li><a href="#"><img src="annuoImg/5.jpg" width="146" height="146" /></a></li>
<li><a href="#"><img src="annuoImg/6.jpg" width="146" height="146" /></a></li>
<li><a href="#"><img src="annuoImg/7.jpg" width="146" height="146" /></a></li>
</ul>
</div>
</div>
<div class="btnR"><img id="btnR" src="annuoImg/next.gif" /></div>
</div>
</div>
</div>
JS代码
$(document).ready(function ()
{
setScrollFrame(
{
showFrame : $("#prdtInfoComponent").parent() , moveFrame : $("#prdtInfoComponent") , btnL : $("#btnL") ,
btnR : $("#btnR") , count : $("#prdtInfoComponent ul li").length , eachWidth : 170 , moveFrameLeft : parseInt($("#prdtInfoComponent").position().left)
});
})
/**
*功能： 设置滚动窗
*参数： settings.showFrame 展示窗JQUERY对象
* settings.moveFrame 移动窗JQUERY对象
* settings.btnL 左移按钮JQUERY对象
* settings.btnR 右移按钮JQUERY对象
* settings.count 内容数量
* settings.eachWidth 每个内容的宽度
* settings.frameWidth 展示窗的宽度
* settings.moveFrameLeft 移动窗的横坐标像素
*返回：
*/
function setScrollFrame(settings)
{
settings = jQuery.extend(
{
showFrame : null, moveFrame : null, btnL : null, btnR : null, count : 7, eachWidth : 120, frameWidth : 860,
moveFrameLeft : 0
},
settings || {});//用特定的值覆盖默认的值
if (settings.count == 0) {
alert("请设置显示数量[count]！");
return;
}
if (settings.moveFrame == null) {
alert("滚动窗不能为空对象[moveFrame]！");
return;
}
if (settings.btnL == null || settings.btnR == null) {
alert("向左向右按钮不能为空对象！[btnL|btnR]");
return;
}
if (settings.showFrame) {
settings.frameWidth = settings.showFrame.width();
}
//绑定事件
settings.btnL.bind("click", move("left"));
settings.btnR.bind("click", move("right"));
settings.btnL.css("cursor", "pointer");
settings.btnR.css("cursor", "pointer");
var left = settings.moveFrameLeft;
/**
*功能：移动滚动窗
*参数： sign 移动方向["left"|"right"]
*返回：
*/
function move(sign)
{
return function ()
{
var tleft = left;
//salert(tleft);
switch (sign)
{
case "right":
{
//通过图片的宽度和窗口的宽度计算移动的方向
var len = settings.count * settings.eachWidth;
//注意这里使用 Math.abs 因为left的值会变为负值
if ((len - Math.abs(left)) > settings.frameWidth) {
tleft -= settings.eachWidth;
}
else {
tleft = left;
}
break;
}
case "left":
{
if (left >= settings.moveFrameLeft) {
tleft = settings.moveFrameLeft;
}
else {
tleft += settings.eachWidth;
}
break;
}
}
if ((tleft - left) != 0)
{
//animate滚动，left：tleft>0向左，反之向右
settings.moveFrame.stop().animate({
left : tleft + "px"
},
400, function ()
{
left = tleft;
});
}
}
}
}
实现这个效果的css也很重要呵
img{ border:0px; display:block;}
.pro {
margin-top: 0px;
margin-bottom: 15px;
height: 200px;
width: 950px;
overflow: hidden;
clear:both;
overflow:hidden;
}
.pro .wrapDiv {
float: left;
width: 860px;
height: 180px;
position: relative;
padding-top:0px;
overflow:hidden;
}
.pro .listDiv {
position: absolute;
width: 1000%;
left: 0px;
-left: -44px;
+left: -44px;
top: 0px;
overflow:hidden;
}
.pro ul{ -padding-top:20px; +padding-top:20px;}
.pro li {
background: url(../images/image/proIBg.gif) no-repeat;
width: 148px;
height: 148px;
margin:5px 11px 5px 10px;
padding: 0px 0 0 0px;
float: left;
display: inline;
overflow: hidden;
}
.pro li img{ border:1px solid #cccccc;}
#products{ padding-left:12px; overflow:hidden; }
.btnL {
float: left;
padding: 65px 7px 0 3px;
}
.btnR {
float: right;
padding: 65px 5px 0 0;
}
posted on 2011-03-08 17:50 waitingfortime 阅读(515) 评论(0) 编辑 收藏 举报
