经常在购物网站，看到那种图片轮滑的效果，所以看到有人实现了，所以我也就学习下了。

首先贴出html代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>document</title>

    <link rel="stylesheet" type="text/css" href="style.css">

    <script type="text/javascript" src="javascript.js"></script>

</head>

<body>

<div id="flash">

    <ul id="pic">

        <li style="display:block"><img src=""></li>

        <li><img src="" ></li>

        <li><img src=""></li>

        <li><img src=""></li>

        <li><img src=""></li>

        <li><img src=""></li>

    </ul>

    <ol id="num">

        <li class="activate">1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

    </ol>

    <a href="javascript:;" class="arrow" id="left">&lt;</a>

    <a href="javascript:;" class="arrow" id="right">&gt;</a>

</div>

</body>

</html>

图像的原路径我就不制定了，css文件

* {

    margin: 0;

    padding: 0;

    list-style: none;

}

a

{

    text-decoration: none;

    color: #fff;

}

#flash

{

    width: 730px;

    height: 454px;

    margin: 100px auto;

    position: relative;

    cursor: pointer;

}

#pic li

{

    position: absolute;

    top: 0;

    left: 0;

    z-index: 1;

    display: none;

}

#num

{

    position: absolute;

    left: 40%;

    bottom: 10px;

    z-index: 2;

    cursor:default;

}

#num li

{

    float: left;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background: #666;

    margin: 3px;

    line-height: 20px;

    text-align: center;

    color: #fff;

    cursor: pointer;

}

#num li.active

{

    background: #f00;

}

.arrow{

    height: 60px;

    width: 30px;

    line-height: 60px;

    text-align: center;

    display: block;

    position: absolute;

    top:45%;

    background-color: rgba(0,0,0,0.3);

    z-index: 3;

    display: none;

}

.arrow:hover

{

    background: rgba(0,0,0,0.7);

}

#flash:hover .arrow

{

    display: block;

}

#left

{

    left: 2%;

}

#right

{

    right: 2%;

}

js代码：

function $(id) {

    return typeof id==='string'?document.getElementById(id):id;

}

window.οnlοad=function(){

    var index=0;

    var timer=null;

    var pic=$("pic").getElementsByTagName("li");

    var num=$("num").getElementsByTagName("li");

    var flash=$("flash");

    var left=$("left");

    var right=$("right");

    //单击左箭头

    left.οnclick=function()

    {

        index--;

        if (index<0)

        {index=num.length-1};

        changeOption(index);

    }

    //单击右箭头

    right.οnclick=function(){

        index++;

        if (index>=num.length) {index=0};

        changeOption(index);

    }

    //鼠标划在窗口上面，停止计时器

    flash.οnmοuseοver=function(){

        clearInterval(timer);

    }

    //鼠标离开窗口，开启计时器

    flash.οnmοuseοut=function()

    {

        timer=setInterval(run,2000)

    }

    //鼠标划在页签上面，停止计时器，手动切换

    for(var i=0;i<num.length;i++)

    {

        num[i].id=i;

        num[i].οnmοuseοver=function()

        {

            clearInterval(timer);

            changeOption(this.id);

        }

    }

    //定义计时器

    timer=setInterval(run,2000)

    //封装函数run

    function run(){

        index++;

        if (index>=num.length) {index=0};

        changeOption(index);

    }

    //封装函数changeOption

    function changeOption(curindex)

    {

        console.log(index)

        for(var j=0;j<num.length;j++){

            pic[j].style.display="none";

            num[j].className="";

        }

        pic[curindex].style.display="block";

        num[curindex].className="active";

        index=curindex;

    }

}

如果想看结果可以上http://neal1991.pythonanywhere.com，这个有实现结果的。

使用js实现图片轮滑效果的更多相关文章

  1. 原生js实现图片轮播效果

    思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...

  2. html中使用JS实现图片轮播效果

    1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...

  3. js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...

  4. js实现淘宝首页图片轮播效果

    原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...

  5. jQuery个性化图片轮播效果

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

  6. JQuery简单实现图片轮播效果

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

  7. 用JS做图片轮播

    脚本之家 首页应用手游攻略教程 ﹤首页 >> 网络编程 >> JavaScript >> 网页特效 >> 图象特效 js 图片轮播(5张图片) 作者:m ...

  8. CSS3图片轮播效果

    原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...

  9. 超实用的JavaScript代码段 Item3 --图片轮播效果

    图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...

随机推荐

  1. python 正则表达式教程（转）

    转自:https://zhuanlan.zhihu.com/p/28920775 本节我们看一下正则表达式的相关用法,正则表达式是处理字符串的强大的工具,它有自己特定的语法结构,有了它,实现字符串的检 ...

  2. hdu4348 To the moon (可持久化线段树)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4348 题目大意:给定含有n个数的序列,有以下四种操作 1.C l r d:表示对区间[l,r]中的数加 ...

  3. django之创建项目

    1.创建虚拟环境 mkvirtualenv django_study -p python3 创建成功后:(django_study) python@ubuntu:~$ 2.安装django-指定版本1 ...

  4. springboot2.0整合redis的发布和订阅

    1.Maven引用 <dependency> <groupId>org.springframework.boot</groupId> <artifactId& ...

  5. man uname

    UNAME(1)         User Commands/用户命令        UNAME(1) NAME/名称       uname - print system information/打 ...

  6. vue大文件分片上传插件

    最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...

  7. CoreData新增字段

    1. 在模型文件的Entity里面增加字段名 2. Xcode工具栏选择Edtor->Creat NSManagerObject SubClass->...->生成新的关联文件 3. ...

  8. Android签名机制之---签名验证过程详解

    一.前言 今天是元旦,也是Single Dog的嚎叫之日,只能写博客来祛除寂寞了,今天我们继续来看一下Android中的签名机制的姊妹篇:Android中是如何验证一个Apk的签名.在前一篇文章中我们 ...

  9. Linux 系统下文件夹与文件的读写可执行权限问题

    linux是一个多用户操作系统,linux对文件系统内的所有文件,实行了严格的权限划分管理.防止没有权限的用户访问某个文件.linux文件或目录的权限分为 读.写.可执行三种权限.文件访问的用户类别分 ...

  10. PHP垃圾回收深入理解

    转摘于http://www.cnblogs.com/lovehappying/p/3679356.html PHP是一门托管型语言,在PHP编程中程序员不需要手工处理内存资源的分配与释放(使用C编写P ...