标签：box style 进阶 轮播 img Javascript li var left
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
// 获取轮播容器
var c = document.querySelector(".content")
var img_box = document.querySelector(".img_box")
img_box.style.left="-800px"
// ==================自动播放======================
var change=function(offset){ //为解决重复内容，所以用函数替代
// var newoffset=parseInt(img_box.style.left) + offset
// if(newoffset < -2400){
// img_box.style.left="0px"
// }else if(newoffset > 0){
// img_box.style.left="-2400px"
// } else{
// img_box.style.left=newoffset + "px"
// }
// }
// var time=setInterval(function(){
// change(-800) // 传参进去
// },2000) 自动播放版本
//获取图片切换的目标位置
var newoffset=parseInt(img_box.style.left) + offset
var speed=offset / 100
//慢慢切换
var move=function(){
img_box.style.left=parseInt(img_box.style.left) + speed + "px"
if(parseInt(img_box.style.left)!=newoffset){
setTimeout(move,10)
}else{
if(parseInt(img_box.style.left)==-4000){
img_box.style.left="-800px"
}else if(parseInt(img_box.style.left)==0){
img_box.style.left="-3200px"
}
}
}
move()
}
// ==================生成左右切换的按钮==============
var ul=document.createElement("ul")
ul.className="btns"
var left_li=document.createElement("li")
left_li.innerText="<"
var right_li=document.createElement("li")
right_li.innerText=">"
// 将生成的两个添加到创建的ul盒子中
ul.appendChild(left_li)
ul.appendChild(right_li)
// 将创建的ul连带加入其中的li添加到content中
c.appendChild(ul)
// ================按钮点击=======================
left_li.onclick=function(){
change(800)
index--;
if(index < 0){
index = 3
}
highlight()
}
right_li.onclick=function(){
change(-800)
index++
if(index>3){
index=0
}
highlight()
}
var time=setInterval(function(){ //自动轮播
change(-800) // 传参进去
},2000)
// 解决自动轮播和手动点击的冲突问题
// 即鼠标进入容器，则停止动画，离开再开启动
c.onmouseenter=function(){
clearInterval(time)
}
c.onmouseleave=function(){
time=setInterval(right_li.onclick,2000)
// time=setInterval(function(){
// change(-800)
// },2000) 上述表达方式等同于此注释
}
// 任意页面切换
var list=document.createElement("ul")
list.className="list"
//获取图片数量
var img_box_li=document.querySelectorAll(".img_box li")
// console.log(img_box_li)
for(var i=0;i<img_box_li.length;i++){
var li=document.createElement("li")
li.innerText=i+1
if(i == 0){
li.className="current" //给选中的第一个加特殊样式
}
list.appendChild(li)
}
c.appendChild(list)
var list_li=document.querySelectorAll(".list li")
for(var j=0;j<list_li.length;j++){
list_li[j].onclick=function(){
var new_index = this.innerText-1
change((index-new_index)*800) //移动距离就是（原来-现在）*800图片单位
index = new_index
highlight()
}
}
// =================按钮样式切换=====================
var index = 0 //协助变量(定义一个游标，来记录当前点点的索引值)
var highlight=function(){
for(var k=0;k<list_li.length;k++){
if(k==index){
list_li[k].className= "current" //即点击谁，给谁加current的class即设定current的形式
}else{
list_li[k].className="" //火力覆盖掉所有其他的元素class属性
}
}
}
// 初始化辅助无缝轮播图片
var last_li=img_box.firstElementChild.cloneNode(true) //复制图1
var first_li=img_box.lastElementChild.cloneNode(true)
img_box.insertBefore(first_li,img_box.firstElementChild)
img_box.appendChild(last_li)
}
</script>
<style>
*{
padding: 0%;
margin: 0%;
}
.title{
width:480px;
margin:50px auto;
box-shadow: 0 0 5px salmon;
border-radius: 30px;
text-align: center;
/* background: salmon; */
}
.title h1{
font-family: xx;
font-size:40px;
}
@font-face{
font-family: xx;
src:url(12.ttf);
}
img{
height:500px;
}
.content{
width:800px;
height:500px;
margin: 100px auto;
background: wheat;
position: relative;
overflow: hidden;
box-shadow: 0 0 100px rgb(102, 102, 116);
border-radius: 20px;
}
.content .img_box{
width: 4800px;
height:500px;
list-style: none;
background: wheat;
display:flex;
position: absolute;
left:0px;
border-style:dashed;
border-color: slategray;
}
.content .img_box li{
list-style: none;
width:800px;
height:500px;
}
.content .img_box li img{
width: 100%;
height:100%;
}
.content .btns{
position: absolute;
/* html定位中不涉及层级，那么html中后出现的元素将出现在上层 */
width:90%;
display: flex;
/* background: darkcyan; */
justify-content: space-between;
margin-top: 230px;
margin-left: 38px;
}
.content .btns li{
list-style: none;
text-align: center;
color:#fff;
width:50px;
height:50px;
border-radius: 100px;
background-color: rgba(0, 0, 0, 0.25);
line-height: 50px;
cursor: pointer;
}
.content .btns li:hover{
background-color: rgba(0, 0, 0, 0.35);
}
.content .list{
position: absolute;
width:25%;
display: flex;
/* background: seashell; */
justify-content: space-between;
margin-top: 430px;
margin-left: 300px;
}
.content .list li{
list-style: none;
width:20px;
height:20px;
background:rgba(255, 255, 255, 0.4);
cursor: pointer;
color:#000;
}
.list li.current{
background: rgba(0, 0, 0, 0.4);
color:#fff
}
</style>
</head>
<body>
<div class="title"> <h1>小猫你可以吃芝士汉堡儿</h1></div>
<div class="content">
<ul class="img_box"> <!-- ul胶卷 -->
<li>
<img src="mm3.jpg" alt="">
</li>
<li>
<img src="mm4.jpg" alt="">
</li>
<li>
<img src="mm2.jpg" alt="">
</li>
<li>
<img src="mm1.jpg" alt="">
</li>
</ul>
</div>
<!-- 一些为了做效果而诞生的内容，可以直接用JavaScript生成 -->
</body>
</html>
标签：box,
style,
进阶,
轮播,
img,
Javascript,
li,
var,
left
From： https://blog.csdn.net/m0_74977981/article/details/142138021