輪播圖帶廣告詞條隨圖片滾動
阿新 • • 發佈：2020-07-18
css樣式：
<style>
* {
padding: 0;
margin: 0;
font-family: "微軟雅黑";
font-size: 14px;}
ul,li {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.box{
width: 240px;
height: 350px;
margin: 20px auto;
overflow: hidden;
position: relative;
}
.box
html內容：
<body>
<div class="box">
<div class="box-1">
<ul>
<li>
<img src="images/1.jpg" alt="這裡是第一場圖片"></img>
<h2>好浪漫！獅子獵豹蹲坐"彩虹盡頭"</h2>
</li>
<li>
<img src="images/2.jpg" alt="這裡是第二張圖片"></img>
<h2>劉煒宣佈退役 回顧傳奇"8號"</h2>
</li>
<li>
<img src="images/3.jpg" alt="這裡是第三張圖片"></img>
<h2>疑似吳亦凡女友生活照模樣清純</h2>
</li>
<li>
<img src="images/4.jpg" alt="這裡是第一場圖片"></img>
<h2>不做韭菜，葉女俠帶你修煉</h2>
</li>
<li>
<img src="images/5.jpg" alt="這裡是第一場圖片"></img>
<h2>007新武器阿斯頓·馬丁Valhalla</h2>
</li>
<li>
<img src="images/6.jpg" alt="這裡是第一場圖片"></img>
<h2>靠網紅髮卡凹出少女感</h2>
</li>
<li>
<img src="images/7.jpg" alt="這裡是第一場圖片"></img>
<h2>河北饒陽："民族樂器進校園"</h2>
</li>
</ul>
</div>
<div class="box-2">
<ul>
</ul>
</div>
<div class="box-3">
<span class="prev"> < </span>
<span class="next"> > </span>
</div>
</div>
</body>
js內容：
<script type="text/javascript"> window.onload = function(){ function $(param){ if(arguments[1] == true){ return document.querySelectorAll(param); }else{ return document.querySelector(param); } } var $box = $(".box"); var $box1 = $(".box-1 ul li",true); var $box2 = $(".box-2 ul"); var $box3 = $(".box-3"); var $length = $box1.length; var str = ""; for(var i =0;i<$length;i++){ if(i==0){ str +="<li class='on'>"+(i+1)+"</li>"; }else{ str += "<li>"+(i+1)+"</li>"; } } $box2.innerHTML = str; var current = 0; var timer; timer = setInterval(go,1000); function go(){ for(var j =0;j<$length;j++){ $box1[j].style.display = "none"; $box2.children[j].className = ""; } if($length == current){ current = 0; } $box1[current].style.display = "block"; $box2.children[current].className = "on"; current++; } for(var k=0;k<$length;k++){ $box1[k].onmouseover = function(){ clearInterval(timer); } $box1[k].onmouseout = function(){ timer = setInterval(go,1000); } } for(var p=0;p<$box3.children.length;p++){ $box3.children[p].onmouseover = function(){ clearInterval(timer); }; $box3.children[p].onmouseout = function(){ timer = setInterval(go,1000); } } for(var u =0;u<$length;u++){ $box2.children[u].index = u; $box2.children[u].onmouseover = function(){ clearInterval(timer); for(var j=0;j<$length;j++){ $box1[j].style.display = "none"; $box2.children[j].className = ""; } this.className = "on"; $box1[this.index].style.display = "block"; current = this.index +1; } $box2.children[u].onmouseout = function(){ timer = setInterval(go,1000); } } $box3.children[0].onclick = function(){ back(); } $box3.children[1].onclick = function(){ go(); } function back(){ for(var j =0;j<$length;j++){ $box1[j].style.display = "none"; $box2.children[j].className = ""; } if(current == 0){ current = $length; } $box1[current-1].style.display = "block"; $box2.children[current-1].className = "on"; current--; } } </script>
輪播圖效果：