Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
test [2019/05/08 06:12]
eleksmaker
test [2019/05/08 06:13] (current)
eleksmaker
Line 1: Line 1:
-<​html ​lang="​en"​>+<​html>​
 <​head>​ <​head>​
- <meta charset="​UTF-8">​ +  <​title>​ 飛天网事--纯CSS代码实现图片轮播 </​title>​ 
- <link rel="​shortcut icon" href="img/title.jpg" type="​image/png">​ +  ​<meta charset="​utf-8" /> 
- <title>​jsan版轮播图<​/title+  <meta name="​description"​ content="​飛天网事,WEB前端开发,纯css3代码图片轮播,HTML5+CSS3精彩案例"​ /> 
- <style type="​text/​css">​ +  <meta name="​keywords"​ content="​飛天网事,WEB前端开发,HTML5,CSS3,jQuery,"​ /> 
- *{ +<meta name="​author"​ content="​R.tian @eduppp.cn 2015">​ 
- padding0+<link rel="​shortcut icon" ​ href="http://eduppp.cn/images/​logo4.gif" ​/
- margin:0; +<link rel="​apple-touch-icon"​ href="​http://​eduppp.cn/​images/​logo.gif" ​/> 
- +  <style type="​text/​css">​ 
- .show_div+#frame {/*----------图片轮播相框容器----------*/​ 
- width: ​400px+position: absolute; /​*--绝对定位,方便子元素的定位*/​ 
- height: ​400px+width: 300px; 
- border2px solid black+height: 200px; 
- overflowhidden+overflow: hidden;/​*--相框作用,只显示一个图片---*/​ 
- margin0 auto+border-radius:​5px;​ 
- +
- .scroll_div+#dis {/​*--绝对定位方便li图片简介的自动分布定位---*/​ 
- height: ​400px+positionabsolute
- position: ​relative+left: -50px; 
- +top: -10px; 
- .scroll_div div+opacity: 0.5
- width400px+
- height400px+#dis li 
- background-colorcyan+display: inline-block;​ 
- float: left; +width: ​200px
- +height: ​20px
- .scroll_div p+margin0 50px
- width400px+floatleft
- height30px+text-aligncenter; 
- positionabsolute+color: #fff; 
- bottom0+border-radius:​ 10px; 
- background-colorblack+background: #000
- opacity0.7+
- font-size20px+#photos img 
- color: ​white+float: left; 
- text-align: center; +width:​300px;​ 
- +height:200px
- .scroll_div img+
- width400px+#photos {/​*---设置总的图片宽度--通过位移来达到轮播效果----*/​ 
- height400px+position: ​absolute;z-index:​9px;​ 
- float: left; +width: calc(300px * 5);/​*---修改图片数量的话需要修改下面的动画参数*/​ 
- +
- </​style>​+.play
 +animationma 20s ease-out infinite alternate;/**/ 
 +
 +@keyframes ma {/​*---每图片切换有两个阶段:位移切换和静置。中间的效果可以任意定制----*/​ 
 +0%,20% { margin-left0px; } 
 +25%,40% { margin-left-300px; } 
 +45%,60% { margin-left-600px; } 
 +65%,80% { margin-left: -900px;
 +85%,100% { margin-left:​ -1200px; } 
 +
 +.num
 +position:absolute;​z-index:​10
 +display:inline-block
 +right:10px;​top:​165px
 +border-radius:100%
 +background:#f00
 +width:25px;​height:​25px
 +line-height:25px; 
 +cursor:​pointer
 +color:#fff
 +text-align:​center;​ 
 +opacity:​0.8;​ 
 +
 +.num:hover{background:#​00f;​} 
 +.num:hover,#​photos:​hover{animation-play-state:​paused;} 
 +.num:nth-child(2){margin-right:​30px} 
 +.num:​nth-child(3){margin-right:​60px} 
 +.num:​nth-child(4){margin-right:​90px} 
 +.num:​nth-child(5){margin-right:​120px} 
 +#a1:hover ~ #​photos{animation:​ ma1 .5s ease-out forwards;} 
 +#a2:hover ~ #​photos{animation:​ ma2 .5s ease-out forwards;​} 
 +#a3:hover ~ #​photos{animation:​ ma3 .5s ease-out forwards;​} 
 +#a4:hover ~ #​photos{animation:​ ma4 .5s ease-out forwards;​} 
 +#a5:hover ~ #photos {animation: ma5 .5s ease-out forwards;​} 
 +@keyframes ma1 {0%{margin-left:-1200px;}100%{margin-left:​-0px;​} } 
 +@keyframes ma2 {0%{margin-left:​-1200px;​}100%{margin-left:​-300px;​} } 
 +@keyframes ma3 {100%{margin-left:​-600px;​} } 
 +@keyframes ma4 {100%{margin-left:​-900px;​} } 
 +@keyframes ma5 {100%{margin-left:​-1200px;​}
 +  </​style>​
 </​head>​ </​head>​
 <​body>​ <​body>​
- <div class="​show_div">​ +<​div ​id="​frame"​ > 
- <div class="​scroll_div"></​div>​ +<a id="​a1" ​class="​num">​1</​a>​ 
- </​div>​+<a id="​a2"​ class="​num">​2</​a>​ 
 +<a id="​a3"​ class="​num">​3</​a>​ 
 +<a id="​a4"​ class="​num">​4</​a>​ 
 +<a id="​a5"​ class="​num">​5</​a
 +<​div ​id="​photos" ​class="​play"> 
 +  <img src="​http://​elekswiki.oss-ap-southeast-1.aliyuncs.com/​AD/​A3.jpg"​ > 
 +  <img src="​http://​eduppp.cn/​images/​0/​3.jpg"​ > 
 +  <img src="​http://​eduppp.cn/​images/​0/​4.jpg"​ > 
 +  <img src="​http://​eduppp.cn/​images/​0/​5.jpg"​ > 
 +  <img src="​http://​eduppp.cn/​images/​0/​2.jpg"​ > 
 +  <ul id="​dis">​ 
 +<​li>​中国标志性建筑:天安门</​li>​ 
 +<​li>​中国标志性建筑:东方明珠</​li>​ 
 +<​li>​中国标志性建筑:布达拉宫</​li>​ 
 +<​li>​中国标志性建筑:长城</​li>​ 
 +<​li>​中国标志性建筑:天坛</​li>​ 
 +  </​ul>​ 
 +</​div>​ 
 +</​div>​
 </​body>​ </​body>​
-<script type="​text/​javascript">​ 
- var showDiv = document.getElementsByClassName("​show_div"​);​ 
- var scrollDiv = document.getElementsByClassName("​scroll_div"​)[0];​ 
- /*数组*/ 
- var data = [{url:"​img/​z3.jpg",​title:'​张杰1'​},​{url:"​img/​z4.jpg",​title:"​张杰2"​},​ 
- {url:"​img/​z5.jpg",​title:"​张杰3"​},​{url:"​img/​z6.jpg",​title:"​张杰4"​}];​ 
- scrollDiv.style.width = 400 * (data.length+1)+"​px";​ 
- for (var i = 0; i < data.length;​ i++) { 
- /​*创建div,并放进父级元素下面*/​ 
- var myDiv = document.createElement('​div'​);​ 
- scrollDiv.appendChild(myDiv);​ 
- myDiv.innerHTML = '<​p>'​+data[i].title+'</​p>'​+'<​img src = "'​+data[i].url+'">';​ 
- } 
- /​*轮播图代码 和第一种代码原理相同,*/​ 
- var left = 0; 
- setInterval(function(){ 
- move(); 
- },5000); 
- function move(){ 
- var timer = setInterval(function(){ 
- left -- ; 
- if (left % -400 == 0) { 
- clearInterval(timer);​ 
- } 
- if (left == -1200) { 
- left = 0; 
- } 
- scrollDiv.style.marginLeft = left +"​px";​ 
- },10); 
- } 
-</​script>​ 
 </​html>​ </​html>​
- 
---------------------- ​ 
-作者:Darling-zxf ​ 
-来源:CSDN ​ 
-原文:https://​blog.csdn.net/​zxfjnfjcn/​article/​details/​77853903 ​ 
-版权声明:本文为博主原创文章,转载请附上博文链接! 
  • Show page