基于jQuery的轮播焦点图图
程序员文章站
2024-01-05 12:23:22
轮播焦点图 ——仿淘宝首页jquery轮播焦点图，我特意去taobao首页看了下它的轮播，好像有点相似，我不保证是我写的这样。 本例来源：站长之家 http://sc.chinaz.com/jiaoben/140219094050.htm 我仿照这个，自己完全写了一遍。 最近在研究banner轮播的 ......
轮播焦点图
——仿淘宝首页jquery轮播焦点图，我特意去taobao首页看了下它的轮播，好像有点相似，我不保证是我写的这样。
本例来源：站长之家
我仿照这个，自己完全写了一遍。
最近在研究banner轮播的共同点，前面已经写了2篇了
一、首先按照惯例，写好静态的布局。
其实去掉overflow:hidden，本质就是横向排列的一排图片，依次进行位移。我用 7 张 520x280 的图片。故轮播盒子也就是520*280这么大，如下截图：
这是我写的html代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>created-20181024</title>
</head>
<body>
<div class="main">
<div id="banner" class="banner">
<div class="banner-btn">
<a href="javascript:;" class="prevbtn"><i></i></a>
<a href="javascript:;" class="nextbtn"><i></i></a>
</div>
<ul class="piclist">
<li><a><img src="./images/1.jpg"></a></li>
<li><a><img src="./images/2.jpg"></a></li>
<li><a><img src="./images/3.jpg"></a></li>
<li><a><img src="./images/4.jpg"></a></li>
<li><a><img src="./images/5.jpg"></a></li>
<li><a><img src="./images/6.jpg"></a></li>
<li><a><img src="./images/7.jpg"></a></li>
</ul>
<ul class="circlebtn">
<!--<li class="active"><a></a></li> -->
</ul>
</div>
</div>
</body>
</html>
下面是css代码，直接在html中嵌入即可：
其中prev、next的箭头图标， 我用的是网上这个精灵图 http://gtms01.alicdn.com/tps/i1/t1sznbfzlmxxx8qsdi-400-340.png
<style>
* { margin: 0; padding: 0;word-break: break-all; }
a { color:#fff;text-decoration: none;}
a:hover { text-decoration: none;}
ul,li { list-style: none;}
html,body{width: 100%;height: 100%;}
.main {width: 520px;margin: 100px auto;}
.banner {
width: 520px;
height: 280px;
position: relative;
overflow: hidden;
}
ul.piclist {
width: 3640px; /* 3640 = 520 x 7 */
height: 280px;
position: absolute;
font-size: 0;
}
ul.piclist li {display: inline-block;}
ul.circlebtn {
position: absolute;
left: 50%;
bottom: 14%;
z-index: 5;
background: rgba(255, 255, 255, 0.377);
padding: 0 5px;
border-radius: 10px;
}
ul.circlebtn li { float: left;margin: 2px; }
ul.circlebtn li a {
display: block;
width: 10px;
height: 10px;
border-radius: 10px;
background-color: #b7b7b7;
}
ul.circlebtn li.active a { background-color: #ff0000; }
.banner-btn a {
display: block;
position: absolute;
z-index: 5;
width: 50px;
height: 40px;
background: #000000;
opacity: 0.3;
top: 40%;
}
.banner-btn .prevbtn {left: 0;}
.banner-btn .nextbtn { right: 0;}
.banner-btn i {
display: block;
background: url(./images/alibaba-icon-400-340.png) no-repeat;
width: 22px;
height: 22px;
margin: 8px auto 0 auto;
}
.banner-btn .prevbtn i {background-position: -200px 0px;}
.banner-btn .nextbtn i { background-position: -200px -24px;}
.banner-btn {display: none;}
</style>
二、用js编写轮播的动画。需要自己引入jquery库。
我注释比较详细，我写的有一点和原例不同，就是原来的是把自动播放和手动播放都写在一个方法里了，而我则是拆开了。
<script>
$(function () {
var currentpic = 1; //设置当前图片的序号
var picnumber = $('.piclist').find('img').length; //获取banner图片数量
//上面 var picnumber = $('.piclist img').length; //不加find也可以
var view_width = $(".banner").width(); //banner视口的宽度
var totalwidth = picnumber * view_width; //banner图的总长度
var timer = null; //定时器
var circle_btn_html = "<li class='active'><a href='javascript:;'></a></li>"; //banner底部第一个小按钮
for (let i = 1; i < picnumber; i++) { //注意！！！这里i从1开始，如果i=0,则小圆点会多一根，自犯错误
circle_btn_html += "<li><a href='javascript:;'></a></li>";
}
$(".circlebtn").append(circle_btn_html); //根据图片数量，动态添加底部mini按钮
$(".circlebtn").css({'marginleft': $(".circlebtn").width() * (-0.5)}); //令其居中
function circlebtnactive() { //eq 使小圆点对应当前播放的图片序号
$(".circlebtn li").eq(currentpic - 1).addclass('active').siblings().removeclass('active');
}
function autoplay() { //自动播放
if (currentpic == picnumber) { //当currentpic==图片总数时，即已经轮播到最后一张图片了
$(".piclist").animate({left: 0},'slow'); // $(".piclist") 的left=0时，显示第一张图片，当left = 6*520 px时，显示的最后一张图片，当left = 7 *520时，显示的空白，最后一张图片都走完了
currentpic = 1;
circlebtnactive(); //改变小圆点按钮的状态，也可以不封装成方法。直接写语句。
} else {
$(".piclist").animate({left: "-=" + view_width},'slow'); //left:"-"+currentpic*view_width //或者可以这样写
currentpic++;
circlebtnactive(); //改变小圆点按钮的状态
}
}
function manualplay(classname) { //手动播放
if (classname == 'prevbtn') {
if (currentpic == 1) {
$('.piclist').animate({left: "-" + (picnumber - 1) * view_width},'slow');
currentpic = picnumber;
circlebtnactive(); //改变小圆点按钮的状态
} else {
$('.piclist').animate({left: "+=" + view_width},'slow');
currentpic--;
circlebtnactive(); //改变小圆点按钮的状态
}
} else {
//else 其实不只是nextbtn,只要不是if 都是else,下面这段与自动播放的代码其实重复，自动\手动播放两个方法autoplay(),manualplay()可以合并
if (currentpic == picnumber) { //当currentpic==图片总数时，即已经轮播到最后一张图片了
$(".piclist").animate({ left: 0},'slow'); // $(".piclist") 的left=0时，显示第一张图片，当left = 6*520 px时，显示的最后一张图片，当left = 7 *520时，显示的空白，最后一张图片都走完了
currentpic = 1;
circlebtnactive(); //改变小圆点按钮的状态
} else {
$(".piclist").animate({left: "-=" + view_width},'slow'); //left:"-"+currentpic*view_width //或者可以这样写
currentpic++;
circlebtnactive(); //改变小圆点按钮的状态
}
}
}
$("#banner").mouseover(function () { //鼠标经过banner时，停止自动播放
$(".banner-btn").css({'display': 'block'});
clearinterval(timer); //清除计时器，鼠标在banner上时不再自动播放
}).mouseout(function () { //鼠标离开banner时，开启自动播放
$(".banner-btn").css({'display': 'none'});
timer = setinterval(autoplay, 1500);
}).trigger('mouseout');
$('.banner-btn a').mouseover(function () { //当鼠标经过左右切换按钮时，改变不透明度
$(".banner-btn").css({'display': 'block'});
$(this).animate({ opacity: 0.6}, "fast");
}).mouseout(function () {
$(".banner-btn").css({'display': 'none'});
$(this).animate({opacity: 0.3}, "fast");
}).click(function () { //当鼠标click按钮时，左右切换图片
manualplay(this.classname);
});
$(".circlebtn li").on('click', function () { //点击小按钮切换图片
var index = $(this).index();
$('.piclist').animate({left: -index * view_width}, 'slow');
currentpic = index + 1;
circlebtnactive(); //改变小圆点按钮的状态
});
});
</script>
另：自动播放、手动播放合并的方法
//自动播放、手动播放合并的方法
function play(obj, clasname) {
if (!$('.piclist').is(":animated")) {
if (classname == 'prevbtn') { //当传递了play()方法classname时且=prevbtn,即点击“上一张"按钮
if (currentpic == 1) {
$('.piclist').animate({ left: "-" + (picnumber - 1) * view_width},'slow');
currentpic = picnumber;
} else {
$('.piclist').animate({ left: "+=" + view_width},'slow');
currentpic--;
}
} else { //当play()方法没有传参数、或者参数=nextbtn,都执行else中语句，即"自动播放"和"next"都是else语句
if (currentpic == picnumber) {
$(".piclist").animate({ left: 0},'slow');
currentpic = 1;
} else {
$(".piclist").animate({ left: "-=" + view_width},'slow');
currentpic++;
}
}
}
}
最终效果：
如果视频效果加载不了，只能看图了