基于jquery实现图片广告轮换效果代码,基于jque
分类:关于美高梅

复制代码 代码如下:

效果图:
图片 1
实现代码:

效果图:
图片 2
实现代码:

//图片幻灯展示
$(function() {
var imgPro = {
imgWidth : 626, //图片宽度
imgConLength : 0, //图片总长度
index : 0, //导航锁定索引
count : 0, //图片数量
left : 0, //绝对定位left
pre : -1, //上个图片索引
curr : 0, //当前图片索引
next : 1, //下个图片索引
direction : 1, //自动播放方向
interTime : 3000//间隔时间
}
addImgAlt(imgPro.curr);
imgPro.count = $('#banner .list a img').length;
imgPro.imgConLength = imgPro.imgWidth * imgPro.count;
imgPro.left = parseInt($('#box .list ul').css("left"));
//播放定时器
var t = setInterval(imgPlay, imgPro.interTime);
$('#box .arrowl img, #box .arrowr img,#banner .list a,#box .count li,#box p').hover(function() {
clearInterval(t);
}, function() {
t = setInterval(imgPlay, imgPro.interTime);
});
// 自动播放图片
function imgPlay() {
if ((imgPro.next != imgPro.count && imgPro.direction == 1) || (imgPro.pre == -1 && imgPro.direction == -1)) {
imgPro.direction = 1;
toNext();
} else {
imgPro.direction = -1;
toLast();
}

复制代码 代码如下:

复制代码 代码如下:

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hotmarquee</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font: 12px;
padding-top: 50px;
padding-right: 200px;
padding-bottom: 100px;
padding-left: 200px;
}
ul
{
list-style: none;
}
img
{
padding: 2px;
border: 1px solid #eee;
}
a
{
outline: none;
}
#imgs
{
width: 410px;
margin-right: auto;
margin-left: auto;
}
.top, .btm
{
background: url(../images/sprite.gif) no-repeat;
overflow: hidden;
}
.top
{
background-position: 0 0;
height: 5px;
}
.btm
{
height: 7px;
}
.mid
{
width: 400px;
padding: 5px 7px 0;
border: 1px solid #999;
}
.mid ul
{
width: 400px;
height: 600px;
background: #fff;
position: relative;
overflow: hidden;
}
.mid ul li
{
width: 400px;
height: 600px;
position: absolute;
left: 490px;
top: 0;
}
.mid ul li.first
{
left: 0;
}
#img_list
{
width: 486px;
height: 20px;
padding-top: 5px;
overflow: hidden;
height: 1%;
}
#img_list a
{
display: block;
width: 14px;
height: 14px;
text-indent: -9999px;
float: left;
margin-right: 5px;
background: url(../images/sprite.gif) no-repeat 0 -13px;
}
#img_list a:hover, #img_list a.active
{
background-position: -14px -13px;
}
</style>
<script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
var curr = 0, next = 0, count = 0;
$(document).ready(function () {
// 记录图片的数量
count = $('#img_list a').size();
t = setInterval('imgPlay()', 3000);
// 鼠标移动到图片或导航上停止播放,移开后恢复播放
$('#imgs li, #img_list a').hover(function () {
clearInterval(t);
}, function () {
t = setInterval('imgPlay()', 3000);
});
//点击导航播放到相应的图片
$('#img_list a').click(function () {
// index()函数返回当前导航的下标
var index = $('#img_list a').index(this);
if (curr != index) {
play(index);
curr = index;
};
return false;
});
});
// 播放图片的函数
var imgPlay = function () {
next = curr + 1;
// 若当前图片播放到最后一张,这设置下一张要播放的图片为第一张图片的下标
if (curr == count - 1) next = 0;
play(next);
curr++;
// 在当前图片的下标加1后,若值大于最后一张图片的下标,则设置下一轮其实播放的图片下标为第一张图片的下标,而next永远比curr大1
if (curr > count - 1) { curr = 0; next = curr + 1; }
};
// 控制播放效果的函数
var play = function (next) {
// 当前的图片滑到左边-500px,完成后返回到右边490px
// 下一张图片滑到0px处,完成后导航的焦点切换到下一个点上
$('#imgs li').eq(curr).css({ 'opacity': '0.5' }).animate({ 'left': '-500px', 'opacity': '1' }, 'slow', function () {
$(this).css({ 'left': '490px' });
}).end()
.eq(next).animate({ 'left': '0px', 'opacity': '1' }, 'slow', function () {
$('#img_list a').siblings('a').removeClass('active').end().eq(next).addClass('active');
});
};
</script>
</head>
<body>
<div id="imgs">
<div class="mid">
<ul>
<li class="first"><a href=""
target="_blank">
<img src=""
alt="1" /></a></li>
<li><a href="" target="_blank">
<img src=""
alt="2" /></a></li>
<li><a href="" target="_blank">
<img src=""
alt="3" /></a></li>
<li><a href="" target="_blank">
<img src=""
alt="4" /></a></li>
</ul>
<div id="img_list">
<a href="#1" class="active">1</a> <a href="#2">2</a> <a href="#3">3</a> <a href="#4">
4</a>
</div>
</div>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hotmarquee</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font: 12px;
padding-top: 50px;
padding-right: 200px;
padding-bottom: 100px;
padding-left: 200px;
}
ul
{
list-style: none;
}
img
{
padding: 2px;
border: 1px solid #eee;
}
a
{
outline: none;
}
#imgs
{
width: 410px;
margin-right: auto;
margin-left: auto;
}
.top, .btm
{
background: url(../images/sprite.gif) no-repeat;
overflow: hidden;
}
.top
{
background-position: 0 0;
height: 5px;
}
.btm
{
height: 7px;
}
.mid
{
width: 400px;
padding: 5px 7px 0;
border: 1px solid #999;
}
.mid ul
{
width: 400px;
height: 600px;
background: #fff;
position: relative;
overflow: hidden;
}
.mid ul li
{
width: 400px;
height: 600px;
position: absolute;
left: 490px;
top: 0;
}
.mid ul li.first
{
left: 0;
}
#img_list
{
width: 486px;
height: 20px;
padding-top: 5px;
overflow: hidden;
height: 1%;
}
#img_list a
{
display: block;
width: 14px;
height: 14px;
text-indent: -9999px;
float: left;
margin-right: 5px;
background: url(../images/sprite.gif) no-repeat 0 -13px;
}
#img_list a:hover, #img_list a.active
{
background-position: -14px -13px;
}
</style>
<script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
var curr = 0, next = 0, count = 0;
$(document).ready(function () {
// 记录图片的数量
count = $('#img_list a').size();
t = setInterval('imgPlay()', 3000);
// 鼠标移动到图片或导航上停止播放,移开后恢复播放
$('#imgs li, #img_list a').hover(function () {
clearInterval(t);
}, function () {
t = setInterval('imgPlay()', 3000);
});
//点击导航播放到相应的图片
$('#img_list a').click(function () {
// index()函数返回当前导航的下标
var index = $('#img_list a').index(this);
if (curr != index) {
play(index);
curr = index;
};
return false;
});
});
// 播放图片的函数
var imgPlay = function () {
next = curr + 1;
// 若当前图片播放到最后一张,这设置下一张要播放的图片为第一张图片的下标
if (curr == count - 1) next = 0;
play(next);
curr++;
// 在当前图片的下标加1后,若值大于最后一张图片的下标,则设置下一轮其实播放的图片下标为第一张图片的下标,而next永远比curr大1
if (curr > count - 1) { curr = 0; next = curr + 1; }
};
// 控制播放效果的函数
var play = function (next) {
// 当前的图片滑到左边-500px,完成后返回到右边490px
// 下一张图片滑到0px处,完成后导航的焦点切换到下一个点上
$('#imgs li').eq(curr).css({ 'opacity': '0.5' }).animate({ 'left': '-500px', 'opacity': '1' }, 'slow', function () {
$(this).css({ 'left': '490px' });
}).end()
.eq(next).animate({ 'left': '0px', 'opacity': '1' }, 'slow', function () {
$('#img_list a').siblings('a').removeClass('active').end().eq(next).addClass('active');
});
};
</script>
</head>
<body>
<div id="imgs">
<div class="mid">
<ul>
<li class="first"><a href=""
target="_blank">
<img src=""
alt="1" /></a></li>
<li><a href="" target="_blank">
<img src=""
alt="2" /></a></li>
<li><a href="" target="_blank">
<img src=""
alt="3" /></a></li>
<li><a href="" target="_blank">
<img src=""
alt="4" /></a></li>
</ul>
<div id="img_list">
<a href="#1" class="active">1</a> <a href="#2">2</a> <a href="#3">3</a> <a href="#4">
4</a>
</div>
</div>
</div>
</body>
</html>

//点击左方向
$('#box .arrowl img').click(function() {
if (imgPro.curr != 0) {
toLast();
}
});
//点击右方向
$('#box .arrowr img').click(function() {
if (imgPro.next != imgPro.count) {
toNext();
}
});
//点击导航播放
$('#box .count li').click(function() {
imgPro.index = $('#box .count li').index(this);
if (imgPro.curr != imgPro.index) {
imgPro.left += (imgPro.curr - imgPro.index) * imgPro.imgWidth;
addImgAlt(imgPro.index);
play();
$('#box .count li').eq(imgPro.curr).removeClass('current').end().eq(imgPro.index).addClass('current');
imgPro.curr = imgPro.index;
imgPro.pre = imgPro.index - 1;
imgPro.next = imgPro.index + 1;
}
});
//播放
function play() {
$('#box .list ul').css({
'opacity' : '0.5'
}).animate({
'left' : imgPro.left + "px",
'opacity' : '1'
}, 'slow');
}

您可能感兴趣的文章:

  • jquery实现两边飘浮可关闭的对联广告
  • jQuery网页右侧广告跟随滚动代码分享
  • jquery实现可关闭的倒计时广告特效代码
  • jquery实现滑屏大图定时收缩为小banner图片的广告代码
  • jquery右下角自动弹出可关闭的广告层
  • jQuery实现首页顶部可伸缩广告特效代码
  • jquery实现对联广告的方法
  • 基于jquery实现的定时显示与隐藏div广告的实现代码
  • jQuery 浮动广告实现代码
  • jQuery实现页面顶部下拉广告

: 实现代码: 复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "" html xmlns="...

//添加图片说明信息
function addImgAlt(index) {
$("#box p").text($("#banner .list a img").eq(index).attr("alt"));
}

//上一张
function toLast() {
imgPro.left += imgPro.imgWidth;
addImgAlt(imgPro.pre);
play();
$('#box .count li').eq(imgPro.curr).removeClass('current').end().eq(imgPro.pre).addClass('current');
imgPro.pre--;
imgPro.curr--;
imgPro.next--;
}

//下一张
function toNext() {
imgPro.left -= imgPro.imgWidth;
addImgAlt(imgPro.next);
play();
$('#box .count li').eq(imgPro.curr).removeClass('current').end().eq(imgPro.next).addClass('current');
imgPro.pre++;
imgPro.curr++;
imgPro.next++;
}

});

您可能感兴趣的文章:

  • jQuery实现跟随鼠标运动图层效果的方法
  • jquery 实现input输入什么div图层显示什么
  • jQuery实现点击图片翻页展示效果的方法
  • Jquery动态替换div内容及动态展示的方法
  • 基于jquery的手风琴图片展示效果实现方法
  • jquery实现简单易懂的图片展示小例子
  • jQuery简单实现隐藏以及显示特效
  • jQuery显示和隐藏 常用的状态判断方法
  • jQuery焦点控制图层展示延迟隐藏的方法

本文由美高梅网址发布于关于美高梅,转载请注明出处:基于jquery实现图片广告轮换效果代码,基于jque

上一篇:loadScript异步加载脚本示例讲解,非阻塞脚本的使 下一篇:没有了
猜你喜欢
热门排行
精彩图文