圖片輪播的JS和CSS實現
阿新 • • 發佈:2018-11-22
JS實現方法:
//實現自動輪播 function autoMove() { if (n >= (count - 1)) { n = 0; } else { ++n; } $(".body1 .adver ul li").eq(n).trigger("click"); //觸發點選事件 } function picRoll() { //為不同圖片設定不同背景色 var colors = ["#fea477", "#baddd6", "#ff7473", "#4695d6", "#8B88FF", "#6599FF"]; var index = 0; count = $(".body1 .adver a").length; var color = ""; //隱藏輪播元素的非第一個元素 $(".body1 .adver a:not(:first-child)").hide(); //設定點選按鈕輪播下一張圖片 $(".body1 .adver .glyphicon-menu-left").click(function() { if (index !== 0) { index = index - 1; } else { index = 5; } //獲取下一張圖片的索引 n = index; color = colors[n]; //設定圖片背景色 $(".part1").css({ "background": "linear-gradient(" + color + ", white, white)" }); //實現圖片切換,觸發小圓點的click事件 $(".body1 .adver a").eq(n + 1).fadeOut(); $(".body1 .adver a").eq(n).fadeIn(); $(".body1 .adver ul li").eq(n).trigger("click"); }); $(".body1 .adver .glyphicon-menu-right").click(function() { if (index !== 5) { index = index + 1; } else { index = 0; } n = index; color = colors[n]; $(".part1").css({ "background": "linear-gradient(" + color + ", white, white)" }); $(".body1 .adver a").eq(n - 1).fadeOut(); $(".body1 .adver a").eq(n).fadeIn(); $(".body1 .adver ul li").eq(n).trigger("click"); }); //設定小圓點的點選事件,點選小圓點顯示對應的圖片 $(".body1 .adver ul li").click(function() { index = $(this).text() - 1; n = index; color = colors[n]; $(".part1").css({ "background": "linear-gradient(" + color + ", white, white)" }); $(".part1").css({ "background": "linear-gradient(" + color + ", white, white)" }); $(".body1 .adver a").eq(n + 1).fadeOut(); $(".body1 .adver a").eq(n).fadeIn(); //設定當前元素的class為selected,並移除其他同胞元素的class $(this).addClass("selected"); $(this).siblings().removeClass("selected"); }); //設定自動輪播,2.5s自動切換下一張圖片 t = setInterval("autoMove()", 2500); //滑鼠懸停時取消自動輪播 $(".body1 .adver").hover(function() { clearInterval(t) }, function() { t = setInterval("autoMove()", 2500); }); }
CSS實現方法:
#wrap { position:relative; width:600px; height:400px; margin:40px auto; overflow:hidden; border:2px solid #C06C84; } #slider{ width:300%; height:100%; text-align: center; line-height:400px; font-size:100px; color:#fff; margin-left:0; -webkit-animation:slide1 5s ease-out infinite; } #slider li{ float:left; width: 600px; height: 100%; } #slider li img { width: 600px; height: 400px; } @-webkit-keyframes slide1 { 0% { margin-left:0; } 23% { margin-left:0; } 33% { margin-left:-600px; } 56% { margin-left:-600px; } 66% { margin-left:-1200px; } 90% { margin-left:-1200px; } 100% { margin-left:0; } } @-webkit-keyframes slide2 { 0% { margin-left:-600px;} 23% { margin-left:-600px;} 33% { margin-left:-1200px;} 56% { margin-left:-1200px;} 66% { margin-left:0;} 90% { margin-left:0;} 100% {margin-left:-600px;} } @-webkit-keyframes slide3 { 0% { margin-left:-1200px;} 23% { margin-left:-1200px;} 33% { margin-left:0;} 56% { margin-left:0;} 66% { margin-left:-600px;} 90% { margin-left:-600px;} 100% {margin-left:-1200px;} } #pic1:checked ~ #wrap #slider { -webkit-animation-name:slide1; } #pic2:checked ~ #wrap #slider { -webkit-animation-name:slide2; } #pic3:checked ~ #wrap #slider { -webkit-animation-name:slide3; } #opts { width:600px; height: 40px; margin:auto; color:#fff; line-height:40px; text-align: center; font-size: 20px; } #opts label{ float: left; width: 100px; height: 40px; margin-right: 4px; background: #C40018; cursor: pointer; } #opts label:hover { background: #FF8F56; } #pic1,#pic2,#pic3 { display: none; }
相應HTML程式碼:
<input type="radio" checked name="slider" id="pic1"> <input type="radio" name="slider" id="pic2"> <input type="radio" name="slider" id="pic3"> <div id="wrap"> <ul id="slider"> <li><img src="http://m.qpic.cn/psb?/V10EMU1N4P7Kzd/HTGrAsL9ctWHGDfALQP4i01ZZ5sB.3z2ijL9yXeAAuE!/b/dF4BAAAAAAAA&bo=igKWAQAAAAARFz8!&rf=viewer_4"></li> <li><img src="http://m.qpic.cn/psb?/V10EMU1N4P7Kzd/kBkk68JehgyQEcYBtP0UDxAbI6yxdXaOZ*0i3mrj2Fw!/b/dFcBAAAAAAAA&bo=eAJdAQAAAAARFwY!&rf=viewer_4"></li> <li><img src="http://m.qpic.cn/psb?/V10EMU1N4P7Kzd/4G6lkYI2K5nczkeEHldv23qz3*BZEPotvVkpZ4gULl8!/b/dPIAAAAAAAAA&bo=igJrAQAAAAARF8I!&rf=viewer_4"></li> </ul> </div> <div id="opts"> <label for="pic1">1</label> <label for="pic2">2</label> <label for="pic3">3</label> </div>