<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
*{
margin: 0;
padding: 0;
}
#banner{
position: relative;
400px;
height:300px;
}
#show{
400px;
height:300px;
border:2px solid #f00;
overflow:hidden;
}
#con{
1600px;
height:300px;
}
img{
400px;
height:300px;
}
#btn{
list-style-type:none;
position:absolute;
left:50%;
top:270px;
}
#btn li{
float:left;
15px;
height:15px;
font-size:12px;
text-align:center;
background:#fff;
border-radius:50%;
margin-left:5px;
cursor: pointer;
}
#btn .bg{
background:#000;
color:#fff;
}
.eds-page-ioc{
display: inline-block;
position: absolute;
top: 115px;
46px;
height: 70px;
cursor: pointer;
}
.eds-prev{
left: 0;
background: url(focus_btn.png) no-repeat 0 -70px;
}
.eds-next{
right: 0;
background: url(focus_btn.png) no-repeat -46px -70px;
}
.eds-prev:hover{
background: url(focus_btn.png) no-repeat 0 0;
}
.eds-next:hover{
background: url(focus_btn.png) no-repeat -46px 0;
}
</style>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="banner">
<div id="show">
<div id="con"><img src="c1.jpg" name="0"><img src="c2.jpg" name="1"><img src="c3.jpg" name="2"><img src="c4.jpg" name="3"><img src="c5.jpg" name="4"></div>
<ul id="btn"></ul>
<span class="eds-page-ioc eds-prev"></span>
<span class="eds-page-ioc eds-next"></span>
</div>
</div>
</body>
<script type="text/javascript">
$(function () {
$("#con").lun(1000,"bg");
})
$.fn.lun=function(stTime,btnListStyle) {
var selector = $(this);
stTime = stTime || 1000;
imageWidth = $(this).children().width();
//添加下标
for(var i = 1;i <= selector.children().length;i++){
selector.next().append("<li>"+i+"</li>")
}
selector.next().children().eq(0).attr("class", btnListStyle);
var btnListMargin=parseInt(selector.next().children().css("marginLeft").slice(0,-2));//获取下标的margin-left值
var btnWidth=(selector.next().children().width()-btnListMargin)*(selector.children().length);// 获取下标容器的宽度
selector.next().css("marginLeft","-"+btnWidth+"px");
//自动轮播
var timer;
var st = setTimeout(move, stTime);
function move() {
timer = setInterval(function () {
ss(selector);
}, 100);
}
function ss(selector) {
selector.next().children().removeClass(btnListStyle);
var i = selector.children().eq(1).attr("name");
selector.next().children().eq(i).attr("class", btnListStyle);
var os = parseInt(selector.parent().scrollLeft());
selector.parent().scrollLeft(os + 10);
if (selector.parent().scrollLeft() >= imageWidth) {
selector.append(selector.children().eq(0));
selector.parent().scrollLeft(0);
clearInterval(timer);
st = setTimeout(move, stTime);
}
}
//点击下标跳转到相应的图片
selector.next().children().click(function(){
selector.next().children().removeClass(btnListStyle);
$(this).attr("class",btnListStyle);
for(var j=0;j<selector.children().length;j++){
var f=selector.children().eq(j).attr("name");
if(f==$(this).html()-1){
for(var x=0;x<j;x++){
selector.append(selector.children().eq(0));
selector.parent().scrollLeft(0);
}
break;
}
}
})
//左切图
selector.nextAll().eq(1).click(function(){
selector.parent().scrollLeft(0);
selector.prepend(selector.children().eq(4));
var zz;
for(var i=0;i<selector.next().children().length;i++){
if(selector.next().children().eq(i).attr("class")==btnListStyle){
console.log(selector.children().length);
zz=i;
if(zz==0){
zz=selector.children().length;
}
break;
}
}
selector.next().children().removeClass(btnListStyle);
selector.next().children().eq(zz-1).attr("class",btnListStyle);
selector.parent().scrollLeft(0);
})
//右切图
selector.nextAll().eq(2).click(function(){
selector.append(selector.children().eq(0));
var zz;
for(var i=0;i<selector.next().children().length;i++){
if(selector.next().children().eq(i).attr("class")==btnListStyle){
zz=i;
if(zz==selector.children().length-1){
zz=-1;
}
break;
}
}
selector.next().children().removeClass(btnListStyle);
selector.next().children().eq(zz+1).attr("class",btnListStyle);
})
//鼠标划入停止
var zf;
selector.parents().eq(1).hover(function(){
var zz;
clearInterval(timer);
clearTimeout(st);
if(selector.parents().scrollLeft()==0){
zf=0;
}else if(selector.parents().scrollLeft()>0&&selector.parents().scrollLeft()<=200) {
zf=0;
selector.parents().scrollLeft(0);
for (var i = 0; i < selector.next().children().length; i++) {
if (selector.next().children().eq(i).attr("class") == btnListStyle) {
if (i == 0) {
zz = selector.children().length;
}
zz = i-1;
}
}
selector.next().children().removeClass(btnListStyle);
selector.next().children().eq(zz).attr("class", btnListStyle);
}else if(selector.parents().scrollLeft()>200) {
zf = 1;
selector.parents().scrollLeft(400);
for (var i = 0; i < selector.next().children().length; i++) {
if (selector.next().children().eq(i).attr("class") == btnListStyle) {
if (i == selector.children().length-1) {
zz = 0;
}
zz = i;
}
}
selector.next().children().removeClass(btnListStyle);
selector.next().children().eq(zz).attr("class", btnListStyle);
}
},function(){
if(zf==0){
st=setTimeout(move,1000);
}else if(zf==1){
move();
}
})
}
</script>
</body>
</html>