實現多個li或者div輪播
1.css 這個css只是兩個大div的css是主要的 裏面的排版的css可以自己排
#img {
list-style: none;
border: 0;
padding: 0px;
margin: 0px;
/*background: #cececd;*/
padding-bottom: 10px;
clear: both;
width: 2400px;
height: 600px;
}
#div1{
overflow: hidden;
cursor: pointer;
margin-top: 50px;
width: 1200px;
height: 600px;
}
2.html
<div class="management">
<div class="container">
<div class="row">
<div class="col-sm-12 new_title">專家團隊</div>
<div class="col-sm-12 new_titleEn">EXPERT TEAM</div>
<div class="col-sm-12 new_img">
<img src="../img/listImg2.png" width="100%" />
</div>
<div id="div1" onmouseover="stop()" onmouseout="ss()">
<div id="img" style="clear:both;">
<div class="col-sm-4 man_list" style="width: 362px; height: 500px;">
<div class="man_img">
<img src="../img/zhuan/1.png" width="100%">
</div>
<div class="man_info">
<p class="man_nameEn">Ryan Yang</p>
<div class="man_space"></div><br>
<!-- <p class="man_name">吳時燕</p> -->
<p class="man_position">上海華昂商務有限公司總經理</p>
<div class="man_hover">
<p class="man_nameEn">Ryan Yang</p>
<div class="man_space"></div><br>
<p class="man_position">上海華昂商務有限公司總經理</p>
</div>
</div>
</div>
<div class="col-sm-4 man_list" style="width: 362px; height: 500px;">
<div class="man_img">
<img src="../img/zhuan/2.png" width="100%">
</div>
<div class="man_info">
<p class="man_nameEn">李自強</p>
<div class="man_space"></div><br>
<p class="man_position">前百事/康師傅大中華區首席市場執行官</p>
<div class="man_hover">
<p class="man_nameEn">李自強</p>
<div class="man_space"></div><br>
<p class="man_position">前百事/康師傅大中華區首席市場執行官</p>
</div>
</div>
</div>
<div class="col-sm-4 man_list" style="width: 362px; height: 500px;">
<div class="man_img">
<img src="../img/zhuan/3.png" width="100%">
</div>
<div class="man_info">
<p class="man_nameEn">Jay Ren</p>
<div class="man_space"></div><br>
<p class="man_position">嘉吉項目管理與創新總監</p>
<div class="man_hover">
<p class="man_nameEn">Jay Ren</p>
<div class="man_space"></div><br>
<p class="man_position">嘉吉項目管理與創新總監</p>
</div>
</div>
</div>
<div class="col-sm-4 man_list" style="width: 362px; height: 500px;">
<div class="man_img">
<img src="../img/zhuan/3.png" width="100%">
</div>
<div class="man_info">
<p class="man_nameEn">Irene Zeng</p>
<div class="man_space"></div><br>
<p class="man_position">電商副總裁 寶潔</p>
<div class="man_hover">
<p class="man_nameEn">Jay Ren</p>
<div class="man_space"></div><br>
<p class="man_position">電商副總裁 寶潔</p>
</div>
</div>
</div>
<div class="col-sm-4 man_list" style="width: 362px; height: 500px;">
<div class="man_img">
<img src="../img/zhuan/3.png" width="100%">
</div>
<div class="man_info">
<p class="man_nameEn">王戈鈞 </p>
<div class="man_space"></div><br>
<p class="man_position">前高級副總裁 百果園</p>
<div class="man_hover">
<p class="man_nameEn">Jay Ren</p>
<div class="man_space"></div><br>
<p class="man_position">前高級副總裁 百果園</p>
</div>
</div>
</div>
<div class="col-sm-4 man_list" style="width: 362px; height: 500px;">
<div class="man_img">
<img src="../img/zhuan/3.png" width="100%">
</div>
<div class="man_info">
<p class="man_nameEn">吳夢</p>
<div class="man_space"></div><br>
<p class="man_position">零售總裁 伽藍</p>
<div class="man_hover">
<p class="man_nameEn">Jay Ren</p>
<div class="man_space"></div><br>
<p class="man_position">零售總裁 伽藍</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
3.js
<script language="javascript">
var w, h, id, speed, Html
w = 1200;//-------滾動容器的寬度--------//
h = 600;//-------滾動容器的高度--------//
id = "div1";//-------滾動容器的id--------//
direction = "left";//-------滾動方向有四個值left，right，up，down，自己試試--------//
speed = "100";//-------滾動速度100相當於1秒，越小越快--------//
imgDiv = "img";//-------放圖片的容器id--------//
HtmlL = document.getElementById(imgDiv).innerHTML;
HtmlT = document.getElementById(id).innerHTML;
switch (direction) {
case "left":
document.getElementById(imgDiv).innerHTML = HtmlL ;
break;
}
function ss() {
document.getElementById(id).style.width = w;
document.getElementById(id).style.height = h;
document.getElementById(imgDiv).style.width = w * 2;
document.getElementById(imgDiv).style.height = h;
var ele
ele = document.getElementById("div1");
switch (direction) {
case "left":
ele.scrollLeft = ele.scrollLeft + 5;
if (ele.scrollLeft >= w) {
ele.scrollLeft = 0;
}
break;
}
t = setTimeout("ss()", speed);
}
function stop() {
document.getElementById("div1").scrollLeft = document.getElementById("div1").scrollLeft;
document.getElementById("div1").scrollTop = document.getElementById("div1").scrollTop;
clearTimeout(t);
}
setTimeout("ss()", 100);
</script>
這個是多個div輪播 ， 要是需要多個li輪播的話 ，在js裏面找到相對應的代碼 ，改一下就好了