如何解决纯 CSS 滑块单选按钮先点击无动画
我需要你的帮助来制作一个几乎完全是 css 的滑块。 当我第一次点击一个单选按钮时，没有动画完成......在第二次点击它没问题。我不知道是 javascript 还是 css。 你能帮我解决这个错误吗？
https://jsfiddle.net/italya/prbtna3o/
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<Meta http-equiv="content-type" content="text/html; charset=utf-8" />
<Meta name="viewport" content="width=device-width,initial-scale=1">
<Meta name="description" content="TEST created with cssSlider,a free wizard program that helps you easily generate beautiful web slideshow" />
</head>
<body style="background-color:#d7d7d7; margin: auto; text-align: center;">
<!-- Start cssSlider.com -->
<!-- Generated by cssSlider.com 2.1 -->
<link rel="stylesheet" href="cssslider5_files/csss_engine1/style.css">
<!--[if IE]><link rel="stylesheet" href="cssslider5_files/csss_engine1/ie.css"><![endif]-->
<!--[if lte IE 9]><script type="text/javascript" src="cssslider5_files/csss_engine1/ie.js"></script><![endif]-->
<script type="text/javascript" src="cssslider5_files/csss_engine1/gestures.js"></script> <div class='csslider1 autoplay '>
<input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide' >
<input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide' >
<input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide' >
<input name="cs_anchor1" id='cs_slide1_3' type="radio" class='cs_anchor slide' >
<input name="cs_anchor1" id='cs_play1' type="radio" class='cs_anchor' checked>
<input name="cs_anchor1" id='cs_pause1_0' type="radio" class='cs_anchor pause'>
<input name="cs_anchor1" id='cs_pause1_1' type="radio" class='cs_anchor pause'>
<input name="cs_anchor1" id='cs_pause1_2' type="radio" class='cs_anchor pause'>
<input name="cs_anchor1" id='cs_pause1_3' type="radio" class='cs_anchor pause'>
<ul>
<li class="cs_skeleton"><img src="https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg" style="width: 100%;"></li>
<li class='num0 img slide'> <img src='https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg' alt='SLIDE1' title='SLIDE1' /></li>
<li class='num1 img slide'> <img src='https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg' alt='SLIDE2' title='SLIDE2' /></li>
<li class='num2 img slide'> <img src='https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg' alt='SLIDE3' title='SLIDE3' /></li>
<li class='num3 img slide'> <img src='https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg' alt='SLIDE4' title='SLIDE4' /></li>
</ul><div class="cs_engine"><a href="http://cssslider.com">slider</a> by cssSlider.com v2.1</div>
<div class='cs_description'>
<label class='num0'><span class="cs_title"><span class="cs_wrapper">SLIDE1</span></span></label>
<label class='num1'><span class="cs_title"><span class="cs_wrapper">SLIDE2</span></span></label>
<label class='num2'><span class="cs_title"><span class="cs_wrapper">SLIDE3</span></span></label>
<label class='num3'><span class="cs_title"><span class="cs_wrapper">SLIDE4</span></span></label>
</div>
<div class='cs_bullets'>
<label class='num0' for='cs_slide1_0'> <span class='cs_point'></span>
<span class='cs_thumb'><img src='cssslider5_files/csss_tooltips1/slide1.jpg' alt='SLIDE1' title='SLIDE1' /></span></label>
<label class='num1' for='cs_slide1_1'> <span class='cs_point'></span>
<span class='cs_thumb'><img src='cssslider5_files/csss_tooltips1/slide2.jpg' alt='SLIDE2' title='SLIDE2' /></span></label>
<label class='num2' for='cs_slide1_2'> <span class='cs_point'></span>
<span class='cs_thumb'><img src='cssslider5_files/csss_tooltips1/slide3.jpg' alt='SLIDE3' title='SLIDE3' /></span></label>
<label class='num3' for='cs_slide1_3'> <span class='cs_point'></span>
<span class='cs_thumb'><img src='cssslider5_files/csss_tooltips1/slide4.jpg' alt='SLIDE4' title='SLIDE4' /></span></label>
</div>
</div>
<!-- End cssSlider.com -->
</body>
</html>
非常感谢
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
