js功能实现top轮播图

作用：向左滚动的轮播图

参数：主容器的id

调用方式：直接拷贝调用方法

function autoPlay(id){

var scroll=document.getElementById(id);

var ul=scroll.children[0]

var num=0

var timer=null;

timer=setInterval(autoGoing,20); //滚动轴方法

function autoGoing(){

num--;

num<=-1200 ? num=0:num;

ul.style.left=num+"px";

}

scroll.onmouseover=function(){ //鼠标悬停停止滚动

clearInterval(timer)

}

scroll.onmouseout=function(){ //鼠标移开 继续滚动

timer=setInterval(autoGoing,20);

}

}

参考标签：

<body>

<div class="box" id="scroll">

<ul>

<li><img src="img/01.jpg"/></li>

<li><img src="img/02.jpg"/></li>

<li><img src="img/03.jpg"/></li>

<li><img src="img/04.jpg"/></li>

<li><img src="img/01.jpg"/></li>

<li><img src="img/02.jpg"/></li>

</ul>

</div>

参考样式：

*{margin: 0;padding: 0;}

ul{list-style: none;}

img{

vertical-align: top; /*取消三个图片底部像素距离*/

}

.box{

width: 600px;

height: 200px;

margin: 100px auto;

position: relative;

overflow: hidden;

}

.box ul li {

float: left;

}

.box ul{

width: 400%;

position: absolute;

left: 0;

top: 0;

}

------------------------------------------------------------------------------------------------------------------------
时间： 2024-10-22 20:45:39

js功能实现top轮播图的相关文章

原生JS面向对象思想封装轮播图组件

原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能实现都分别分为不同的模块.目前我封装的这个版本还不适配移动端,只适配PC端. 主要的功能有:自动轮播,点击某一张图片对应的小圆点就跳转到指定图片,有前后切换按钮.使用的时候只需要传入图片的路径以及每张图片分别所对应的跳转路径还有目标盒子ID就可以了,还可以自定义每张图轮播的延时,不过延时参数不是必须

移动端原生js，css3实现轮播图

一.功能需求 1.自动播放2.滑动切换3.点击切换 二.思路分析 html代码: <div class="container"> <ul class="list clearfix"> <li class="item fl item5">图5</li> <li class="item fl item1">图1</li> <li class="

js+html+css实现轮播图

首先先把轮播图的结构搭建起来(html),代码如下:  结构可自行搭建,结构搭建完接着就是用css去进行修饰美化   此时的ul是没有给它设置固定的宽和高的,高可以先设置,宽不能,等下让图片一张接一张一的动起来,实际上是改变了ul的left值,ul的宽可以通过图片(li)的宽 乘以 图片数量即可得到,但是不能写死,所以ul的宽我们用js去获取设置,一起看下现在的效果 好了,结构已经搭建完了,现在只是静态的,我们需要用js去让它动起来,我们先获取html中需要用到的元素并把它存给变量,这里我事先存

js写的简单轮播图

这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放,离开自动播放6.移动到导航上,切换相对应的导航 然后贴代码: <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Docume

JS 基于面向对象的 轮播图2

<script> // 函数不能重名, --> 子函数 // is defined function --> 函数名是否写错了 function AutoTab(id) { Tab.apply(this, arguments); this.timer = null; this.inits(); // this.autoPlay(); } AutoTab.prototype = new Tab(); AutoTab.prototype.constructor = AutoTab; /

JS 基于面向对象的 轮播图1

---恢复内容开始--- 1 'use strict' 2 function Tab(id){ 3 if(!id)return; 4 this.oBox = document.getElementById(id); 5 this.aBtn = this.oBox.getElementsByTagName('input'); 6 this.aDiv = this.oBox.getElementsByTagName('div'); 7 this.iNow = 0; 8 this.init(); 9

JS 无缝轮播图1-节点操作

无缝轮播图 (使用节点操作) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding:0; margin:0; } body{ background:#F5F5F5; } #content{ width:300px; height:200px;

原生js实现移动端Touch轮播图的方法步骤

Touch 轮播图 touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下. 1. html 结构 结构上,还是用ul.li来存放轮播图片,ol.li来存放轮播小圆点: 2. 样式初始化 html的一些标签,都会有一些默认样式,比如body标签默认是有一个边距的,为了不影响美观,我们需要清除掉. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 /* 清除标签默认边距 */ body,ul,li,ol,im

JS 实现动态轮播图

JavaScript实现轮播图思路 + html/css + js源码 整个轮播图的效果是通过js代码,操作dom, 拿到html我们需要的元素,控制整个ul的距离浏览器左边的位置,让排好的图片依次出现在相框中,不在相框中的元素会被css中的 overflow : hidden 隐藏掉, 其次,图片是经过处理的 ,正好和我们的相关等宽等高! 动态的创建元素,下面我们会动态创建li,并通过css把它修饰成小按钮格式,其次给小按钮添加点击事件,鼠标经过,离开事件,动态的实现图片的移动, 其实就是根据