Question

我已经制作了一个jQuery滑块，可以每1秒自动更换一次幻灯片，但是当我添加滑动项目符号（风格化的div）时，它开始出现故障。我尝试了一切来修复它，但我无法弄清楚什么是错的，我希望你能做我没做的事情

如果你不理解描述，这里有一个小提琴http://jsfiddle.net/fxk1fxy9/

PS：滑块本身工作正常，如果我不悬停“子弹”就没有问题

这是我的代码

JS

$(document).ready(function(){
            $('.pic').hide();
            i=1;
            function slider(){

            $('#pic-'+i).fadeIn('0').delay(1000).fadeOut('0',function(){
            i=i+1;if(i==6){i=1;}slider();

            });

            }
            slider();
            });
            function show1(){
            $('.pic').hide();
            $('#pic-1').fadeIn('1').delay(1000);
            }
            function show2(){
            $('.pic').hide();
            $('#pic-2').fadeIn('1').delay(1000);
            }
            function show3(){
            $('.pic').hide();
            $('#pic-3').fadeIn('1').delay(1000);
            }
            function show4(){
            $('.pic').hide();
            $('#pic-4').fadeIn('1').delay(1000);
            }
            function show5(){
            $('.pic').hide();
            $('#pic-5').fadeIn('1').delay(1000);
            }

HTML

<div class="slider">


        <!-- Slide 1 -->
            <div class="slide">
                <div class="options">
                    <div class="option" onmouseover="show1();">
                        <div class="o-rank">
                            <h1> 1 </h1>
                        </div>
                        <div class="o-logo">
                            <img src="img/logo.png">
                        </div>
                        <div class="o-title">
                            <h1>Lorem ipsum </h1>
                        </div>
                        <div class="o-text">
                            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. </p>
                        </div>
                        <div class="o-button">
                            <a href="#"> > </a>
                        </div>
                    </div>
                    <div class="option" onmouseover="show2();">
                        <div class="o-rank">
                            <h1> 2 </h1>
                        </div>
                        <div class="o-logo">
                            <img src="img/logo.png">
                        </div>
                        <div class="o-title">
                            <h1>Lorem ipsum </h1>
                        </div>
                        <div class="o-text">
                            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. </p>
                        </div>
                        <div class="o-button">
                            <a href="#"> > </a>
                        </div>
                    </div>
                    <div class="option" onmouseover="show3();">
                        <div class="o-rank">
                            <h1> 3 </h1>
                        </div>
                        <div class="o-logo">
                            <img src="img/logo.png">
                        </div>
                        <div class="o-title">
                            <h1>Lorem ipsum </h1>
                        </div>
                        <div class="o-text">
                            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. </p>
                        </div>
                        <div class="o-button">
                            <a href="#"> > </a>
                        </div>
                    </div>
                    <div class="option" onmouseover="show4();">
                        <div class="o-rank">
                            <h1> 4 </h1>
                        </div>
                        <div class="o-logo">
                            <img src="img/logo.png">
                        </div>
                        <div class="o-title">
                            <h1>Lorem ipsum </h1>
                        </div>
                        <div class="o-text">
                            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. </p>
                        </div>
                        <div class="o-button">
                            <a href="#"> > </a>
                        </div>
                    </div>
                    <div class="option" onmouseover="show5();">
                        <div class="o-rank">
                            <h1> 5 </h1>
                        </div>
                        <div class="o-logo">
                            <img src="img/logo.png">
                        </div>
                        <div class="o-title">
                            <h1>Lorem ipsum </h1>
                        </div>
                        <div class="o-text">
                            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. </p>
                        </div>
                        <div class="o-button">
                            <a href="#"> > </a>
                        </div>
                    </div>
                </div>
                <div class="pictures">
                    <div class="pic" id="pic-1">
                        <img src="img/1.jpg" id="tes-1" class="tes" >
                    </div>
                    <div class="pic" id="pic-2">
                        <img src="img/2.jpg" id="tes-2"  class="tes">
                    </div>
                    <div class="pic" id="pic-3">
                        <img src="img/3.jpg" id="tes-3"  class="tes">
                    </div>
                    <div class="pic" id="pic-4">
                        <img src="img/4.jpg" id="tes-4"  class="tes">
                    </div>
                    <div class="pic" id="pic-5">
                        <img src="img/5.jpg" id="tes-5"  class="tes">
                    </div>
                </div>
            </div>              
        </div>

CSS

*{margin:0; padding:0; border:0; box-sizing:border-box;font: inherit;}

.slider{
  width:100%;
  height:500px;
  overflow:hidden;
  background:#111;
}
.slide{
  width:100%;
  height:100%;
  float:left;
  position:relative;
}

.options{
  width:10%;
  height:100%;
  position:absolute;
  z-index:99;
}

.option{
  width:700px;
  height:18%;
  margin-bottom:9%;
  background:rgba(0, 0, 0, .7);
  cursor:pointer;
  transition:all .5s ease;
}
.option:hover{
    background:#000;
}
.o-rank{
  width:30px;
  height:30px;
  border-radius:50%;
  background:#34495e;
  float:left;
  margin-left:5px;
  margin-top:30px;
}
.o-rank h1{
  font-family:arial;
  font-weight:bold;
  color:#fff;
  font-size:18px;
  text-align:center;
  line-height:30px;
}
.o-logo{
  width:50px;
  height:50px;
  float:left;
  margin-top:20px;
  margin-left:10px;
}
.o-logo img{
  width:100%;
  height:100%;
}
.o-title{
  width:150px;
  height:100%;
  float:left;
  margin-left:10px;
}
.o-title h1{
  font-family:arial;
  font-weight:bold;
  color:#fff;
  font-size:18px;
  text-align:left;
  line-height:90px;
  text-transform:uppercase;
}
.o-text{
  width:300px;
  height:100%;
  float:left;
  margin-left:5px;
  padding-top:20px;
}
.o-text p{
  font-family:arial;
  font-weight:normal;
  color:#fff;
  font-size:16px;
  text-align:left;
}
.o-button{
  width:60px;
  height:40px;
  background:#34495e;
  float:right;
  margin-top:25px;
  text-align:center;
}
.o-button a{
  font-family:arial;
  font-weight:bold;
  color:#fff;
  font-size:24px;
  text-decoration:none;
  line-height:40px;
}
.pictures{
  width:100%;
  height:100%;
  z-index:10;
}
#pic-1, #pic-2, #pic-3, #pic-4, #pic-5{
    width:100%;
    height:100%;
}

.pic img{
width:100%;
height:100%;
}
.p-hov{
    position:relative;
    width:100%;
    height:100%;
    background:#000;
    z-index:999;
}
#pic-h-1, #pic-h-2, #pic-h-3, #pic-h-4, #pic-h-5{
    width:100%;
    height:100%;
    visibility:hidden;
    position:absolute
}

.pic-h img{
width:100%;
height:100%;
}

/* Responsive */
@media only screen
and (max-width : 800px) {
  .slider{
    height:220px;
  }
  .option{
    width:300px;
  }
  .o-rank{
    width:15px;
    height:15px;
    float:left;
    margin-top:10px;
    margin-left:4px;
  }
  .o-rank h1{
    font-size:10px;
    line-height:15px;
  }
  .o-logo{
    width:20px;
    height:20px;
    float:left;
    margin-top:7.5px;
    margin-left:6px;
  }
  .o-title{
    width:70px;
    height:100%;
    float:left;
    margin-left:10px;
  }
  .o-title h1{
    font-family:arial;
    font-weight:bold;
    color:#fff;
    font-size:8px;
    text-align:left;
    line-height:40px;
    text-transform:uppercase;
  }
  .o-text{
    width:135px;
    height:100%;
    float:left;
    margin-left:0px;
    padding-top:5px;
  }
  .o-text p{
    font-family:arial;
    font-weight:normal;
    color:#fff;
    font-size:8px;
    text-align:left;
  }
  .o-button{
    width:30px;
    height:15px;
    background:#34495e;
    float:right;
    margin-top:10px;
    text-align:center;
  }
  .o-button a{
    font-family:arial;
    font-weight:bold;
    color:#fff;
    font-size:10px;
    text-decoration:none;
    position:relative;
    top:-12px;
  }
}

Answer 1

有些事情......如果你想让悬停效果起作用，你需要能够暂停幻灯片放映，你还应该将这些鼠标悬停事件抽象为悬停处理程序，这样你就不必定义单独的函数或元素属性......试试这样的事情

(function($){
    $(document).ready(function(){
        $('.pic').hide();
        slider_delay = false;
        
        function slider(hover) {
            var current = $('.pic.active');
            var next;
            if(!hover){
                next = current.next();
            }else{
                next=$('#pic-'+hover.attr('id').split('_')[1]);
            }
            if (next.length == 0) next = $('#pic-1');
            current.fadeOut('slow', function () {
                $(this).removeClass('active');
                $(next).fadeIn('slow', function () {
                    $(this).addClass('active');
                    window.clearTimeout(slider_delay);
                    if (!hover) slider_delay = window.setTimeout(slider, 1000);
                });
            });
        }
        $('.option').hover(function () {
            window.clearTimeout(slider_delay);
            slider($(this));
        },
        function(){
            window.clearTimeout(slider_delay);
            slider_delay = window.setTimeout(slider, 1000);
        });
        
        function init_slider() {
            $('#pic-1').fadeIn('slow', function () {
                $(this).addClass('active');
                window.clearTimeout(slider_delay);
                slider_delay = window.setTimeout(slider, 1000);
            });
        }
        init_slider();
    });
})(jQuery);

*{margin:0; padding:0; border:0; box-sizing:border-box;font: inherit;}

.slider{
  width:100%;
  height:500px;
  overflow:hidden;
  background:#111;
}
.slide{
  width:100%;
  height:100%;
  float:left;
  position:relative;
}

.options{
  width:10%;
  height:100%;
  position:absolute;
  z-index:99;
}

.option{
  width:700px;
  height:18%;
  margin-bottom:9%;
  background:rgba(0, 0, 0, .7);
  cursor:pointer;
  transition:all .5s ease;
}
.option:hover{
	background:#000;
}
.o-rank{
  width:30px;
  height:30px;
  border-radius:50%;
  background:#34495e;
  float:left;
  margin-left:5px;
  margin-top:30px;
}
.o-rank h1{
  font-family:arial;
  font-weight:bold;
  color:#fff;
  font-size:18px;
  text-align:center;
  line-height:30px;
}
.o-logo{
  width:50px;
  height:50px;
  float:left;
  margin-top:20px;
  margin-left:10px;
}
.o-logo img{
  width:100%;
  height:100%;
}
.o-title{
  width:150px;
  height:100%;
  float:left;
  margin-left:10px;
}
.o-title h1{
  font-family:arial;
  font-weight:bold;
  color:#fff;
  font-size:18px;
  text-align:left;
  line-height:90px;
  text-transform:uppercase;
}
.o-text{
  width:300px;
  height:100%;
  float:left;
  margin-left:5px;
  padding-top:20px;
}
.o-text p{
  font-family:arial;
  font-weight:normal;
  color:#fff;
  font-size:16px;
  text-align:left;
}
.o-button{
  width:60px;
  height:40px;
  background:#34495e;
  float:right;
  margin-top:25px;
  text-align:center;
}
.o-button a{
  font-family:arial;
  font-weight:bold;
  color:#fff;
  font-size:24px;
  text-decoration:none;
  line-height:40px;
}
.pictures{
  width:100%;
  height:100%;
  z-index:10;
}
#pic-1, #pic-2, #pic-3, #pic-4, #pic-5{
	width:100%;
	height:100%;
}

.pic img{
width:100%;
height:100%;
}
.p-hov{
	position:relative;
	width:100%;
	height:100%;
	background:#000;
	z-index:999;
}
#pic-h-1, #pic-h-2, #pic-h-3, #pic-h-4, #pic-h-5{
	width:100%;
	height:100%;
	visibility:hidden;
	position:absolute
}

.pic-h img{
width:100%;
height:100%;
}

/* Responsive */
@media only screen
and (max-width : 800px) {
  .slider{
    height:220px;
  }
  .option{
    width:300px;
  }
  .o-rank{
    width:15px;
    height:15px;
    float:left;
    margin-top:10px;
    margin-left:4px;
  }
  .o-rank h1{
    font-size:10px;
    line-height:15px;
  }
  .o-logo{
    width:20px;
    height:20px;
    float:left;
    margin-top:7.5px;
    margin-left:6px;
  }
  .o-title{
    width:70px;
    height:100%;
    float:left;
    margin-left:10px;
  }
  .o-title h1{
    font-family:arial;
    font-weight:bold;
    color:#fff;
    font-size:8px;
    text-align:left;
    line-height:40px;
    text-transform:uppercase;
  }
  .o-text{
    width:135px;
    height:100%;
    float:left;
    margin-left:0px;
    padding-top:5px;
  }
  .o-text p{
    font-family:arial;
    font-weight:normal;
    color:#fff;
    font-size:8px;
    text-align:left;
  }
  .o-button{
    width:30px;
    height:15px;
    background:#34495e;
    float:right;
    margin-top:10px;
    text-align:center;
  }
  .o-button a{
    font-family:arial;
    font-weight:bold;
    color:#fff;
    font-size:10px;
    text-decoration:none;
    position:relative;
    top:-12px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="slider">
    <!-- Slide 1 -->
    <div class="slide">
        <div class="options">
            <div class="option" id="ref_1">
                <div class="o-rank">
                    <h1> 1 </h1>
                </div>
                <div class="o-logo">
                    <img src="http://www.pazarlamasyon.com/wp-content/uploads/2014/05/BMW_logo.png">
                    </div>
                    <div class="o-title">
                        <h1>Lorem ipsum </h1>
                    </div>
                    <div class="o-text">
                        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. </p>
                    </div>
                    <div class="o-button">
                        <a href="#"> > </a>
                    </div>
                </div>
                <div class="option" id="ref_2">
                    <div class="o-rank">
                        <h1> 2 </h1>
                    </div>
                    <div class="o-logo">
                        <img src="http://www.pazarlamasyon.com/wp-content/uploads/2014/05/BMW_logo.png">
                        </div>
                        <div class="o-title">
                            <h1>Lorem ipsum </h1>
                        </div>
                        <div class="o-text">
                            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. </p>
                        </div>
                        <div class="o-button">
                            <a href="#"> > </a>
                        </div>
                    </div>
                    <div class="option" id="ref_3">
                        <div class="o-rank">
                            <h1> 3 </h1>
                        </div>
                        <div class="o-logo">
                            <img src="http://www.pazarlamasyon.com/wp-content/uploads/2014/05/BMW_logo.png">
                            </div>
                            <div class="o-title">
                                <h1>Lorem ipsum </h1>
                            </div>
                            <div class="o-text">
                                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. </p>
                            </div>
                            <div class="o-button">
                                <a href="#"> > </a>
                            </div>
                        </div>
                        <div class="option"  id="ref_4">
                            <div class="o-rank">
                                <h1> 4 </h1>
                            </div>
                            <div class="o-logo">
                                <img src="http://www.pazarlamasyon.com/wp-content/uploads/2014/05/BMW_logo.png">
                                </div>
                                <div class="o-title">
                                    <h1>Lorem ipsum </h1>
                                </div>
                                <div class="o-text">
                                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. </p>
                                </div>
                                <div class="o-button">
                                    <a href="#"> > </a>
                                </div>
                            </div>
                            <div class="option"  id="ref_5">
                                <div class="o-rank">
                                    <h1> 5 </h1>
                                </div>
                                <div class="o-logo">
                                    <img src="http://www.pazarlamasyon.com/wp-content/uploads/2014/05/BMW_logo.png">
                                    </div>
                                    <div class="o-title">
                                        <h1>Lorem ipsum </h1>
                                    </div>
                                    <div class="o-text">
                                        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. </p>
                                    </div>
                                    <div class="o-button">
                                        <a href="#"> > </a>
                                    </div>
                                </div>
                            </div>
                            <div class="pictures">
                                <div class="pic" id="pic-1">
                                    <img src="http://inourvillage.net/wp-content/uploads/2013/06/placeholder4-1024x768.png" id="tes-1" class="tes" >
                                    </div>
                                    <div class="pic" id="pic-2">
                                        <img src="http://trustedfinance.co.uk/wp-content/uploads/2014/05/placeholder-red.png" id="tes-2"  class="tes">
                                        </div>
                                        <div class="pic" id="pic-3">
                                            <img src="http://trustedfinance.co.uk/wp-content/uploads/2014/05/placeholder-green.png" id="tes-3"  class="tes">
                                            </div>
                                            <div class="pic" id="pic-4">
                                                <img src="http://placehold.it/1280x768.png/222/fff&text=placeholder" id="tes-4"  class="tes">
                                                </div>
                                                <div class="pic" id="pic-5">
                                                    <img src="http://duinccyv5gl5b.cloudfront.net/uploads/2012/04/slide-placeholder-31.png" id="tes-5"  class="tes">
                                                    </div>
                                                </div>
                                            </div>				
                                        </div>

Answer 2

您的滑块与您编码的内容相同。如果您希望它只消失一次，请将onmouseover="show1();"更改为onmouseenter="show1();"。

jQuery滑块导航问题

2 个答案: