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

Bertha 。 2022-10-09 15:27 152阅读 0赞

要实现如下图的效果

![92b92b2387db23a08d20247ee98bd998.png][]

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

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

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;

\};

*  ![lunbo1.jpg][]
 *  ![lunbo2.jpg][lunbo1.jpg]
 *  ![lunbo3.jpg][lunbo1.jpg]
 *  ![lunbo4.jpg][lunbo1.jpg]
 *  ![lunbo5.jpg][lunbo1.jpg]

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&plus;Handler&plus;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.com/macdev/uiue/2013/071 ...

web页面设计基本原则

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

Android 自己的自动化测试(4)&amp&semi;lt&semi;uiautomator&amp&semi;gt&semi;

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

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

NS2 节点颜色设置在http://hi.baidu.com/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&sol;source 任务源码详细分析

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

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

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

[92b92b2387db23a08d20247ee98bd998.png]: /images/20221005/0a77b159d4a14d83851cf29837cb3ada.png
[lunbo1.jpg]:

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关轮播图实现html,html、css、js实现轮播图

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

相关 html简单图片轮播居中,html简单图片轮播的实现

相关 html 图片轮播实例,简单实现轮播图效果的实例

相关 html图片轮播效果加链接,HTML首页怎么加图片轮播？

相关 html网页简单实现图片轮播效果,html+css+js简单实现图片轮播效果

相关 html实现自动图片轮播,图片轮播的实现（html__js）

相关 html简单实现自动轮播代码怎么写,js+html+css实现手动轮播和自动轮播

相关 html轮播

相关 HTML轮播