——仿淘宝首页jquery轮播焦点图,我特地去taobao首页看了下它的轮播,好像有点类似,我不保证是我写的这样。javascript
本例来源:站长之家 http://sc.chinaz.com/jiaoben/140219094050.htmcss
我仿照这个,本身彻底写了一遍。html
最近在研究banner轮播的共同点,前面已经写了2篇了java
1、首先按照惯例,写好静态的布局。jquery
其实去掉overflow:hidden,本质就是横向排列的一排图片,依次进行位移。我用 7 张 520x280 的图片。故轮播盒子也就是520*280这么大,以下截图:c++
这是我写的HTML代码:app
<!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中嵌入便可:ide
其中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>
2、用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++; } } } }
最终效果:
若是视频效果加载不了,只能看图了