html多张图片无缝滚动播放,jQuery实现的多张图无缝滚动效果【测试可用】

本文实例讲述了jQuery实现的多张图无缝滚动效果。分享给大家供大家参考，具体如下：

slider

padding: 0;

margin: 0;

}

li{

list-style-type: none;

}

body{

margin: 50px;

}

.wrap{

border: 3px solid #f00;

width: 600px;

height: 200px;

position: relative;

overflow: hidden;

}

.wrap ul{

overflow: hidden;

position:absolute;

width: 1600px;

left: 0;

top: 0;

_height:1px;

}

.wrap ul li{

float: left;

width: 200px;

}

向左走

向右走

slider.js

// 如果想要使一个元素运动起来，一般情况下这个元素须要具有position属性absolute/relative

$(function(){

var oul = $('.wrap ul');

var oulHtml = oul.html();

oul.html(oulHtml+oulHtml)

var timeId = null;

var ali = $('.wrap ul li');

var aliWidth = ali.eq(0).width();

var aliSize = ali.size();

var ulWidth = aliWidth*aliSize;

oul.width(ulWidth); //1600px

var speed = 2;

function slider(){

if(speed<0){

if(oul.css('left')==-ulWidth/2+'px'){

oul.css('left',0);

}

oul.css('left','+=-2px');

}

if(speed>0){

if(oul.css('left')=='0px'){

oul.css('left',-ulWidth/2+'px');

}

oul.css('left','+='+speed+'px');

}

// setInterval()函数的作用是：每隔一段时间，执行该函数里的代码

timeId = setInterval(slider,30);

$('.wrap').mouseover(function(){

// clearInterval()函数的作用是用来清除定时器

clearInterval(timeId);

});

$('.wrap').mouseout(function(){

timeId = setInterval(slider,30);

});

$('.goLeft').click(function(){

speed=-2;

});

$('.goRight').click(function(){

speed=2;

});

效果图如下：

希望本文所述对大家jQuery程序设计有所帮助。

html多张图片无缝滚动播放,jQuery实现的多张图无缝滚动效果【测试可用】相关推荐

Python实现将一张图片放到另一张图片指定的位置上并合成一张图
Python实现将一张图片放到另一张图片指定的位置上并合成一张图 # -*- coding: utf-8 -*- # by:Apsinc # time:2019年12月10日 #Python实现将一张 ...
html 图片自动滚动播放,小卖弄：纯CSS实现图片滚动播放效果
一.效果抢先如果您手头上的浏览器是FireFox6+,或者教新版本的Chrome或是Safari浏览器,就可以看到类似上面截图的效果.完全CSS挑大梁,JS请假回家相亲去了. 二.原理简述显然,要 ...
swiper 轮播图，最后一张图与第一张图无缝衔接
问题描述: 最近用 swiper 做广告轮播图,然后发现当滑动到最后一张图片时,中间的图片会一闪而过,这样影响美观. 问题解决: 增加 loop: true 属性: <!DOCTYPE htm ...
php图片左右滚动代码怎么写,css图片滚动代码怎么写？轮播图横向滚动展示
在日常工作中网页上的轮播图展示必不可少,那么对于刚入门的小白而言本篇文章关于css图片滚动代码的介绍更是浅显易懂.希望本篇文章对大家有所帮助. css图片滚动代码示例具体如下: css图片滚动代码示例 ...
jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
用transition实现轮播图无缝衔接
思路无缝衔接是障眼法,复制第一张图到末尾,使头尾图片相同每次第一张向左切换时,先大幅位移到最后一张,再开启transition,就没有缝了每次最后一张向右切换时,先大幅位移到第一张,再开启tra ...
仿造小红书页面代码html,jQuery仿小红书登录页，背景图垂直循环滚动登录页，向上循环滚动的动画，实现一张背景图片的无缝向上循环js滚动...
jQuery仿小红书登录页,背景图垂直循环滚动登录页,向上循环滚动的动画,实现一张背景图片的无缝向上循环js滚动先看效果图: 图片是gif看着有点卡顿,网页里面其实很流畅的此代码使用CSS3动画实 ...
php无缝滚动文字,JQuery文字无缝滚动效果实现方法
本文主要介绍了JQuery实现文字无缝滚动效果示例代码(Marquee插件),具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 推荐一个JQuery的无缝文字滚动效果,同时也可以滚 ...
vue 上实现无缝滚动播放文字系统公告
首先实现效果,当时的需求做的系统公告框设定一个宽度,超宽滚动播放,没超宽则静态展示, 有了需求,想了下实现原理,最开始打算js更改字体内容的方式,但是想了下感觉会有点麻烦,想起之前做了表格的左侧边固定 ...

html多张图片无缝滚动播放,jQuery实现的多张图无缝滚动效果【测试可用】

html多张图片无缝滚动播放,jQuery实现的多张图无缝滚动效果【测试可用】相关推荐

最新文章

热门文章