基于jQuery的轮播焦点图图
轮播焦点图
——仿淘宝首页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-20181024title>
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">ul>div>div>
body>
html>下面是css代码，直接在HTML中嵌入即可：
其中prev、next的箭头图标， 我用的是网上这个精灵图 http://gtms01.alicdn.com/tps/i1/T1szNBFzlmXXX8QSDI-400-340.png
二、用js编写轮播的动画。需要自己引入jQuery库。
我注释比较详细，我写的有一点和原例不同，就是原来的是把自动播放和手动播放都写在一个方法里了，而我则是拆开了。
另：自动播放、手动播放合并的方法
//自动播放、手动播放合并的方法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
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！