jquery - 焦点图下标显示、自动轮播（下标手动）

最新推荐文章于 2021-09-04 15:58:11 发布
最新推荐文章于 2021-09-04 15:58:11 发布
阅读量627 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40156417/article/details/80772637
版权

<!DOCTYPE html>
<html>
<head>
<title>ads</title>
<script src="../scripts/jquery.js" type="text/javascript"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,li {
list-style: none;
}
.banner {
position: relative;
width: 100%;
overflow: hidden;
}
.banner-list img {
display: none;
width: 100%;
}
.dot {
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -86px;
z-index: 10;
}
.dot li {
float: left;
width: 20px;
height: 20px;
margin: 0 6px;
border-radius: 10px;
background: #fff;
opacity: 0.6;
}
.active {
opacity: 1!important;
}
</style>
</head>
<body>
<div class="banner">
<div class="banner-list">
<img src="images/ads/1.jpg" alt=""/>
<img src="images/ads/2.jpg" alt=""/>
<img src="images/ads/3.jpg" alt=""/>
<img src="images/ads/4.jpg" alt=""/>
<img src="images/ads/5.jpg" alt=""/>
</div>
<ul class="dot">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</div>
</div>
<script type="text/javascript">
$(function(){
//benner块高度
$(".banner-list").height($(".banner-list img").height());
var index = 0;
var adTimer = null;
//dot操作显示不同图片
$(".dot li").mouseover(function(){
imgLength = $(".banner-list img").length;
index=$(".dot li").index(this);
imgShow(index);
}).eq(0).mouseover();

//鼠标位于图片上停止轮播，鼠标离开图片开始轮播
$(".banner").hover(function(){
if(adTimer){
clearInterval(adTimer);
}
},function(){
adTimer = setInterval(function(){
imgShow(index);
index++;
if(index == imgLength){index = 0;}
},2000);
}).trigger("mouseleave");
//显示图片
function imgShow(index){
$(".banner-list img").eq(index).fadeIn().siblings().fadeOut();
$(".dot li").eq(index).addClass("active").siblings().removeClass("active");
}
})
</script>
</body>
</html>

風花_10969
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序轮播图滚动带动背景图变换及滚动对应图片下标
nan961136007的博客
08-27 3583
今天呢，应召需求需求呢，做了一个轮播图在滑动，后面背景图也会跟着滑动变换。 一开始呢，的确没啥思路，突然想着做了轮播图滑动并且有图片数量的显示变换的，突然脑子一灵光，就想到办法了想试试。 首先呢，先放图片吧 这个是实现的状态，由于懒得弄gif图，就将就看一下吧 首先是wxml代码 <view class="swiper-all"> <swiper class=...
图片自动切换轮播带数字下标
03-15
图片自动切换代码。非常好用哦！轮播并且带下标。
图片轮播（也可以通过点击下标播放对应的图片）
weixin_30662539的博客
12-04 739
示例代码： <html> <head> <!--http://www.jb51.net/article/64662.htm --> <style type="text/css"> body{ margin:0px; <!--这两句必写，避免在不同浏览器中显示时发生错位--> padding:...
焦点图效果，点击小图显示大图
acongshijia的专栏
10-24 925
焦点图 $(function(){ var arrBigImg = new Array(); arrBigImg[0] = "img/b-1.jpg"; arrBigImg[1] = "img/b-2.jpg"; arrBigImg[2] = "img/b-3.jpg"; arrBigImg[3]
jquery实现轮播图，banner图demo（带下标与左右）
勾勾的博客
05-28 404
直接复制即可完美运行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <.
jQuery带控制按钮轮播图插件
11-19
jQuery带控制按钮轮播图插件是一种常见的网页交互效果，用于展示一组图片或内容，并通过按钮控制逐个显示。这个插件的核心在于结合了jQuery的动画功能和事件处理，为用户提供了一个可操作、平滑过渡的轮播体验。 ...
jquery轮播图插件使用方法详解
11-19
本文将详细介绍如何使用jQuery实现一个轮播图插件的使用方法。 首先，我们需要理解jQuery轮播图的基本结构。在提供的代码片段中，我们可以看到HTML部分包含了轮播图的容器、图片列表、下标容器以及左右切换按钮。...
jQuery实现图片轮播效果代码
10-21
当轮播开始时，可以先显示第一张图片，并设置一个计数器变量（如`i`）来跟踪当前显示的图片下标。 2. **鼠标悬停暂停** 当鼠标悬停在图片上时，我们希望轮播暂停，这可以通过`mouseover`和`mouseout`事件来实现。在...
jQuery焦点图左右转换效果
10-20
在网页设计中，焦点图是一种常见的视觉展示手法，它能够以轮播的形式展示多张图片或内容，吸引用户的注意力。jQuery库为实现这种效果提供了便利。本示例将详细介绍如何使用jQuery创建一个具有左右转换效果的焦点图。...
jQuery图片轮播（无缝衔接）
07-25
本文将详细介绍如何使用jQuery库来实现一个无缝衔接的图片轮播效果，包括手动切换、自动轮播以及通过下标导航。 ### 1. jQuery基础 jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作和...
jQuery支持手机端图片列表轮播滚动代码
11-03
jQuery支持手机端图片列表轮播滚动代码 jQuery支持手机端图片列表轮播滚动代码
jq移动端轮播图
04-06
jq移动端轮播图
html图片随下标轮播,超完美滚动轮播图效果
weixin_35676977的博客
06-04 1167
HtmlCssJs<>* {margin:0px;padding:0px;}.banner {width:500px;height:300px;margin:150px auto;position:relative;overflow:hidden;cursor:pointer;}.banner ul {list-style:none;width:700%;height:300px;po...
html图片随下标轮播,js+css无缝滚动轮播图
weixin_35264158的博客
06-04 223
通过js和c分博累发口小定逻间框加题览果些屏洁动理应ss3的transition属性的过渡效果写了无缝轮圈件浏用是刚。它学编套互学工久不都维逻直数构过曾结里总经网屏广明果名播图css代码就不放了，有些新直能分支调二浏页器朋代说乱效果图如下:html作一新求抖直微圈主体部分 <>script代码:window.onload=function(){var ULimg=document....
jquery - 焦点图左右按钮、下标显示、自动轮播
weixin_40156417的博客
06-22 344
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>焦点图左右按钮、下标显示、自动轮播</title> <style type="text/css"> *{ padding: 0; margin: 0; } img{ v...
利用js实现轮播图（上一张，下一张，选取第几张，动画等）
LZC_yEllOwBooK的博客
09-04 3090
今天来说一下利用js实现轮播图效果 思路 1.首先我们要把需要用到的元素获取过来 <div class="all" id='box'> <div class="screen"> <!-- 无序列表 --> <ul> <li><img src="./wf1.jpg" width="500" height="200" /></li
jQuery中直接获取标签的下标
qq_37687883的博客
07-25 5553
今天在使用jQuery做图片轮播的时候，遇到一个问题，就是为轮播图片对应的小圆图标，绑定对应的onclick事件时，用了如下代码： function getImg(m) { index=m; autoRun();//轮播图片的方法； } &lt;span class onclick="getImg(0)"&gt;&lt;...
【微信小程序】获取轮播图当前图片下标、滑动展示对应的位数、点击位数展示对应图片...
weixin_34115824的博客
12-18 3489
业务需求： 3个图片轮番播放，可以左右滑动，点击指示点可以切换图片  index.wxml： 这里使用小程序提供的&lt;swiper&gt;组件autoplay：自动播放interval：自动切换时间duration：滑动动画的时长current：当前所在的页面bindchange：current 改变时会触发 change 事件由于&lt;swiper&gt;组件提供的指示点样式比较单一，另外...
使用jQuery编写一个轮播图，要求支持自动播放、手动切换和轮播点导航。具体实现功能描述如下:自动播放:需要使用jQuery定时器对轮播图进行自动切换。手动切换:需要监听箭头或按钮的点击事件，并根据当前显示图片的下标进行上下一张图片 的切换。轮播点导航:需要在页面下方展示轮播点导航，并根据当前显示图片的下标高亮相应轮播点。
最新发布
06-02
好的，以下是使用jQuery实现轮播图的代码示例： HTML代码： ``` <ul class="slider-list"> <li><img src="img1.jpg" alt="图片1"> <li><img src="img2.jpg" alt="图片2"> <li><img src="img3.jpg" alt="图片3...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值