Javascript 添加href时，图像转盘将图像从滑块中推出
我在我的网站上添加了一个图像旋转木马，一切都很顺利，直到我尝试在img scr链接周围添加一个href标签。它将图像推出滑块，我将其链接到下面的样子。我确实认为是一些css将其推出，但在删除所有周围的标记后，图像保持不变。我需要这个，这样我可以添加一个灯箱的图像时，点击Javascript 添加href时，图像转盘将图像从滑块中推出,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在我的网站上添加了一个图像旋转木马，一切都很顺利，直到我尝试在img scr链接周围添加一个href标签。它将图像推出滑块，我将其链接到下面的样子。我确实认为是一些css将其推出，但在删除所有周围的标记后，图像保持不变。我需要这个，这样我可以添加一个灯箱的图像时，点击 链接到滑块的图像 我无法让它在JSFIDLE上工作，所以这里有一个链接来下载我的文件 试验 CSS .集装箱滑道{ 宽度：90%； 高度：自动； 位置：相对位置； 保证金：0自动； } .环形交叉口支架{ 填充
链接到滑块的图像
我无法让它在JSFIDLE上工作，所以这里有一个链接来下载我的文件
试验
CSS
.集装箱滑道{
宽度：90%；
高度：自动；
位置：相对位置；
保证金：0自动；
}
.环形交叉口支架{
填充：0px；
保证金：0自动；
高度：310px；
宽度：100%；
}
.环岛可移动项目{
高度：350px；
宽度：380px；
光标：指针；
显示：块；
}
.环岛可移动项目img{
身高：100%；
宽度：100%；
}
.聚焦环岛{
光标：自动；
}
#旋转木马描述{
列表样式：无；
显示：块；
宽度：850px；
填充：0；
}
#旋转木马{
字体大小：24px；
字体大小：粗体；
文本对齐：居中；
显示：无；
}
#转盘描述li.current{
显示：块；
}
#转盘控制2{
最大宽度：920px；
保证金：25像素自动；
溢出：自动；
}
#转盘控制2跨度{
宽度：100px；
字体大小：14px；
文本对齐：居中；
利润率：0.5px；
光标：指针；
背景：#fff；
}
#旋转控制{
宽度：320px；
保证金：25像素自动；
溢出：自动；
边界塌陷：塌陷；
文本对齐：居中；
利润上限：-20px；
}
#转盘控制跨度{
高度：13px；
宽度：13px；
显示：内联块；
字体大小：14px；
文本对齐：居中；
利润率：0.5px；
填充：1px；
光标：指针；
边框：0.5px纯黑；
背景：#C6；
-moz边界半径：6px；
-webkit边界半径：6px；
边界半径：6px；/*未来验证*/
-khtml边界半径：6px；/*适用于旧Konqueror浏览器*/
}
#转盘控制。当前{
背景：#000；
颜色：；
}
#旋转木马{
边缘底部：-25px；
}
#旋转木马{
填充：30px；
}
#旋转木马img：悬停{
填充：0px；
}
.prev按钮{
垫底：3件；
字体大小：22px；
背景：#333；
宽度：100px；
高度：30px；
颜色：#fff；
浮动：左；
-moz边界半径：5px；
-webkit边界半径：5px；
边框半径：5px；/*未来校对*/
-khtml边界半径：5px；/*适用于旧Konqueror浏览器*/
}
.下一个按钮{
垫底：3件；
字体大小：22px；
背景：#333；
宽度：100px；
高度：30px；
颜色：#fff；
浮动：对；
-moz边界半径：5px；
-webkit边界半径：5px；
边框半径：5px；/*未来校对*/
-khtml边界半径：5px；/*适用于旧Konqueror浏览器*/
}
}
HTML
JAVASCRIPT
window.jQuery | | document.write（'\x3C/script>'））
Shadowbox.init（）；
（函数（$）{
变量$descriptions=$（'#carousel descriptions'）。子项（'li'），
$controls=$（“#转盘控件”）。查找（'span'），
$carousel=$（“#carousel”）
.环岛（{childSelector:“img”，
产能不足：1，
自动播放：错误，
自动播放持续时间：50000000，
btnNext:没错，
是的，
马克斯：380，
明兹：200，
最大刻度：0.99，
回答：是的，
单击焦点：false，
autoplayPauseOnHover:true}）
.on（'focus'，'img'，function（）{
var slideNum=$carousel.roundout（“getChildInFocus”）；
$descriptions.add（$controls.removeClass（'current'）；
$（$descriptions.get（slideNum））.addClass（'current'）；
$（$controls.get（slideNum））.addClass（'current'）；
});
$controls.on（'click dblclick'，function（）{
var slideNum=-1，
i=0，len=$controls.length；
对于（；i=0）{
$controls.removeClass（'current'）；
$（this.addClass（'current'）；
$carousel.roundout（'animateToChild'，slideNum）；
}
});
}（jQuery））；
$（'next button'）。在（'click'，function（）上{
$（“#旋转木马”）。环岛（“animateToNextChild”）
});
$（'.prev按钮'）。在（'click'，function（）上{
$（“#旋转木马”）。环岛（“animateToPr
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<title>TEST</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/queries.css">
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/chgrid.css" />
<!-- Fonts -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Sintony:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style media="screen">
.containerslide {
width: 90%;
height: auto;
position: relative;
margin: 0 auto;
}
.roundabout-holder {
padding: 0px;
margin: 0 auto;
height: 310px;
width: 100%;
}
.roundabout-moveable-item {
height: 350px;
width: 380px;
cursor: pointer;
display:block;
}
.roundabout-moveable-item img {
height: 100%;
width: 100%;
}
.roundabout-in-focus {
cursor: auto;
}
#carousel-descriptions {
list-style:none;
display:block;
width:850px;
padding:0;
}
#carousel-descriptions li {
font-size:24px;
font-weight:bold;
text-align:center;
display:none;
}
#carousel-descriptions li.current {
display:block;
}
#carousel-controls2 {
max-width:920px;
margin:25px auto;
overflow:auto;
}
#carousel-controls2 span {
width:100px;
font-size:14px;
text-align:center;
margin:0 5px;
cursor:pointer;
background:#fff;
}
#carousel-controls {
width: 320px;
margin:25px auto;
overflow:auto;
border-collapse:collapse;
text-align:center;
margin-top: -20px;
}
#carousel-controls span {
height: 13px;
width: 13px;
display:inline-block;
font-size:14px;
text-align:center;
margin:0 5px;
padding:1px;
cursor:pointer;
border:0.5px solid black;
background:#c6c6c6;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px; /* future proofing */
-khtml-border-radius: 6px; /* for old Konqueror browsers */
}
#carousel-controls .current {
background:#000;
color:;
}
#carousel {
margin-bottom:-25px;
}
#carousel img{
padding: 30px;
}
#carousel img:hover {
padding:0px;
}
.prev-button{
padding-bottom:3px;
font-size: 22px;
background:#333;
width:100px;
height: 30px;
color:#fff;
float: left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* future proofing */
-khtml-border-radius: 5px; /* for old Konqueror browsers */
}
.next-button{
padding-bottom:3px;
font-size: 22px;
background:#333;
width:100px;
height: 30px;
color:#fff;
float: right;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* future proofing */
-khtml-border-radius: 5px; /* for old Konqueror browsers */
}
}
</style>
</head>
<body>
<div class="text-inter">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1></h1>
<section class="containerslide">
<div id="carousel">
<a href="#">
<img src="img/mactest.png" alt="" class="slide" style="" />
</a>
<img src="img/mactest.png" height="50px" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
</div>
</section>
<div id="carousel-controls2" >
<span><a href="#"><div class="prev-button" style=""><<</div></a></span>
<span><a href="#"><div class="next-button" style="">>></div></a></span>
<div id="carousel-controls" >
<span class="control current"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
</div>
</div>
</div> <!-- col-md-12 End -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js">\x3C/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<script src="js/jquery.roundabout.min.js"></script> <!-- Roundabout Link -->
<!-- Roundabout Script Start -->
<script type="text/javascript">
(function($) {
var $descriptions = $('#carousel-descriptions').children('li'),
$controls = $('#carousel-controls').find('span'),
$carousel = $('#carousel')
.roundabout({childSelector:"img",
minOpacity:1,
autoplay:false,
autoplayDuration:50000000,
btnNext: true,
btnPrev: true,
maxZ:380,
minZ:200,
maxScale: 0.99,
responsive:true,
clickToFocus: false,
autoplayPauseOnHover:true })
.on('focus', 'img', function() {
var slideNum = $carousel.roundabout("getChildInFocus");
$descriptions.add($controls).removeClass('current');
$($descriptions.get(slideNum)).addClass('current');
$($controls.get(slideNum)).addClass('current');
});
$controls.on('click dblclick', function() {
var slideNum = -1,
i = 0, len = $controls.length;
for (; i<len; i++) {
if (this === $controls.get(i)) {
slideNum = i;
break;
}
}
if (slideNum >= 0) {
$controls.removeClass('current');
$(this).addClass('current');
$carousel.roundabout('animateToChild', slideNum);
}
});
}(jQuery));
</script>
<script>
$('.next-button').on('click', function() {
$('#carousel').roundabout("animateToNextChild")
});
$('.prev-button').on('click', function() {
$('#carousel').roundabout("animateToPreviousChild")
});
</script> <!-- Roundabout Slider End -->
</body>
</html>
<img src="http://lorempixel.com/200/200"
class="slide"
data-link="http://www.google.com" />
// this function should be in your page load function
$('.slide').click(function(){
window.open($(this).attr("data-link"), "_blank");
// you can use "_self" to open it in the same tab (the jsfiddle wont allow that though)
});
// and this little bit of CSS with give you the pointer clickable link
.slide[data-link] {
cursor: pointer;
}