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

首先贴出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. Codeforces 750E 线段树DP

    题意:给你一个字符串,有两种操作:1:把某个位置的字符改变.2:询问l到r的子串最少需要删除多少个字符,使得这个子串含有2017子序列,并且没有2016子序列? 思路:线段树上DP,我们设状态0, 1 ...

  2. process-hacker

    https://github.com/processhacker/processhacker#process-hacker // begin_phapppub typedef enum _PH_KNO ...

  3. 【串线篇】spring boot配置文件加载位置

    springboot 启动会扫描以下位置的application.properties或者application.yml文件作为Spring boot的默认配置文件 (1)–file:./config/ ...

  4. js格式化数字或者小数，加入千分符（此次为”，“）

    function npChangeNum(num) { var tag = (num || 0).toString().split("."); tag[0] = tag[0].re ...

  5. 阿里云ECS无法通过SSL远程链接问题。

    自己配置的SSL,通过密码,公司的是通过密钥,结果也是一样, 环境:centos7.x 网络: 家里宽带 公司网络 省图书馆wifi 家里宽带,公司网络均可以链接上去, 但唯独省图书馆wifi链接失败 ...

  6. 为啥HashMap的默认容量是16

    集合是Java开发日常开发中经常会使用到的,而作为一种典型的K-V结构的数据结构,HashMap对于Java开发者一定不陌生. 在日常开发中,我们经常会像如下方式以下创建一个HashMap: Map& ...

  7. spring mvc 和spring boot 中注解的使用

    1 spring mvc和spring boot之间的关系 spring boot包含spring mvc.所以,spring mvc的注解在spring boot总都是可以用的吗? spring b ...

  8. 【leetcode】403. Frog Jump

    题目如下: 解题思路:我的做法是建立一个字典dic,key为stone,value是一个set,里面存的是从前面的所有stone跳跃到当前stone的unit集合.例如stones=[0,1,2,3] ...

  9. 如何分析及处理 Flink 反压？

    反压(backpressure)是实时计算应用开发中,特别是流式计算中,十分常见的问题.反压意味着数据管道中某个节点成为瓶颈,处理速率跟不上上游发送数据的速率,而需要对上游进行限速.由于实时计算应用通 ...

  10. JS自定义随机键盘

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...