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

首先贴出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. 02机器学习实战之K近邻算法

    第2章 k-近邻算法 KNN 概述 k-近邻(kNN, k-NearestNeighbor)算法是一种基本分类与回归方法,我们这里只讨论分类问题中的 k-近邻算法. 一句话总结:近朱者赤近墨者黑! k ...

  2. POJ 2054 Color a Tree (贪心)

    $ POJ~2054~Color~a~Tree $ $ solution: $ 我们先从题中抽取信息,因为每个点的费用和染色的次数有关,所以我们可以很自然的想到先给权值大的节点染色.但是题目还说每个节 ...

  3. 安装VueCli-3.0

    vue-cli 3.0 安装1 vue-cli 3.0 安装/卸载 npm install -g @vue/cli npm uninstall @vue/cli -g vue --version 查看 ...

  4. 17 安全字符串 System.Security.SecureString

  5. promise以及async、await学习总结

    Promise/async.await帮我们解决了什么 它给我们提供了一种新的异步编程解决方案,同时避免了困扰已久的回调地狱 // 异步的处理可能会产生这样的回调地狱(第二个异步操作和第一个异步的结果 ...

  6. python中私有属性的访问

    class MyClass(): def __init__(self): self.__superprivate = "Hello" self.__semiprivate = &q ...

  7. Linux shell 归纳之 cp

    1. 复制文件夹folder1(包括所有子文件夹和文件), 并命名为folder2 # cp -r /usr/folder1 folder2 2. 复制文件file1 到它的上一级的目录的abc文件夹 ...

  8. react-native 异常处理 Execution failed for task ':app:mergeDebugResources'.

    1.react-native run-android 失败 * What went wrong:Execution failed for task ':app:mergeDebugResources' ...

  9. 代理池抓取基础版-（python协程）--抓取网站（西刺-后期会持续更新）

    # coding = utf- __autor__ = 'litao' import urllib.request import urllib.request import urllib.error ...

  10. NOIP 真题选讲

    推荐生要凉辽 这可能是我更新的最后一篇博客 代码什么的有时间再说吧,先讲思路.(已搞定前三题代码) 首先先看一下线段覆盖题.我们有一个区间,要用线段覆盖整个区间. 这个是线段的覆盖简图.我们如何选取最 ...