讲解版的自动轮播（新手福利）样式和js就不分离了为了看的方便
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>讲解版的自动轮播（新手福利）</title>
<style>
/*现在来写样式*/
/*公共样式*/
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
/*底层样式*/
#det{
width: 100%;
background: #fff;
}
/*轮播的总的区域的样式*/
.banner{
width: 100%;
position: relative;/*轮播区域要给按钮定位，故此给它绝对定位*/
z-index:0;/*轮播区域按钮要在图片上，故此要分层*/
}
/*大图区域样式*/
#banner{
width: 100%;
height: 563px;/*根据自己的情况设置*/
margin: 0 auto;/*可有可无，习惯呆着*/
position: relative;/*大图区域要给每张图片定位，故此它绝对定位*/
overflow: hidden;/*图片超出隐藏，这个不用解释了吧*/
}
/*大图所在UL*/
#bannerimg{
width: 400%;/*banner全屏四张*/
height: 100%;/*高度适应父级高度*/
position: absolute;/*定位到左上角*/
left:0;
top:0;
}
/*每张大图*/
#bannerimg li{
float: left;/*浮动向左*/
width: 25%;/*宽为父级的25%*/
height:100%;/*高度适应父级高度*/
}
#bannerimg li img{
width: 100%;
height: 100%;
}
/*左边按钮*/
#bannerleft{
z-index: 10;/*在顶层，高于底层高于图片*/
position: absolute;/*相对于父级的绝对定位*/
left: 0;/*距离左边为0*/
top:50%;/*距离父级顶部为父级高度的50%*/
margin-top: -23px;/*再往上移动自身高度的一半，刚好居中*/
width: 25px;/*自身宽度*/
height: 46px;/*自身高度*/
background: rgba(0,0,0,0.4);/*背景颜色为40%透明度的黑色*/
border-radius: 5px;/*设置圆角*/
margin-left: 20px;/*再往右移动个20像素*/
padding: 20px 10px;/*通过内边距将左边按钮的箭头所在区域撑大*/
}
/*右边按钮（和左边设置相同，不过left换成right）*/
#bannerright{
z-index: 10;
position: absolute;
right:0;
top:50%;
margin-top: -23px;
width: 25px;
height: 46px;
margin-right: 20px;
padding: 20px 10px;
background: rgba(0,0,0,0.4);
border-radius: 5px;
}
/*左右按钮区域的箭头图片100%填充*/
#bannerleft img,#bannerright img{
width: 100%;
height: 100%;
}
/*底部小按钮所在区域*/
.smallbuttom{
position: absolute;/*相对于父级的绝对定位*/
bottom: 30px;/*距离父级的底部30像素*/
left: 50%;/*距离左边50%*/
width: 100px;/*设置自身宽度*/
margin-left: -50px;/*50%+“-自身宽度的一半”=相对于父级的绝对定位的居中*/
z-index: 10;/*和左右按钮在同一层，高于底层高于图片*/
}
/*底部小按钮的样式*/
#smallimg li{
float: left;/*浮动向左*/
padding: 6px;/*内边距6像素*/
border-radius: 50%;/*设置成为圆形*/
margin-left:3px;/*距离左边为3像素*/
}
.fff{
background:#fff;/*默认设置第一个为白色*/
}
.d6000f{
background:#d6000f;/*默认设置其他为红色*/
}
</style>
</head>
<body>
<!--通常写网站都有个banner轮播现在写个banner轮播-->
<!--写代码先给底层-->
<div id="det">
<!--轮播开始（这个区域包含左右按钮+大图区域+小按钮区域）-->
<div class="banner">
<!--这个是大图区域-->
<div id="banner">
<ul id="bannerimg">
<li class="i1"><a href="#"> <img src="http://pic.90sjimg.com/back_pic/00/00/52/00/444e0feebdb0040ff0f020c6a0954eb4.jpg" title="" alt=""/></a></li>
<li class="i1"><a href="#"> <img src="http://pic.90sjimg.com/back_pic/00/00/69/40/fee699a5cddea0d569dc996e097365d3.jpg" title="" alt=""/></a></li>
<li class="i1"><a href="#"> <img src="http://pic.90sjimg.com/back_pic/qk/back_origin_pic/00/01/94/3776f58b6e6386fd60de8a349ec4b966.jpg" title="" alt=""/></a></li>
<li class="i1"><a href="#"> <img src="http://pic.90sjimg.com/back_pic/00/00/69/40/2c928e73f7aa4746b4600e3f0190e535.jpg" title="" alt=""/></a></li>
</ul>
</div>
<!--这个是左边按钮-->
<div id="bannerleft">
<img src="http://thumbnail0.baidupcs.com/thumbnail/9ec3636cd55b6ed532673a67425a4e15?fid=2838135596-250528-989737401132161&time=1481526000&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-QFOE4uMM6PWpnM8ej38bjGF7qF0%3d&expires=8h&chkbd=0&chkv=0&dp-logid=8039323154389339445&dp-callid=0&size=c10000_u10000&quality=90"/>
</div>
<!--这个是右边按钮-->
<div id="bannerright">
<img src="http://thumbnail0.baidupcs.com/thumbnail/d4bd30e50ed014d1c25d26c4a7c194fa?fid=2838135596-250528-813959071055462&time=1481526000&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-YsNe2xa%2bPelVK2rL8fozsDan4G0%3d&expires=8h&chkbd=0&chkv=0&dp-logid=8039323154389339445&dp-callid=0&size=c10000_u10000&quality=90"/>
</div>
<!--这个是地下的小按钮-->
<div class="smallbuttom">
<ul id="smallimg">
<li class="fff"></li>
<li class="d6000f"></li>
<li class="d6000f"></li>
<li class="d6000f"></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
/*加载完成后执行函数队列(封装一个加载完成后执行的函数)*/
function addLoadEvent(func) {
/*创建一个变量，接收加载完成*/
var oldonload = window.onload;
/* 判断如果检测到的类型不是是function，则将传的函数赋给加载完成后执行*/
if(typeof window.onload != 'function') {
window.onload = func;
} else {/*若是function，则先执行*/
window.onload = function(){
oldonload();
func();
}
}
}
/*看完上面的是不是迷迷糊糊的好吧，那用一句话来说就是：
*先用oldonload变量把现有的window.onload存下来
*然后应该先执行现有函数（oldonload）再执行自己的新的func
*或者也可以理解为:window.onload = function () {};
*/ /*第二个写运动函数（封装好的运动函数）*/
/*运动函数（传参数：元素，属性，结束位置）*/
function motion(obj, att, end) {
/*清除定时器*/
clearInterval(obj.time);
/*创建定时器*/
obj.time = setInterval(function() {
/*创建变量用来接收元素对应的值*/
var curr = 0;
var bStop = true;
/*判断属性为“opacity”时，利用getStyle函数获取元素的值，然后返回浮点数，再取整*/
if(att == 'opacity') {
curr = parseInt(parseFloat(getStyle(obj, att)));
} else {
/*直接获取值后取整*/
curr = parseInt(getStyle(obj, att));
}
/*声明变量seed接收速度，（结束位置-当前位置）/4，得到的速度为缓冲运动速度速度匀减速*/
var seed = (end-curr)/4;
/*解决不能到达目标的bug，速度>0时，上取整，速度小于0时下取整*/
seed = seed > 0 ? Math.ceil(seed) : Math.floor(seed);
/*如果达到终止位置则清除定时器*/
if( curr == end ) {
clearInterval(obj.time);
} else {
/*没有达到终点的话接着计算*/
/*如果样式为opacity则计算付样式得出结果除以10*/
if(att == 'opacity'){
obj.style.opacity = (seed + curr)/10;
} else {
/*其他样式直接计算，赋值*/
obj.style[att] = seed + curr + 'px';
}
}
},30);
}
/*通过属性获取元素对应的值*/
function getStyle(obj, att) {
/*获取外部（使用<link>）和内部（使用<style>）样式表中的样式（判断兼容IE）*/
if (obj.currentStyle) {
return obj.currentStyle[att];
} else {
return getComputedStyle(obj,false)[att];
}
} /*banner轮播（创建banner轮播函数）*/
function banner() {
/*声明变量index*/
var index = 0;
/*声明变量接收大图所在区域*/
var banner = document.getElementById('banner');
/*声明变量接收左边按钮*/
var bannerleft = document.getElementById('bannerleft');
/*声明变量接收右边按钮*/
var bannerright = document.getElementById('bannerright');
/*声明变量接收大图所在ul*/
var bigimg = document.getElementById('bannerimg');
/*声明变量接收底部按钮所在ul*/
var smallimg = document.getElementById("smallimg");
/*声明变量接收大图所在的每个li*/
var bigimgli = bigimg.getElementsByTagName('li');
/*声明变量接收小按钮所在的每个li*/
var smallimgli = smallimg.getElementsByTagName('li');
/*点击按钮（小图）显示对应大图*/
/*因为大图和小按钮数量一致，故此用小的作为基准遍历*/
for(var i = 0;i < smallimgli.length;i++){
/*将当前索引值赋予小按钮对应的每个*/
smallimgli[i].index = i;
/*当点击当前按钮的时候:将当前的索引赋值给变量index并执行函数tab()*/
smallimgli[i].onclick = function() {
index = this.index;
tab();
}
}
/*鼠标悬停到大图所在区域停止运动，移开继续运动*/
var timer = setInterval(free, 3000);
banner.onmousemove = function() {
clearInterval(timer);
};
banner.onmouseout = function() {
timer = setInterval(free, 3000);
};
/*左右按钮点击事件*/
bannerleft.onclick = function() {
index--;
if (index == -1) {
index = smallimgli.length - 1;
}
tab();
};
bannerright.onclick = function() {
index++;
if (index == smallimgli.length) {
index = 0;
}
tab();
};
/*小图（小按钮）与大图（banner）联动*/
function tab() {
/*按钮自动运动对应样式*/
/*当前对应按钮添加一个内部样式为背景白色*/
smallimgli[index].style.background = '#fff';
/*声明一个变量来接收父节点*/
var par = smallimgli[index].parentNode;
/*通过父节点找到所有的子节点*/
var lis=par.children;
/*遍历同级包括自身的每个元素*/
for(var i=0;i<lis.length;i++){
/*判断同级下非本身的所有元素，给他添加一个样式为红色*/
if(lis[i]!=smallimgli[index]){
lis[i].style.background = "red";
}
}
/*传值给运动函数：大图所在ul,属性为left,终止位置为：-((index) * bigimgli[0].offsetWidth)
* 第一张：index=0,终止位置为0
* 第二张：index=1,终止位置为第一张图片的宽度即为：-100%
* 第三张：index=2,终止位置为第一张图片的宽度即为：-200%
* 第四张：index=3,终止位置为第一张图片的宽度即为：-300%
* */
motion(bigimg, 'left', -((index) * bigimgli[0].offsetWidth));
/*第一张*/
if (index == 0) {
motion(smallimg, 'left', 0);
}
/*第二张开始*/
else if (index == smallimgli.length - 1) {
motion(smallimg,'left', -((index-2) * smallimgli[0].offsetWidth));
}
/*最后一张*/
else {
motion(smallimg,'left', -((index-1) * smallimgli[0].offsetWidth));
}
}
/*图片自行运动函数*/
function free() {
/*index初始等于0，自动每次自加1*/
index++;
/*如果索引等于图片的数量的时候将0赋给它
* index=0,
* index=1,
* index=2,
* index=3,
* index=4=bigimgli.length--->index=0,
* index=2,
* ...
* */
if (index == bigimgli.length) {
index = 0;
}
tab();
}
}
/*调用函数addLoadEvent*/
addLoadEvent(banner);
</script>
</body>
</html>
讲解版的自动轮播（新手福利）样式和js就不分离了为了看的方便的更多相关文章
- 讲解版的导航高亮（新手福利）原生JS
1.先写样式: 导航的排版样式: 导航对应高亮样式: .d6000f{ background:red; } .d6000f a{ color:#fff; } 我这个地方导航高亮样式为背景红色,字体颜色 ...
- Xamarin自定义布局系列——支持无限滚动的自动轮播视图CarouselView
背景简述 自动轮播视图(CarouselView)在现在App中的地位不言而喻,绝大多数的App中都有类似的视图,无论是WebApp还是Native App.在安卓.iOS以及Windows(UWP) ...
- Android高级图片滚动控件，编写3D版的图片轮播器
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17482089 大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博 ...
- jquery特效（4）—轮播图②（定时自动轮播）
周末出去逛完街,就回公司好好地研究代码了,也算是把定时自动轮播程序写出来了,特意说明一下,这次的轮播图是在昨天随笔中jquery特效(3)—轮播图①(手动点击轮播)的基础上写出来的,也就是本次随笔展示 ...
- 使用ViewPager实现自动轮播
很多APP中都实现了类似引导页的自动轮播,不由得想到昨天的引导页上修改一下代码实现轮播. 其实大体上只需要添加一个线程循环执行就可以了. 项目已同步至:https://github.com/nanch ...
- ViewPager自动轮播
Android使用ViewPager实现左右循环滑动及轮播效果 ViewPager是一个常用的android组件,不过通常我们使用ViewPager的时候不能实现左右无限循环滑动,在滑到边界的时候 ...
- jQuery实现选项联动轮播
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 仿网易新闻 ViewPager 实现图片自动轮播
新闻 App 首页最上方一般会循环播放热点图片,如下图所示. 本文主要介绍了利用 ViewPager 实现轮播图片,图片下方加上小圆点指示器标记当前位置,并利用 Timer+Handler 实现了自动 ...
- ios - 图片自动轮播定时器(NSTimer)以及消息循环模式简介
本文只是演示如何设置图片轮播的定时器. 创建全局变量NSTimer 程序启动后就开始轮播图片,所以在- (void)viewDidLoad中就启动定时器. 将定时器放入消息循环池中.- (void)v ...
随机推荐
- Android的Recovery中font_10x10.h字库文件制作
任务是要汉化Android中的Recovery,就了解了bootable/recovery/minui/font_10x18.h这个英文字库的来历,最终汉化的时候并没有自己汉字字库,用的github上 ...
- Java基础知识强化56：经典排序之快速排序（QuickSort）
1. 快速排序的原理: 快速排序(Quicksort)是对冒泡排序的一种改进. 快速排序由C. A. R. Hoare在1962年提出.它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其 ...
- ViutualBox虚拟机里添加磁盘
1.首先在VirtualBox界面给虚拟机添加一块磁盘 2. 启动系统,查看当前磁盘空间 Last login: Tue Mar 15 22:24:47 2016 from 192.168.1.100 ...
- 强制转https
原文:http://blog.csdn.net/wzy_1988/article/details/8549290 需求简介 基于nginx搭建了一个https访问的虚拟主机,监听的域名是test.co ...
- （七）《Java编程思想》——多态的缺陷
1.不能“覆盖”私有方法 package chapter8; /** * 不能"覆盖"私有方法 */ public class PrivateOverride { private ...
- firefox 不能显示 glyphicons 字体
折腾了很久才发现是firefox 不能跨域下载相应的字体文件,将bootstrap相应的css文件和字体文件copy到调用的项目里,问题才得以解决.
- (转)Facade模式
Facade模式要求一个子系统的外部与其内部的通信必须通过一个统一的Facade对象进行.Facade模式提供一个高层次的接口,使得子系统更易于使用. 就如同医院的接待员一样,Facade模式的Fac ...
- hadoop mapreduce 端参数优化
在MapReduce执行过程中,特别是Shuffle阶段,尽量使用内存缓冲区存储数据,减少磁盘溢写次数:同时在作业执行过程中增加并行度,都能够显著提高系统性能,这也是配置优化的一个重要依据. 下面分别 ...
- angularjs使用ng-messages的注册表单实例
<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...
- Crontab 计划任务
有一部分工作,需要某个时间开始,每天执行,每间断一段时间执行.这个时候就需要了crontab.crontab 管理着linux上一些定期的任务.log rotate,logwatch 等等废话不多说来 ...