基于jquery实现图片广告轮换效果代码

195 阅读 0 评论 129 点赞

我是靠谱客的博主精明舞蹈，最近开发中收集的这篇文章主要介绍基于jquery实现图片广告轮换效果代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

效果图:

实现代码:

复制代码代码如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<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="http://meinv.vs2010.com/topic/7/201107/show-id2231.html" 
target="_blank"> 
<img src="http://www.uoften.com/uploadfile/2018/0411/20180411124402525.jpg" 
alt="1" /></a></li> 
<li><a href="http://meinv.vs2010.com/topic/7/201106/show-id2130.html" target="_blank"> 
<img src="http://www.uoften.com/uploadfile/2018/0411/20180411124403178.jpg" 
alt="2" /></a></li> 
<li><a href="http://meinv.vs2010.com/topic/7/201106/show-id2184.html" target="_blank"> 
<img src="http://www.uoften.com/uploadfile/2018/0411/20180411124405909.jpg" 
alt="3" /></a></li> 
<li><a href="http://meinv.vs2010.com/topic/7/201106/show-id2163.html" target="_blank"> 
<img src="http://www.uoften.com/uploadfile/2018/0411/20180411124406978.jpg" 
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> 