点击轮播图片，链接跳转错误

<#if (InfoList?size > 0)><#list InfoList as newsInfo><li class="slider-li1" style="position:absolute ;left: 0;top: 0;"><a href="${url}?newsId=${newsInfo.newsVo.id}" target="_blank"><img src="${newsInfo.coverUrl!}" alt="${newsInfo.newsVo.title?xhtml}"/></a><div class=""><div class="describe"><p>${newsInfo.title?xhtml}</p><p>${newsInfo.contentText?xhtml}</p></div></div></li></#list>

在.ftl的freemarker模板文件里写一个遍历，并将slider-li1添加到slider.js轮播插件中去

banner.js的部分文件是这么写的。

$(function () {var $box = $(".slider-canvas1"),$li = $(".slider-canvas1 li"), //轮播图$on = $(".slider-icon-wrap1 span"), //圆形按钮length = $on.length,index = length-1,....for (var j = 0; j < index; j++) {$li.eq(j).css("visibility","hidden");}...//自动轮播auto();function auto() {timer = setTimeout(function () {change(3);auto();}, 6000);}//鼠标放到轮播图时清除定时器$box[0].onmouseenter = function () {clearTimeout(timer);};//鼠标移开时继续执行定时器$box[0].onmouseleave = function () {auto();};//轮播图的切换function change(bool, i) { //bool值为1、2、3，分别表示：上一张、圆形按钮、下一张/自动轮播/*debugger*/if (index === i) return; //自己点自己不处理if (new Date() - clickTime <= 100) return; //两次点击的间隔不能小于1.8秒clickTime = new Date(); //时间更新//淡出//图片隐藏文字到上方/* $li.eq(index).animate({opacity: 0}, 0);*/$li.eq(index).css("visibility","hidden");$on.eq(index).removeClass("on");//序号的改变switch (bool) {case 1: //上一张index--;index = index < 0 && length - 1 || index;break;case 2: //圆形按钮index = i;break;case 3: //下一张、自动轮播index++;index= index%length; //轮播到了最后一个就从0开始break;}$on.eq(index).addClass("on");//淡入/*$li.eq(index).animate({opacity: 1}, 0);*/$li.eq(index).css("visibility","visible");}
});

bug1：点击轮播图片跳转错误

原因：opacity: 0;是占据空间可以点击的，这样url就会被最后一个<li>中的url覆盖，导致无论当前轮播的是哪张图片，链接的都是最后一张图片的地址

修改方案见标红

bug2:图片轮播不正常

原因：最开始auto自动轮播没有触发之前，所有的<li>都是不带visibility属性的，在触发之后，才将<li>逐个添加visibility。

因此，在所有的图片都触发了自动轮播（添加了visibility）之前，此时点击轮播按钮会出现轮播图片显示异常（没有显示正确的图片），因为此时有的<li>没有visibility 。这种<li>的优先级比样式为visibility：visiable（正确的图片li）的优先级高，会覆盖它，从而出现图片显示错误问题。

解决方案：紫色代码

在auto（）触发之前将除当前轮播图外的所有<li>都加上"visibility","hidden"样式

点击轮播图片，链接跳转错误相关推荐

微信小程序点击轮播图跳转到微信公众号文章
一.获取微信公众号文章列表要想获取微信公众号的文章列表,需要登录公众号运行账号,进行一下相关的设置. 1.1微信公众号获取文章列表 api接口文档: https://developers.weixi ...
淘宝店铺装修轮播图片上添加多个自定义链接
受朋友之托,抽了点时间研究了一下店铺装修模板,每个模板都不一样如果想实现一张轮播图片上有多个链接,在轮播的模块内必须支持自定义代码,也就是自己添加代码,我这里就不上图片了,只分析几块重要的代码. 首先 ...
javascript点击按钮循序和循环播放轮播图片
循序和循环播放轮播图片 <style>* {padding: 0;margin: 0;}#place{width: 800px;text-align: center;margin: 0 a ...
java 图片手动切换_JavaScript学习案例之手动切换轮播图片
javascript学习案例之手动切换轮播图片效果图: 思路: 1.先做界面 1.1制作按钮及点击触发事件 1.2引入一张图片 2.书写css 2.1跳转p盒子的布局(宽.高.边框线.水平居中.文字 ...
Html之实例练习（轮播图片、放大镜效果、面板拖动）
文章目录一.轮播图片二.放大镜效果三.面板拖动本篇将简单演示一下HTML里的轮播图片.放大镜效果和面板拖动的实例,代码已经打包在文章开头,需要参考的请自行下载一.轮播图片 1.效果图 2.J ...
dw html5中怎么设置图片自动切换,DW制作九宫格全屏亮灯轮播图片且自动切换图片教程...
本文介绍的是利用DW制作九宫格全屏亮灯轮播图片并且可以自动切换图片,而且点击图片时还会亮灯,推荐过来,大家一起来学习吧! 软件名称:Adobe Dreamweaver CS3 官方中文安装版软件大小: ...
js点击轮播或者自动轮播图代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="gbk&q ...
vue-awesome-swiper实现轮播图片
前言最近在学习Node.js (Express.js) + Vue.js (Element UI) 全栈开发王者荣耀手机端官网和管理后台时,学习到第三章 3.7-首页顶部轮播图片(vue-swipp ...
关于element-ui中轮播图手动切换轮播图片
文章目录前言一.关于element-ui中轮播图手动切换轮播图片二.解决方案 1.查看element-ui中Carousel 走马灯组件的方法 2.解决方法结尾前言在开发过程中发现项目中轮 ...

点击轮播图片，链接跳转错误

点击轮播图片，链接跳转错误相关推荐

最新文章

热门文章