大图轮播 2017-4-15

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-10-10 08:40:22

大图轮播 2017-4-15的相关文章

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

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

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

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

简单易懂实用的大图轮播

<head> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>大图轮播</title> <style type="text/css"> * { margin: 0px; padding: 0px; } #container { width: 500px; h

自定义View之无限大图轮播ShufBanner

无限大图轮播–ShufBanner 轮播图作为一个app的宣传,展示等,往往占据着一个很重要的地位,大部分app都将其放在首页.那么通常的做法都是使用ViewPager,使其能够作用滑动,而无限轮播无外乎两种做法. - 第一种是将ViewPager的size定义为无限大,定义其初始显示的位置为中间,这样的话因为左或者右都有很多的页面,所以造成了一种可以无限轮播的假象.同时因为ViewPager的特性,其只是加载当前显示page以及左和右的三个页面,不用担心OOM. - 第二种是,将ViewPag

例题:大图轮播

大图轮播 图片轮播 <!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=&quo

JQuery大图轮播

第一步新建一个js文件夹将现有的jquery-1.7.1.min.js放到该文件夹下引如到head部分 第二步封装一个jS脚本方法引入到页面的HEAD部分,代码如下: 1 function myalert(t, c, tc) { 2 3 var tcstr = "<div id=\"tc\" style=\"position: fixed; width: 400px; left: 50%; margin-left: -200px; top: -500px; b

利用表格实现大图轮播

<style type="text/css">                      #a1{ width:1080px; height:350px;position:relative;  overflow:hidden;float:left;margin-left:10%            }#ta{ position:relative; left:0px; top:0px;  transition:1s     }  </style></hea

2017-6-4 用jQuery 做大图轮播

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server&quo