JQ实现焦点图轮播效果（二）
效果图：
图片素材 ：
左右按钮素材（icon.png-600） ：
左右按钮 IE6版本素材（icon_ie6.png-600）：
代码如下，复制即可使用：
（不过里面的JQ路径和图片路径需要自己改成自己的JQ路径和图片路径，否则是没有效果显示的哦）
（适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ实现焦点图轮播效果（二）</title>
<!-- 此处需要改为自己的JQ路径 -->
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style>
/* CSS Document */
body,
ul,
li {
padding: 0;
margin: 0;
}
ul,
li {
list-style: none;
}
img {
border: none;
}
a {
color: #6cf;
}
a:hover {
color: #84B263;
}
.box {
width: 980px;
margin: 0 auto;
position: relative;
overflow: hidden;
_height: 100%;
}
.picbox {
width: 980px;
height: 115px;
overflow: hidden;
position: relative;
}
.piclist {
height: 115px;
position: absolute;
left: 0px;
top: 0px
}
.piclist li {
background: #eee;
margin-right: 20px;
padding: 5px;
float: left;
}
.swaplist {
position: absolute;
left: -3000px;
top: 0px
}
/*这里需要改成自己的图片路径*/
.og_prev,
.og_next {
width: 30px;
height: 50px;
background: url(icon.png-600) no-repeat;
background: url(icon_ie6.png-600) no-repeat\9;
position: absolute;
top: 33px;
z-index: 99;
cursor: pointer;
filter: alpha(opacity=70);
opacity: 0.7;
}
.og_prev {
background-position: 0 -60px;
left: 4px;
}
.og_next {
background-position: 0 0;
right: 4px;
}
</style>
</head>
<body>
<div style="margin-top:50px;">
<div>
<ul class="piclist mainlist">
<!-- 此处需要改为自己的图片路径 -->
<li>
<a href="#" target="_blank"><img src="1.jpg-600" width="220" height="105" /></a>
</li>
<li>
<a href="#" target="_blank"><img src="2.jpg-600" /></a>
</li>
<li>
<a href="#" target="_blank"><img src="3.jpg-600" /></a>
</li>
<li>
<a href="#" target="_blank"><img src="4.jpg-600" /></a>
</li>
<li>
<a href="#" target="_blank"><img src="1.jpg-600" /></a>
</li>
<li>
<a href="#" target="_blank"><img src="2.jpg-600" /></a>
</li>
<li>
<a href="#" target="_blank"><img src="3.jpg-600" /></a>
</li>
<li>
<a href="#" target="_blank"><img src="4.jpg-600" /></a>
</li>
</ul>
<ul class="piclist swaplist"></ul>
</div>
<div></div>
<div></div>
</div>
<script>
// JavaScript Document
$(document).ready(function(e) {
/***不需要自动滚动，去掉即可***/
time = window.setInterval(function() {
$('.og_next').click();
}, 5000);
/***不需要自动滚动，去掉即可***/
linum = $('.mainlist li').length; //图片数量
w = linum * 250; //ul宽度
$('.piclist').css('width', w + 'px'); //ul宽度
$('.swaplist').html($('.mainlist').html()); //复制内容
$('.og_next').click(function() {
if($('.swaplist,.mainlist').is(':animated')) {
$('.swaplist,.mainlist').stop(true, true);
}
if($('.mainlist li').length > 4) { //多于4张图片
ml = parseInt($('.mainlist').css('left')); //默认图片ul位置
sl = parseInt($('.swaplist').css('left')); //交换图片ul位置
if(ml <= 0 && ml > w * -1) { //默认图片显示时
$('.swaplist').css({
left: '1000px'
}); //交换图片放在显示区域右侧
$('.mainlist').animate({
left: ml - 1000 + 'px'
}, 'slow'); //默认图片滚动
if(ml == (w - 1000) * -1) { //默认图片最后一屏时
$('.swaplist').animate({
left: '0px'
}, 'slow'); //交换图片滚动
}
} else { //交换图片显示时
$('.mainlist').css({
left: '1000px'
}) //默认图片放在显示区域右
$('.swaplist').animate({
left: sl - 1000 + 'px'
}, 'slow'); //交换图片滚动
if(sl == (w - 1000) * -1) { //交换图片最后一屏时
$('.mainlist').animate({
left: '0px'
}, 'slow'); //默认图片滚动
}
}
}
})
$('.og_prev').click(function() {
if($('.swaplist,.mainlist').is(':animated')) {
$('.swaplist,.mainlist').stop(true, true);
}
if($('.mainlist li').length > 4) {
ml = parseInt($('.mainlist').css('left'));
sl = parseInt($('.swaplist').css('left'));
if(ml <= 0 && ml > w * -1) {
$('.swaplist').css({
left: w * -1 + 'px'
});
$('.mainlist').animate({
left: ml + 1000 + 'px'
}, 'slow');
if(ml == 0) {
$('.swaplist').animate({
left: (w - 1000) * -1 + 'px'
}, 'slow');
}
} else {
$('.mainlist').css({
left: (w - 1000) * -1 + 'px'
});
$('.swaplist').animate({
left: sl + 1000 + 'px'
}, 'slow');
if(sl == 0) {
$('.mainlist').animate({
left: '0px'
}, 'slow');
}
}
}
})
});
$(document).ready(function() {
$('.og_prev,.og_next').hover(function() {
$(this).fadeTo('fast', 1);
}, function() {
$(this).fadeTo('fast', 0.7);
})
})
</script>
</body>
</html>更多web前端知识，请查阅 HTML中文网 ！！
以上就是jQuery如何实现焦点图轮播效果？（代码示例二）的详细内容，更多请关注0133技术站其它相关文章！
