轮播焦点图
——仿淘宝首页jquery轮播焦点图,我特意去taobao首页看了下它的轮播,好像有点相似,我不保证是我写的这样。
本例来源:站长之家 http://sc.chinaz.com/jiaoben/140219094050.htm
我仿照这个,自己完全写了一遍。
最近在研究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 ;
}
}
}
}
最终效果:
如果视频效果加载不了,只能看图了
更多专业前端知识,请上 【猿2048】www.mk2048.com