<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {margin: 0;padding:0;}
div.picdiv {position: relative;width: 1920px;height: 540px;overflow: hidden;}
ul.pic li {position: absolute;left:100%;list-style-type: none;}
ul.pic li.on {left: 0;}
ul.mark {position: absolute;left: 50%;margin-left:-100px;bottom: 10px;}
ul.mark li {float: left;width:5px;height: 5px;border-radius: 15px;margin: 0 5px;background-color: red;list-style-type: none;}
ul.mark li.on {width: 30px;}
div.pre {position: absolute;width: 120px;height:200px;left: 300px;top: 170px;background-color: rgb(13,13,13);cursor: pointer;}
div.pre:before {content:"";width: 0;height: 0;position: absolute;border-top:80px solid transparent ;border-right:80px solid #fff;border-bottom:80px solid transparent;left: 15px;top: 25px;display: block;}
div.pre:after {content:"";width: 0;height: 0;position: absolute;border-top:80px solid transparent ;border-right:80px solid rgb(13,13,13);border-bottom:80px solid transparent;left: 25px;top: 25px;display: block;}
div.next {position: absolute;width: 120px;height: 200px;right: 300px;top: 170px;background-color: rgb(13,13,13);cursor: pointer;}
div.next:before {content: "";width: 0;height: 0;position: absolute;border-top:80px solid transparent ;border-left:80px solid #fff;border-bottom:80px solid transparent;right: 15px;top: 25px;}
div.next:after {content: "";width: 0;height: 0;position: absolute;border-top:80px solid transparent ;border-left:80px solid rgb(13,13,13);border-bottom:80px solid transparent;right: 25px;top: 25px;}
</style>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="picdiv">
<ul class="pic">
<li class="on"><img src="image/1.png"></li>
<li><img src="image/2.png"></li>
<li><img src="image/3.jpg"></li>
<li><img src="image/4.jpg"></li>
</ul>
<div class="pre"></div>
<div class="next"></div>
</div>
<script type="text/javascript">
function picplay(ele,pre,next) {
var index=lastindex=0;
var pic=$(ele)
var prebtn=$(pre)
var nextbtn=$(next)
tag(pic.length); //创造标签
$("ul.mark li").mouseover(function(){ //标签定位图片
var a=$(this).index()
console.log(a)
clearInterval(t)
play(a)
})
$("ul.mark li").mouseout(function(){
autoplay()
})
pic.mouseover(function () {
clearInterval(t)
})
pic.mouseout(function () {
autoplay()
})
prebtn.click(function () {
clearInterval(t)
index--;
index<0 && (index=3)
play(index)
})
$(pre,next).mouseout(function () {
autoplay()
})
nextbtn.click(function () {
clearInterval(t)
index++;
index>pic.length-1&& (index=0)
nextplay(index)
})
function autoplay() {
t=setInterval(function () {
index++;
index>pic.length-1 && (index=0)
play(index)
},3000)
}
autoplay();
function play (a) {
index=a
pic.eq(a).css("left","100%").stop(true,true).animate({left:"0"},1000) //使用的百分比，在css里要给出固定的父元素宽度，不然缩小页面会出现错误
pic.eq(lastindex).stop(true,true).animate({left:"-100%"},1000)
$("ul.mark li").removeClass("on")
$("ul.mark li").eq(a).addClass("on")
lastindex=a
}
function nextplay(a) {
index=a
pic.eq(a).css("left","-100%").stop(true,true).animate({left:"0"},1000)
pic.eq(lastindex).stop(true,true).animate({left:"100%"},1000)
$("ul.mark li").removeClass("on")
$("ul.mark li").eq(a).addClass("on")
lastindex=a
}
}
picplay("ul.pic li","div.pre","div.next");
function tag(len) { //根据图片数量创造小标签
var newul=$("<ul>").addClass("mark")
for (var i = 0; i < len; i++) {
console.log(i)
newul.append($("<li>"))
}
newul.find("li:first").addClass("on")
$("div.picdiv").append(newul)
}
</script>
</body>
</html>
时间： 2024-08-04 13:57:34