轮播焦点图
——仿淘宝首页jquery轮播焦点图，我特意去taobao首页看了下它的轮播，好像有点相似，我不保证是我写的这样。
本例来源：站长之家/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-1024</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>
View Code
下面是css代码，直接在HTML中嵌入即可：
其中prev、next的箭头图标， 我用的是网上这个精灵图/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>
View Code
二、用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>
View Code
另：自动播放、手动播放合并的方法
//自动播放、手动播放合并的方法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 ;}}}}
View Code
最终效果：
如果视频效果加载不了，只能看图了
更多专业前端知识，请上 【猿2048】
如果觉得《基于jQuery的轮播焦点图图》对你有帮助，请点赞、收藏，并留下你的观点哦！
