js+css制作的幻灯片特效代码,实用性高可以用作各种场景的2次修改美化

洪七公 · 发表于 2023-2-5 23:51:46

为了制作一款比较不错的幻灯片代码，我真的是找了很多的地方，问题多多！

这里贴出一款简单效果幻灯片特效代码，可塑性非常高！

先给大家看下效果图：

贴出全部代码(图片自己替换搞定)：

<style>
.box{width: 370px;height: 228px;overflow: hidden;position: relative;}
.box-1 ul{list-style: none;}
.box-1 ul li{width: 370px;height: 228px;position: relative;overflow: hidden;list-style: none;}
.box-1 ul li img{display:block;width: 370px; height: 228px;}
.box-1 ul li h2{position: absolute;left: 0;bottom: 0;height: 40px;width:370px;background: rgba(0,0,0,.5);text-indent: 1em;font-size: 13px;line-height: 40px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;font-weight: normal;color: ghostwhite; text-align:left;}
.box-2{position: absolute;right: 10px;bottom: 14px;}
.box-2 ul li{float:left;width: 6px;height: 6px;overflow: hidden; margin: 0 5px; border-radius: 50%;background: rgba(0,0,0,0.5);text-indent: 100px;cursor: pointer;list-style: none;}
.box-2 ul .on{background: rgba(255,255,255,0.6);}
.box-3 span{position: absolute;color: white;background: rgba(125,125,120,.3);width: 30px;height: 48px;top:50%; font-family: "宋体";line-height: 48px;font-size:30px;margin-top: -30px;text-align: center;cursor: pointer;}
.box-3 .prev{left: 10px;}
.box-3 .next{right: 10px;}
.box-3 span::selection{background: transparent;}
.box-3 span:hover{background: rgba(125,125,120,.8);}
</style>
<div class="box">
<div class="box-1">
<ul>
<li>
<img src="/d/file/p/2023/02-04/e1xb5atqegj.jpg" alt="这里是第一场图片"></img>
<h2>这里是第一张图片这里是第一张图片</h2>
</li>
<li>
<img src="/d/file/p/2023/02-04/ipoh0ih0sjz.jpg" alt="这里是第二张图片"></img>
<h2>这里是第二张图片这里是第二张图片</h2>
</li>
<li>
<img src="/d/file/p/2023/02-04/oyudc3yq5im.jpg" alt="这里是第三张图片"></img>
<h2>这里是第三张图片这里是第三张图片</h2>
</li>
<li>
<img src="/d/file/p/2023/02-04/pf5yfqfognl.jpg" alt="这里是第一场图片"></img>
<h2>这里是第四张图片这里是第四张图片</h2>
</li>
<li>
<img src="/d/file/p/2023/02-04/ipoh0ih0sjz.jpg" alt="这里是第一场图片"></img>
<h2>这里是第五张图片这里是第五张图片</h2>
</li>
</ul>
</div>
<div class="box-2">
<ul>
</ul>
</div>
<div class="box-3">
<span class="prev"> < </span>
<span class="next"> > </span>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
function $(param){
if(arguments[1] == true){
return document.querySelectorAll(param);
}else{
return document.querySelector(param);
}
}
var $box = $(".box");
var $box1 = $(".box-1 ul li",true);
var $box2 = $(".box-2 ul");
var $box3 = $(".box-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,2000);
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,2000);
}
}
for(var p=0;p<$box3.children.length;p++){
$box3.children[p].onmouseover = function(){
clearInterval(timer);
};
$box3.children[p].onmouseout = function(){
timer = setInterval(go,2000);
}
}
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,2000);
}
}
$box3.children[0].onclick = function(){
back();
}
$box3.children[1].onclick = function(){
go();
}
function back(){
for(var j =0;j<$length;j++){
$box1[j].style.display = "none";
$box2.children[j].className = "";
}
if(current == 0){
current = $length;
}
$box1[current-1].style.display = "block";
$box2.children[current-1].className = "on";
current--;
}
}
</script>

复制代码

洪七公 · 发表于 2023-2-5 23:52:11

为了不扰乱会员对源码的测试，有问题咨询右侧客服不要直接回复，否则视为非法信息屏蔽会员ID！

老乞丐辛苦优化的代码，希望大家能用得着！

		自动登录	找回密码
密码			会员注册

[CSS/Html] js+css制作的幻灯片特效代码,实用性高可以用作各种场景的2次修改美化