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

首先贴出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. [NOI2007]社交网络（最短路）

    [NOI2007]社交网络 Description 在社交网络(socialnetwork)的研究中,我们常常使用图论概念去解释一些社会现象.不妨看这样的一个问题. 在一个社交圈子里有n个人,人与人之 ...

  2. Nginx-配置负载均衡实例

    配置负载均衡实例 实现效果: 配置负载均衡 实验代码 1) 首先准 备两个同时启动的 Tomcat 2) 在 nginx.conf 中进行配置 随着互联网信息的爆炸性增长,负载均衡(load bala ...

  3. Oracle常用基础语法（未完待补和操作）

    这篇博客主要是Oracle常用基础语法, 另外,存储过程和存储函数很重要,这个后期看视频学习,还有DB优化,另外,还有plsql develop和navicat的使用,重点是数据的导入导出: ---- ...

  4. 对logistic回归分析的两重认识

    logistic回归,回归给人的直观印象只是要求解一个模型的系数,然后可以预测某个变量的回归值.而logistic回归在应用中多了一层含义,它经常应用于分类中.第一重认识:logistic是给真正的回 ...

  5. CUDA Error

    第一个问题:CUDA Error: out of memory darknet: ./src/cuda.c:36: check_error: Assertion `0' failed. 已放弃 (核心 ...

  6. Spring动态数据源-AbstractRoutingDataSource

    在分库分表的情况下,在执行SQL时选择连接不同的数据源(库)的思路:配置多个数据源加到动态数据源对象中,根据实际的情况动态切换到相应的数据源中. 如存放订单信息的有10个库,每个库中有100张表,根据 ...

  7. 20180708-Java变量类型

    public class Test{ public void pupAge(){ int age = 0; age = age + 7; System.out.println("Puppy ...

  8. vue 如何通过监听路由变化给父级路由菜单添加active样式

    1.项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式. 2.遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact ...

  9. JAVA数组的toString()方法不能直接输出数组内容？

    问题描述:我定义了一个类,类名是Job,当我输出Job.toString()是可以按我重载的toString方法输出的,但是如果输出jobs[]这个数组时,只会输出[Lmodel.Job;@45e22 ...

  10. jQuery插件3种类型

    1.封装对象方法的插件 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件. 此类插件可以发挥出jQuery选择器的强大优势,有相当一部分的jQuery方 ...