html的轮播点怎么设置,html轮播效果的实现

要实现如下图的效果

点击可以选择图片；不点击的时候自动轮播；并且点击完后再次自动轮播。

思路：如同在房子里透过窗子看路过的火车一样，窗子是不动的，但火车是陆续经过窗子的，所以透过窗子可以看到依次看完所有的火车。

1. 让将图片排成一列“火车”：ul中li(li中放着轮播图片)漂浮起来后，就排列成一溜了

2. 要有一个“窗口”，把“火车”放到“窗口”里：设置div的固定长度，使它宽度等于ul中一个li的宽度

3. 让“火车”动起来：利用margin-left样式可以选择要在“窗口”显示的图片。

代码如下：

图片轮播效果

.container{

width:100%;

margin:0 auto;

}

/* 轮播容器 */

.img_wrap{

width:440px;

height:440px;

margin:0 auto;

position:relative;

}

.img_wrap ul li{

float:left;

}

/* 轮播索引 */

.img_wrap .img_index{

position:absolute;

right:20px;

bottom:20px;

}

.img_wrap .img_index ul li{

width:16px;

height:16px;

background:gray;

border-radius:8px;

cursor:pointer;

margin-right:4px;

}

.img_wrap .img_index ul li.on{

background:#fd4b4b;

}

/* 轮播图片容器 */

.img_wrap .img_lunbo{

width:440px;

height:440px;

overflow:hidden;

}

window.onload = function(){

var currentIndex = 1; //当前索引

var time = 2000; //时间间隔

var length = 5; //几个索引

var timer = null; //定时器

indexBindClick();

//自动轮播

autoPlay();

//给索引绑定事件

function indexBindClick(){

var lis = document.getElementsByClassName("img_index")[0].getElementsByTagName("li");

for(var i=0; i

lis[i].onclick = function(){

//换图片显示

currentIndex = getIndex(this);

clearInterval(timer);

showImg();

autoPlay();

};

}

}

function autoPlay(){

timer = setInterval(function(){

showImg();

currentIndex++;

},time);

}

//显示图片

function showImg(){

if(currentIndex >= 5){

currentIndex = 0;

}

//改变小图标样式

var lis = document.getElementsByClassName("img_index")[0].getElementsByTagName("li");

for(var j=0; j

lis[j].className = "";

}

lis[currentIndex].className = "on";

//显示当前图片

var ul = document.getElementsByClassName("img_lunbo")[0].getElementsByTagName("ul")[0];

var li_width = ul.getElementsByTagName("li")[0].scrollWidth;

var marginLeft = -currentIndex * li_width;

ul.style.marginLeft = marginLeft + "px";

}

/* 获取对象在父节点中索引 */

function getIndex(obj){

var children = obj.parentNode.children;

for(var i=0; i

if(children[i] == obj){

return i;

}

}

}

};

reset.css初始化代码和图片要自己准备。

jQuery个性化图片轮播效果

jQuery个性化图片轮播效果 购物产品展示:图片轮播器 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

Android使用ViewPager实现左右循环滑动及轮播效果

边界的时候会看到一个不能翻页的动画,可能影响用户体验.此外,某些区域性的ViewPager(例如展示广告或者公告之类的ViewPager),可能需要自动轮播的效果,即用户在不用滑动的情况下就能够看到其 ...

JQuery实现图片轮播效果源码

======================整体结构========================

基于css3的轮播效果

花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...

调用MyFocus库，简单实现二十几种轮播效果

一.首先点击这里下载myFocus库文件,标准文件库就行了,很小仅仅1.4M. myFocus库有以下的好处: a . 文件小巧却高效强大,能够实现二十几种轮播的效果. b . 极其简单的使用,只需要 ...

viewPager+Handler+Timer简单实现广告轮播效果

基本思想是在Avtivity中放一个ViewPager,然后通过监听去实现联动效果,代码理由详细的解释,我就不说了. MainActivity.java package com.example.adm ...

Bootstrap插件之Carousel轮播效果(2015年-05月-21日)

常见的仿Flash图片轮播效果

现在基本在很多网站上都能看到轮播效果,虽然有点烂大街的赶脚,但是这个效果确实很好看,很时尚,今天分享下代码相对较少的轮播框架,望采纳 . ①向左滑动: 思路: 将几个图片用分别用几个 li 包住,并且 ...

JQuery简单实现图片轮播效果

很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

随机推荐

cd命令

[cd]           切换目录     cd===>change directory 命令功能 : 切换目录到dirname 命令实例: 实例1:切换到跟目录下 命令: cd / 输出: ...

介绍MFSideMenu左右滑动控件的使用

昨天刚写完侧滑菜单的实例,今天在CocoaChina网站上看到一篇非常好的侧滑菜单设计案例文章,分享给大家.http://www.cocoachina/macdev/uiue/2013/071 ...

web页面设计基本原则

1.对齐. 不对齐看起来糟糕极了.简直一片混乱,会给人一种很不专业的印象.对齐让页面更漂亮一些,更重要的是便于更好的传达信息. 2.去掉糟糕的边框.边框会产生一种分离感. 3.亲密性. 元素相互靠近看 ...

Android 自己的自动化测试(4)<uiautomator>

在前面的系列文章.我与介绍java实现 Android 自己主动化測试(1)怎样安装和卸载一个应用(java).Android 自己主动化測试(2)依据ID查找对象(java):然后又介绍了用pyth ...

NS2 nam中节点及数据流颜色设置

NS2 节点颜色设置在http://hi.baidu/jrwen0/item/d105c642f4c3ce36fb89601b说明的比較具体,大家能够參见. 我这里想说的是数据流颜色的设置,相 ...

MS数据库优化查询最常见的几种方法

1.没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷) 2.I/O吞吐量小,形成了瓶颈效应. 3.没有创建计算列导致查询不优化. 4.内存不足 5.网络速度慢 6.查询出的数据量过大 ...

hihocoder 1015题

代码 #include #include #include #include

PHP正则式PCRE

PHP正则式PCRE的总结差不多就下边这些了.参考 PCRE与perl的差异 .   锚(^.$.\A.\Z/\z):^.$在多行模式下是非紧固的,在单行模式下是紧固的:而\A.\Z / \z在任何模 ...

源码分析 ucosii/source 任务源码详细分析

分析源码: 得先学会读文档, 函数前边的 note :是了解该程序员的思想的途径.不得不重视 代码前边的  Notes,了解思想后,然后在分析代码时看他是如何具体实现的. 1. ucosii/sour ...

【Oracle】【1】查询N分钟之前的数据

--查询距离现在N分钟前的数据 1440:表示一天有1440分钟 SYSDATE - 10 :表示10天前 参考博客: 1,oracle 查询十分钟之前的数据 - 胡金水的博客 - CSDN博客 ht ...