jQuery实现轮播图 代码 自动切换
- 根据自己需要,修改css容器宽高即可。
<style type="text/css">
.boxs{width: 650px;height: 384px;overflow: hidden;position: relative; margin-top:-5px; }
.boxs-1 ul{}
.boxs-1 ul li{width: 650px;height: 384px;position: relative;overflow: hidden;}
.boxs-1 ul li a img{display:block;width: 650px; height: 384px;}
.boxs-1 ul li h2 a{position: absolute;left: 0;bottom: 0;height: 40px;width:400px;background: rgba(125,125,120,.8);text-indent: 2em;
padding-right:500px ;line-height: 40px;text-overflow: ellipsis;overflow: hidden;
white-space: nowrap;font-weight: normal;color: black; font-size: 12px; font-weight: bold;
}
.boxs-2{position: absolute;right: 10px;bottom: 14px;}
.boxs-2 ul li{float:left;width: 12px;height: 12px;overflow: hidden; margin: 0 5px; border-radius: 50%;
background: rgba(0,0,0,0.5);text-indent: 100px;cursor: pointer;}
.boxs-2 ul .on{background: rgba(255,255,255,0.6);}
.boxs-3 span{position: absolute;color: white;background: rgba(125,125,120,.3);width: 50px;height: 80px;
top:50%; font-family: "宋体";line-height: 80px;font-size:60px;margin-top: -40px;
text-align: center;cursor: pointer;}
.boxs-3 .prev{left: 10px;}
.boxs-3 .next{right: 10px;}
.boxs-3 span::selection{background: transparent;}
.boxs-3 span:hover{background: rgba(125,125,120,.8);}
</style>
- html结构
<div class="boxs">
<div class="boxs-1">
<ul>
<li> <a href="#" target="_blank"><img src="" ></img></a>
<h2><a href="#" target="_blank">1111111</a></h2>
</li>
<li> <a href="#" target="_blank"><img src="" ></img></a>
<h2><a href="#" target="_blank">1111111</a></h2>
</li>
<li> <a href="#" target="_blank"><img src="" ></img></a>
<h2><a href="#" target="_blank">1111111</a></h2>
</li>
</ul>
</div>
<div class="boxs-2">
<ul>
</ul>
</div>
<div class="boxs-3"> </div>
</div>
</div>
- jquery 实现轮播
<script type="text/javascript">
window.onload = function(){
function $(param){
if(arguments[1] == true){
return document.querySelectorAll(param);
}else{
return document.querySelector(param);
}
}
var $box = $(".boxs");
var $box1 = $(".boxs-1 ul li",true);
var $box2 = $(".boxs-2 ul");
var $box3 = $(".boxs-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,4500);
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,4500);
}
}
for(var p=0;p<$box3.children.length;p++){
$box3.children[p].onmouseover = function(){
clearInterval(timer);
};
$box3.children[p].onmouseout = function(){
timer = setInterval(go,4500);
}
}
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,4500);
}
}
}
</script>
最后因为是用jquery书写的代码,还要导入 <script src="jquery-2.2.3.js"></script>
希望对大家 有所帮助。