<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
.main{
width: 500px;
height: 300px;
margin:150px auto;
position: relative;
overflow: hidden;
cursor: pointer;
border:1px solid red;
}
.main_content{
width: 700%;
height: 100%;
position: absolute;
border:1px solid black;
list-style: none;
}
.main_content li{
width: 500px;
height: 300px;
float: left;
}
.main_content img{
width: 100%;
height: 100%;
}
.direction .left,.direction .right{
width: 40px;
height: 80px;
background: #D84C29;
opacity: 0.5;
transform:translateY(-50%);
position: absolute;
top: 50%;
font-family:"宋体";
font-size:52px;
color:#fff;
line-height:80px;
text-align:center;
}
.direction .left {
left:0px;
}
.direction .right {
right:0px;
}
.main .direction{
display: none;
}
.main:hover .direction {
display:block;
cursor:pointer;
}
.circle_main{
list-style:none;
width:200px;
height:20px;
background:#D84C29;
position:absolute;
bottom:9px;
left:50%;
transform:translateX(-50%);
border-radius: 10px;
}
.circle_main li{
width:10px;
height:10px;
background:#fff;
border-radius:50%;
float:left;
margin-left:21px;
margin-top:5px;
cursor:pointer;
opacity:0.5;
}
.circle_main .select {
background:aqua;
}
</style>
</head>
<body>
<div class="main">
<ul class="main_content">
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547786536574&di=f567353abb9bae01c65f0de3dbce5bea&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2F20170714%2F622a-fyiavtv6723891.jpg"></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547786588976&di=9d9bb284388f254107ec2784ccb147fd&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn01%2F193%2Fw639h354%2F20181102%2F3842-hnfikve5424509.jpg"></li>
<li><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3938858625,2655912024&fm=26&gp=0.jpg"></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548381430&di=2c95e1def19b0ef94201357175b1b0a0&imgtype=jpg&er=1&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2F20170721%2F3267-fyiiahy4409650.png"></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547786833008&di=5a22beaa3af0a3d7c9c95531b036f445&imgtype=0&src=http%3A%2F%2Fimg.cwq.com%2F201707%2F1500357480744890.jpeg"></li>
<li><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1743183788,1932475287&fm=26&gp=0.jpg"></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547786536574&di=f567353abb9bae01c65f0de3dbce5bea&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2F20170714%2F622a-fyiavtv6723891.jpg"></li>
</ul>
<div class="direction">
<span class="left"><</span>
<span class="right">></span>
</div>
<ol class="circle_main">
<li class="select"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
function circle_move(circle,main_content,left,right,main){
console.info()
//点击小圆圈让图片移动
$(circle).each(function(index,value){
$(circle).eq(index).on("click",function(){
$(this).addClass("select").siblings().removeClass("select");
$(main_content).stop().animate({"left":-index*width});
current_index=index;
})
})
//点击右按钮
right.on("click",function(){
// console.info("进入这个")
if(current_index>=6){
current_index=0;
$(main_content).css("left",0);
}
current_index++;
$(main_content).stop().animate({"left":-current_index*width});
if(current_index==6){
$(circle).eq(0).addClass("select").siblings().removeClass("select");
}else{
// console.info(current_index)
$(circle).eq(current_index).addClass("select").siblings().removeClass("select");
}
})
//点击左按钮
left.on("click",function(){
if(current_index<=0){
current_index=6;
$(main_content).css("left",-current_index*width);
}
current_index--;
$(main_content).stop().animate({"left":-current_index*width});
if(current_index==6){
$(circle).eq(0).addClass("select").siblings().removeClass("select");
}else{
$(circle).eq(current_index).addClass("select").siblings().removeClass("select");
}
})
//定时器
var timer = setInterval(function() {
$(right).click();
}, 2000);
console.info($(main));
//鼠标移入停止定时器
$(main).mouseenter(function() {
// console.info("鼠标移入")
clearInterval(timer);
});
//鼠标移除开启定时器
$(main).mouseleave(function() {
timer = setInterval(function() {
$(right).click();
}, 2000);
})
}
var main = $(".main");//获取小容器
// console.info(main)
var left=$(".left");//获取左指向
// console.info(left)
var right=$(".right")//获取右指向
// console.info(right)
var main_content=$(".main_content")//获取滚动的容器
// console.info(main_content)
var width =$(".main_content li").width();//获取图片的宽度
// console.info(width)
var circle =$(".circle_main li");
// console.info(circle.length)
var current_index=0;//记录当前显示的图片(小圆圈),
circle_move(circle,main_content,left,right,main);
})
</script>
</html>
轮播无缝滚动
猜你喜欢
转载自blog.csdn.net/sugang666/article/details/86536900
今日推荐
周排行