标签：list 轮播图 size att cli abs alt acm cdn
轮播图：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.slider_item{
list-style: none;
display: none;
}
.slider_banner{
position: relative;
border: 2px solid red;
width: 400px;
height: 400px;
}
.left{
left: -26px;
text-align: right;
}
.right{
right: -26px;
text-align: left;
}
.slider_banner{
overflow: hidden;
}
.slider_banner .slider_botton{
z-index: 2;
position: absolute;
top: 214px;
margin: auto;
width: 52px;
height: 52px;
background-color: rgba(145,145,145,0.30);
border: 1px solid rgba(145,145,145,0.30);
border-radius: 50%;
font-size: 25px;
/* font-weight: bold;*/
color: aliceblue;
}
.slider_banner .slider_botton:hover{
background-color: rgba(145,145,145,0.80);
}
.slider_wrapper{
z-index: 1;
}
.slider_banner .slider_wrapper .slider_item .slider_img{
display: inline-block;
width: 400px;
height: 400px;
}
.slider_banner .slider_index{
position: absolute;
z-index: 2;
bottom: 15px;
left: 35px;
}
.slider_banner .slider_index i{
z-index: 2;
float: left;
margin-left: 5px;
display: block;
width: 15px;
height: 15px;
background-color: rgba(215,183,184,0.50);
border-radius: 90%;
}
</style>
</head>
<body>
<div class="slider_banner">
<button id="slider_left_botton" class="slider_botton left"><</button>
<div id="slider_wrapper" class="slider_wrapper left">
<li count="1" class="slider_item slider_img">
<a class="slider_img" href="https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.18a21debRracMN&ft=t&id=642952228224" target="_blank">
<img class="slider_img" src="https://gd3.alicdn.com/imgextra/i2/0/O1CN01yyxvhj2775mw4R8Xn_!!0-item_pic.jpg" alt="slider_img">
</a>
</li>
<li count="2" class="slider_item slider_img">
<a class="slider_img" href="https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.18a21debRracMN&ft=t&id=643337901744" target="_blank">
<img class="slider_img" src="https://gd2.alicdn.com/imgextra/i4/0/O1CN01kHJ9ix2775n4TN7k8_!!0-item_pic.jpg" alt="slider_img">
</a>
</li>
<li count="3" class="slider_item slider_img">
<a class="slider_img" href="https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.18a21debRracMN&ft=t&id=643685802564" target="_blank">
<img class="slider_img" src="https://gd1.alicdn.com/imgextra/i4/0/O1CN01ilmiVW2775my0w7rC_!!0-item_pic.jpg" alt="slider_img">
</a>
</li>
</div>
<button id="slider_right_botton" class="slider_botton right">></button>
<div class="slider_index">
<i icount = "1"></i>
<i icount = "2"></i>
<i icount = "3"></i>
</div>
</div>
<script src="jquery-3.6.0.js"></script>
<script>
$("[count=1]").css("display", "inline-block");
$("[icount=1]").css("background-color", "rgba(255,255,255,1)");
var startid = window.setInterval(flow,3000);
function selectorHide(){
var count = 0;
$("[count]").each(function(){
if($(this).css("display")=="inline-block"){
count = $(this).attr("count");
return;
}
});
$("[count="+ count +"]").css("display", "none");
$("[icount="+count+"]").css("background-color", "rgba(215,183,184,0.50)");
return count;
}
function sliderSelector(s){
var count = selectorHide();
var temp;
switch(s){
case 1: //轮播图自动轮播
temp = count!=3?(parseInt(count)+1):1;
break;
case 2: //选择左边
temp = count!=1?(parseInt(count)-1):3;
break;
case 3: //选择右边
temp = count!=3?(parseInt(count)+1):1;
break;
}
$("[count="+temp+"]").css("display", "inline-block");
$("[icount="+temp+"]").css("background-color", "rgba(255,255,255,1)");
}
function flow(){
sliderSelector(1);
}
$("#slider_wrapper").mouseover(function(){
window.clearInterval(startid);
startid = undefined;
})
$("#slider_wrapper").mouseout(function(){
if(startid == undefined){
startid = window.setInterval(flow,2000);
}
})
$("#slider_left_botton").click(function(){
sliderSelector(2);
})
$("#slider_right_botton").click(function(){
sliderSelector(3);
})
$("[icount").each(function(){
$(this).click(function(){
count = selectorHide();
temp =$(this).attr("icount");
$("[count="+temp+"]").css("display", "inline-block");
$("[icount="+temp+"]").css("background-color", "rgba(255,255,255,1)");
})
})
</script>
</body>
</html>
标签：list 轮播图 size att cli abs alt acm cdn
原文地址：https://www.cnblogs.com/shuranima/p/14725600.html
