html banner图片滚动,无缝循环滚动（适用banner、图片滚动）

2024-06-26 08:13:44

这个滚动JS适用任何图片滚动，适用按钮，而且不会产生缝隙

代码如下

CSS样式：

.catalog{

width: 335px;

height: 354px;

float: left;

margin-top: 43px;

border: 1px solid #b03924;

position: relative;

overflow: hidden;

}

.catalog .h5{

font-weight: bold;

background: #e4e4e4;

line-height: 20px;

height: 20px;

margin-bottom: 5px;

text-indent: 5px;

}

.catalog .imgbox li{

width: 335px;

height: 354px;

float: left;

overflow: hidden;

background: #FFF;

}

.catalog .arrow{

position: absolute;

width: 50px;

height: 23px;

right: 10px;

top: 243px;

_display: inline;

z-index: 999;

}

.catalog .arrow li{

float: left;

}

.catalog .arrow a.left{

width: 23px;

height: 23px;

line-height: 15px;

display: block;

background: url(../images/icon.png);

background-position:-224px -30px;

overflow: hidden;

float: left;

}

.catalog .arrow a.right{

width: 23px;

height: 23px;

line-height: 15px;

text-indent: -99em;

display: block;

background: url(../images/icon.png);

background-position:-258px -30px;

overflow: hidden;

float: right;

}

.catalog .arrow a.left{

/*width: 50px;

background-position: -76px 0px;*/

}

.catalog .arrow a.right{

/*background-position: -131px 0px;

margin-left: 8px;*/

}

.catalog .arrow a.left:hover{

background-color: #ebebeb;

}

.catalog .arrow a.right:hover{

background-color: #ebebeb;

}

HTML代码如下：

全省大学生村官先进事迹宣讲团走进我校

同心共话乡村情，携手共筑中国梦。4月29日下午，由省委组织部、省教育厅和团省委主办的“青春献沃土·共筑...
全省大学生村官先进事迹宣讲团走进我校

同心共话乡村情，携手共筑中国梦。4月29日下午，由省委组织部、省教育厅和团省委主办的“青春献沃土·共筑...
全省大学生村官先进事迹宣讲团走进我校

同心共话乡村情，携手共筑中国梦。4月29日下午，由省委组织部、省教育厅和团省委主办的“青春献沃土·共筑...

JS代码如下：

thisUl: $('#catalog ul.imgbox'),

btnLeft: $('#catalog a.left'),

btnRight: $('#catalog a.right'),

thisLi: $('#catalog ul.imgbox li'),

init: function () {

slideX.thisUl.width(slideX.thisLi.length * 335);

slideX.slideAuto();

slideX.btnLeft.click(slideX.slideLeft).hover(slideX.slideStop, slideX.slideAuto);

slideX.btnRight.click(slideX.slideRight).hover(slideX.slideStop, slideX.slideAuto);

slideX.thisUl.hover(slideX.slideStop, slideX.slideAuto);

slideLeft: function () {

slideX.btnLeft.unbind('click', slideX.slideLeft);

slideX.thisUl.find('li:last').prependTo(slideX.thisUl);

slideX.thisUl.css('marginLeft', -335);

slideX.thisUl.animate({ 'marginLeft': 0 }, 350, function () {

slideX.btnLeft.bind('click', slideX.slideLeft);

slideRight: function () {

slideX.btnRight.unbind('click', slideX.slideRight);

slideX.thisUl.animate({ 'marginLeft': -335 }, 350, function () {

slideX.thisUl.css('marginLeft', '0');

slideX.thisUl.find('li:first').appendTo(slideX.thisUl);

slideX.btnRight.bind('click', slideX.slideRight);

slideAuto: function () {

slideX.intervalId = window.setInterval(slideX.slideRight, 3000);

slideStop: function () {

window.clearInterval(slideX.intervalId);

$(document).ready(function () {

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/12531.html

支付宝打赏

感谢您对作者gordon的打赏，我们会更加努力！如果您想成为作者，请点我

html banner图片滚动,无缝循环滚动（适用banner、图片滚动）相关推荐

JavaScript实现京东轮播图效果——自动轮播，左右按钮切换图片，小圆圈跟随图片变化，点击小圆圈可跳转图片，无缝循环播放
JavaScript实现京东轮播图效果--自动轮播,左右按钮切换图片,小圆圈跟随图片变化,点击小圆圈可跳转图片,无缝循环播放静态效果图如下: CSS部分 *{margin: 0;padding: 0 ...
html图片左右无缝循环滚动示例
首先,最外层的宽高要给个固定值,然后给个overflow: hidden;,放不下的图片隐藏. 原理:(以左方向为例)先向左移动一个图片的宽度,此时第一个图片已经看不见了,这个时候将第一个标签元素克隆 ...
vue-seamless-scroll无缝循环滚动时二轮图片不渲染
关于使用vue-seamless-scroll实现图片无缝循环滚动时出现第二轮图片需要第一轮图片滚动结束后才能渲染出来的问题. 1.我遇到的问题很清楚,就是图片应该无缝循环滚动,但是必须得等前一轮图片 ...
ae图片无缝循环滚动_HTML图片滚动
HTML图片无缝滚动鼠标悬停 <!DOCTYPE html> <html> <head><title>无缝滚动</title> </h ...
仿造小红书页面代码html,jQuery仿小红书登录页，背景图垂直循环滚动登录页，向上循环滚动的动画，实现一张背景图片的无缝向上循环js滚动...
jQuery仿小红书登录页,背景图垂直循环滚动登录页,向上循环滚动的动画,实现一张背景图片的无缝向上循环js滚动先看效果图: 图片是gif看着有点卡顿,网页里面其实很流畅的此代码使用CSS3动画实 ...
网页图片无缝循环滚动html代码
图片循环滚动代码图片无缝滚动代码先介绍一下它的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆,通 ...
无缝循环滚动图片的JS代码
无缝循环滚动图片的JS代码,用来展示商品什么的最好了,图片URL可以自行替换,速度也可以自己调试. <html> <head> <meta http-equiv=&quo ...
JavaScript之图片的无缝滚动
图片无缝滚动就是图片一直不停的滚动,好像没有无穷无尽似的,实际上就是几张图片不停的循环,但是看不出有从最后面切换到最前面的效果,这就是无缝滚动,文字和图片都可以无缝滚动,这里介绍的是图片,文字是同样的 ...
html使用javascript实现图片滚动无缝拼接
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

最新文章

热门文章