jQuery如何实现焦点图轮播效果?(代码示例二)

在之前的文章【jQuery如何实现焦点图轮播效果?(代码示例一)】介绍了一种使用jQuery实现焦点图轮播效果的方法。下面本篇文章给大家介绍另一种使用jQuery实现的焦点图轮播效果。

JQ实现焦点图轮播效果(二)

效果图:

1.png

图片素材 :

左右按钮素材(icon.png) :

左右按钮 IE6版本素材(icon_ie6.png):


代码如下,复制即可使用:

(不过里面的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) no-repeat;
background: url(icon_ie6.png) 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" width="220" height="105" /></a>
</li>
<li>
<a href="#" target="_blank"><img src="2.jpg" /></a>
</li>
<li>
<a href="#" target="_blank"><img src="3.jpg" /></a>
</li>
<li>
<a href="#" target="_blank"><img src="4.jpg" /></a>
</li>
<li>
<a href="#" target="_blank"><img src="1.jpg" /></a>
</li>
<li>
<a href="#" target="_blank"><img src="2.jpg" /></a>
</li>
<li>
<a href="#" target="_blank"><img src="3.jpg" /></a>
</li>
<li>
<a href="#" target="_blank"><img src="4.jpg" /></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如何实现焦点图轮播效果?(代码示例二)的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏