web实战(一)— — 焦点图轮播特效

(一)、原理分析

1、参考淘宝网首页/极客学院首页的广告栏图片轮播
2、适用技能点有：DOM操作、定时器、事件运用、JS动画、函数递归、无限滚动

可以直接上http://www.imooc.com/learn/18听课并下载源码，不过里面有个小瑕疵，快速点击时next/pre箭头按钮时,图片不动，但是小图标一直在动，会使得两者不一致；判断是否动画在状态，应同时限定小图标的切换。

下面源码和教程的区别是：

1、修复小图标的bug
2、图片套<a>标签，增加可点击跳转
3、用jquery实现javascript部分

(二)、代码实现

一、html+css

1、autobanner.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>自动轮播广告栏</title><link type="text/css" href="./css/autobanner.css" rel="stylesheet"/><script src="js/jquery-1.12.1.js"></script>
</head>
<body><article><div class="container"><!-- 广告图片 --><div class="slider-main" style="left: -480px">  <!-- 向左移一张图，即显示1开始 --><a href="#" target="_blank" class="slider-panel"><img alt="4" src="data:image/4.jpg"></a><a href="#" target="_blank" class="slider-panel"><img alt="1" src="data:image/1.jpg"></a><a href="#" target="_blank" class="slider-panel"><img alt="2" src="data:image/2.jpg"></a><a href="#" target="_blank" class="slider-panel"><img alt="3" src="data:image/3.jpg"></a><a href="#" target="_blank" class="slider-panel"><img alt="4" src="data:image/4.jpg"></a><a href="#" target="_blank" class="slider-panel"><img alt="1" src="data:image/1.jpg"></a></div><!-- 修饰部分 --><!-- 图片轮播的下标 --><div class="slider-nav"><span class="slider-item on"></span><span class="slider-item"></span><span class="slider-item"></span><span class="slider-item"></span></div><!-- 上一页/下一页 --><div class="slider-page"><a class="arrow slider-pre" href="javascript:;;"><</a><a class="arrow slider-next" href="javascript:;;">></a></div></div>
</article>
<script src="js/autobanner.js"></script> <！-- 引入轮播js -->
</body>
</html>

2、autobanner.css

/*取消默认空隙等*/
* {  margin: 0;  padding: 0;  text-decoration: none;
}.container {  width: 480px;  height: 300px;  overflow: hidden;/*隐藏多余部分*/  position: relative;/*框住里面元素*/  margin: 0 auto;/*居中*/
}.slider-main {  width: 2880px;/*480*6,包括左右边两个'多余的图片'*/  height: 300px;  position: absolute;  z-index: 1;/*z轴的值*/
}
.slider-main a {  float: left;/*左浮动起来*/  }
/*下标的样式*/
.slider-nav {position: absolute; height: 10px; width: 68px; z-index: 2; bottom: 20px; left: 206px;/*(480-68【(1*2 + 10 + 5)*4】)/2*/
}
.slider-nav span{cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background-color: #333; margin-right: 5px;
}
.slider-nav .on { /*on状态可给js来控制*/background-color: orangered;
}
.slider-main a img { /*设置图片填满父div*/width: 480px;  height: 300px;  display: block;
}/*左右箭头的位置*/
.slider-page {position: absolute;  left: 0;/*靠左边*/  top: 50%;/*靠中间*/  width: 100%;/*需设置宽度*/
}
.arrow { cursor: pointer;  display:none;position: absolute; margin-top:-25px;/*网上半个高度以居中*/ line-height: 50px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 50px;  z-index: 2; /*设置z轴显示在上层*/background-color: RGBA(0,0,0,.3); color: #fff;}
.slider-page > a:last-child { /*右边箭头的样式设置*/right: 0;/*靠在最右边*/
}
.arrow:hover { background-color: RGBA(0,0,0,.7);}
.container:hover .arrow { display: block;} /*划过轮播栏时才显示箭头*/

二、autobanner.js

var PIC_LENGTH = 480;
var currentIndex = 0;//默认第一个下标
var hasStarted = false;//是否已经开始轮播
var timer; //自动轮播定时器
$(function() {startPlay(); //开启轮播//点击左箭头$('.slider-pre').on('click', function () {console.log(parseInt($('.slider-main').css('left')) + PIC_LENGTH);if(!hasStarted) {  //避免快速点击animate(PIC_LENGTH);//右移一张图的宽度/*点击改变下面的点点点图片*/--currentIndex;if(currentIndex < 0) { //转到第四张图了currentIndex = 3;}showDot();}});//点击右箭头$('.slider-next').on('click', function () {if(!hasStarted) {++currentIndex;if(currentIndex > 3) { //转到第一张图了currentIndex = 0;}showDot();console.log(parseInt($('.slider-main').css('left')) - PIC_LENGTH);animate(-PIC_LENGTH);//左移一张图的宽度}});/*点击下标改变下标样式和图片的显示位置*/$('.slider-item').on('click', function(e){if(!hasStarted) {var preIndex = $(".slider-item").filter(".on").index();//筛选原来激活状态的indexcurrentIndex = $(this).index();  //获取当前index//console.log(preIndex+","+currentIndex);showDot();animate(-PIC_LENGTH * (currentIndex - preIndex));//移动图片的left值}});//鼠标在图片父div时，停止轮播(fnOver, fnOut)$('.container').hover(function(){stopPlay();},function(){startPlay();});})function startPlay() { //轮播timer = setInterval(function() {$('.slider-next').click(); //相当于点击next}, 2000);//每间隔2秒轮播
}function stopPlay() {clearInterval(timer);
}/*图片*/
function animate(offset) { //到了左边填充的一张或者右边最后一张时，left值重置归位hasStarted = true; //轮播标志位置为truevar newLeft = parseInt($('.slider-main').css('left')) + offset;var time = 300;//位移总时间var interval = 100;//位移间隔时间var speed = offset/(time/interval);//每次位移量move();//启动movefunction move() {//是否继续位移if((speed < 0 && parseInt($('.slider-main').css('left')) > newLeft) || (speed > 0 && parseInt($('.slider-main').css('left')) < newLeft)) {$('.slider-main').css('left', parseInt($('.slider-main').css('left')) + speed + 'px');//左移 or 右移一个speed宽度//setTimeout是在设置的时间后执行，只执行一次，而setInterval是每隔一段时间就执行一次setTimeout(move, interval);} else { //移动到位了，需要正确设定位置hasStarted = false;//位移结束了,将轮播标志位置为false$('.slider-main').css('left', newLeft + 'px');//左移 or 右移一张图的宽度//判断是否是左一/右一‘假’的图片，并重置if(newLeft > -PIC_LENGTH) {$('.slider-main').css('left', -(PIC_LENGTH * 4) + 'px');}if(newLeft < -(PIC_LENGTH * 4)) {$('.slider-main').css('left', -PIC_LENGTH  + 'px');}}}
}function showDot() { //下标选择状态//console.log(currentIndex);$('.slider-item').removeClass('on');//清除所有激活样式$('.slider-item').eq(currentIndex).addClass('on');//设置当前index激活样式
}

web实战(一)— — 焦点图轮播特效相关推荐

js之焦点图轮播特效
js之焦点图轮播特效一.原理介绍焦点图在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思,只不过加上了图片.据国外的设计机构调查统计,网站焦点图的点击率明显高于纯文字.在很多购物网主页面 ...
jQuery焦点图轮播特效插件bxslider，使用说明及免费下载四川智汇蓝图整理带bxslider免费下载地址
这里分享一个方便实用的JQ 焦点图插件,它的特点简单易用,灵活方便通用性强:支持包含内容不HTML,视频,图片等.出众的兼容能力,完美兼容Firefox,Chrome,Safari,iOS,Andro ...
bxSlider——一个精悍的拥有一大波焦点图轮播滑动特效的Js程序
打开这个地址>>强大的支持手机端响应式的jQuery焦点图轮播特效插件bxslider.js(右键查看源代码) bxSlider官网:http://bxslider.com/ ****** ...
html焦点图自动轮播,JS实现焦点图轮播效果的方法详解
本文实例讲述了JS实现焦点图轮播效果的方法.分享给大家供大家参考,具体如下: 效果图如下: 一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 ...
allinone rotator演示40种不同的焦点图轮播
[img]http://www.sucaihuo.com/jquery/2/249/big.jpg[/img] allinone 有15种类型,16 种过渡效果.支持文字左右上下四个方向的动画效果.支 ...
焦点图(轮播图)的实现及详解
实际实现代码,包含思路即实现过程(这里设计的目的是应对N张图片的,如果需要实现N张图片的动态效果,只需要在上一张下一张以及轮播图函数(自动翻页的下一张)中在修改了类名后将旧地址进行更新即可: < ...
web网页设计——体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码
web网页设计--体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
HTML5期末大作业：网站——个人网站介绍 (7页面带轮播特效)明星赵丽颖学生DW网页设计作业源码 web课程设计网页规划与设计大学生个人网站作业模板...
HTML5期末大作业:网站--个人网站介绍 (7页面带轮播特效)明星赵丽颖临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合 ...
Vue+Echarts构建可视化大数据平台实战项目（上）粒子动效，登录界面抖动，背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...

web实战(一)— — 焦点图轮播特效

(一)、原理分析

下面源码和教程的区别是：

(二)、代码实现

一、html+css

二、autobanner.js

web实战(一)— — 焦点图轮播特效相关推荐

最新文章

热门文章