HTML轮播图全宽,jq全兼容自适应宽度图片轮播（新手适用）

插件描述：简单的jq逻辑，方便引用，易看懂，兼容性好

更新时间：2019-12-10 00:45:09

全屏自适应轮播$(function() {

var num = 0;

$('.ui-controls ul li').click(function() {

$(this).addClass('current').siblings().removeClass('current');

$('.banner-main-img ul li').eq($(this).index()).fadeIn(300);

$('.banner-main-img ul li').eq($(this).index()).siblings().fadeOut(300);

num = $(this).index();

})

var myfn = function() {

$('.ui-controls ul li').eq(num).addClass('current').siblings().removeClass('current');

$('.banner-main-img ul li').eq(num).fadeIn(300);

$('.banner-main-img ul li').eq(num).siblings().fadeOut(300);

}

$('.ui-next').click(function() {

num++;

if (num > 4) {

num = 0;

}

myfn();

})

$('.ui-prev').click(function() {

num--;

if (num

num = 4;

}

myfn();

})

//基本定时器功能

var timer01 = null;

timer01 = setInterval(function() {

num++;

if (num > 4) {

num = 0;

}

myfn();

}, 3000)

//鼠标移入/暂停定时器

$('.banner-main').hover(function() {

clearInterval(timer01);

}, function() {

timer01 = setInterval(function() {

num++;

if (num > 4) {

num = 0;

}

myfn();

}, 3000)

})

都是新手，有什么问题，可以相互交流。

HTML轮播图全宽,jq全兼容自适应宽度图片轮播（新手适用）相关推荐

jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
html轮播图jquery,原生js和jquery实现图片轮播特效
(1)首先是页面的结构部分对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以 ...
老网站轮播图重构 ——HTML+JavaScript简单地实现图片轮播
老网站实现图片轮播时可能使用了flash相关的技术,但是由于安全原因,很多浏览器都已经不再支持flash动画渲染. 所以,我们需要将基于flash实现的图片轮播部分重构 . 使用Vue.React技 ...
HTML圆形立体感轮播图,jQuery超酷响应式圆形图片轮播图特效
mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件.该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效.该轮播图插件的特点有: 使用简单在同一个 ...
android github轮播图,Android使用开源框架ANDROID-IMAGE-INDICATOR实现图片轮播部署
之前的博文中有介绍关于图片轮播的实现方式,分别为(含超链接): 今天通过使用GitHub中的开源项目android-image-indicator来简单实现APP自带图片的轮播以及加载网络图片进行轮播 ...
vue移动端轮播图适配宽高
vue移动端轮播图适配宽高 /** 初始化轮播图的高度 */initSwipeHeight(){console.log(window.screen.width)let picw = 1242; // ...
bootstrap轮播图原点变为方块_JS实现无缝切换轮播图(自动+手动)
一.背景说起轮播图,大家应该都不陌生,各大购物网站和面试题里都能看到它的身影. 实现上也并不困难,而写这篇文章是想整理一下自己心血来潮写的代码,以及实现过程中的一些思考,大家也可以顺便复习巩固一下. ...
轮播图的实现，点击按钮切换轮播图等功能
菜单区域实现划过主菜单显示子菜单轮播区域实现 1.点击图片中左右箭头,分别跳转上一张与下一张 (1)点击上一张图其实就是让一个变量进行递减,点击下一张图就是让变量递增:(控制索引最大最小值) 2. ...
滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图)
滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图) 每一步都有详细的注释: <!DOCTYPE html> <html lang="en"> &l ...

HTML轮播图全宽,jq全兼容自适应宽度图片轮播（新手适用）

HTML轮播图全宽,jq全兼容自适应宽度图片轮播（新手适用）相关推荐

最新文章

热门文章