js 大图轮播

var timer;
var timer1;
var imgCount = 0;
var speed = 0;

document.getElementsByClassName(‘melelexxr‘)[0].onmouseover = function () {
    window.clearInterval(timer1);
}
document.getElementsByClassName(‘melelexxr‘)[0].onmouseout = function () {
    autoMove();
}

autoMove();
//自动移动
function autoMove() {
    timer1 = window.setInterval(function () {
        move1(1);
    }, 1800);
}

//移动方法
function move1(fx) {
    window.clearInterval(timer);//关掉定时器

    if (fx == 1)//判断向左还是向右
        imgCount++;
    else
        imgCount--;

    if (imgCount >= 3)//超出长度,变为第一张
        imgCount = 0;
    else if (imgCount < 0)
        imgCount = 2;

    var end = -1190 * imgCount;
    var oImgMove = document.getElementsByClassName(‘melelexxrd‘)[0];
    timer = window.setInterval(function () {
        if (oImgMove.offsetLeft == end) {
            window.clearInterval(timer);//关掉定时器
            return;
        }

        speed = Math.ceil(Math.abs((Math.abs(end) - Math.abs(oImgMove.offsetLeft))) / 10);

        document.getElementById(‘h1‘).innerText = speed;

        //图片移动
        if (oImgMove.offsetLeft > end)
            oImgMove.style.left = oImgMove.offsetLeft - speed + ‘px‘;
        else if (oImgMove.offsetLeft < end)
            oImgMove.style.left = oImgMove.offsetLeft + speed + ‘px‘;

    }, 20);

}

  

时间: 2024-08-04 10:03:05

js 大图轮播的相关文章

JS对于导航栏、下拉菜单以及选项卡的切换操作、大图轮播(主要练习对于样式表的操作)

1.导航拦以及下拉菜单 css样式表代码 .div1 { width: 100px; height: 30px; background-color: red; float: left; margin-right: 10px; } .div1-div { width: 100%; height: 400px; background-color: green; margin-top: 30px; display: none; } JS脚本代码 <!DOCTYPE html> <html xm

大图轮播

之前有整理过用js做的大图轮播,相对来说看起来比较繁琐,今天来写一些用bootstrap做的大图轮播,看起来非常简单: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 简单的轮播(Carousel)插件</title> <link rel="stylesheet" href="h

bootstrap大图轮播手机端不能手指滑动解决办法

网上看了很多解决办法,几乎本质都是一样的,都是引入一个滑动的js插件,加入一段js代码,即可生效,但是我试了hammer.js 和 touchSwipe.js 都不生效,也找不到原因是什么,目前在网上就找到 toucher.js 可以实现,贴到博客,留作备用:  1 <script>   2     $(function(){   3         var myTouch = util.toucher(document.getElementById('carousel-index')); 

[DBW]大图轮播,可通过两种方法实现

通过在div中加入表格,实现大图轮播,代码如下: 整体的思路: 1.在div中嵌入表格,设置div的宽和高,设置成图片大小,确定其位置,将图片插入表格,超出div部分隐藏 2.在js中定义一个变量接受left的值,并赋值为0px,即初始值 3设置函数 function  a() {在函数中将接收到的值强制转化为数字, 然后在值中减掉一张图片的宽度, } 3.延迟执行,设置需要延迟的代码及延迟的时间,最后回到表格中,加入一个调用方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14

js实现轮播图效果(附源码)--原生js的应用

1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content="奇客艺术"> <meta name="keyword" content="关键字"> <meta name=

js图片轮播与索引变色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js实现轮播图

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding:0; 10 } 11 .carousel{ 12 margin:0 aut

JS原生轮播图

哈喽!我的朋友们,最近有一个新项目.所以一直没更新!有没有想我啊!! 今天咱们来说一下JS原生轮播图! 话不多说: 直接来代码吧:下面是CSS部分: 1 *{ 2 padding: 0px; 3 margin: 0px; 4 } 5 img{ 6 width: 500px; 7 height: 300px; 8 } 9 li{ 10 float: left; 11 } 12 ul{ 13 width: 2000px; 14 list-style: none; 15 position: absol

js网站轮播图怎么做如何做?鸡哥教你简单制作效果炫酷

日了狗啦,刚刚鸡哥辛苦码了那么多字全丢了又要重新写,这是第二遍写了...今天鸡哥给小白写个不需要写js原生代码,只需要几个插件和一段通俗易懂得jquery代码就能搞定的轮播图,当然js原生代码写着也不算很繁琐,但是有些浪费时间,更何况很多人并不会用js直接写包括鸡哥,当年在学校还是研究过一段时间js的,当时还独自写了一个轮播图俘获了多少同班妹子的芳心,不过现在是基本废了,这东西要常写,不然忘的很快. 唉,本来还有妹子等着鸡哥呢,我这一大意文章丢了,重新写的话估计来不及了,先打个电话让妹子回家吧~