主要是css和JS 的代码编打,在测量像素的时候 主要是看 宽度,在html里面 要给图片一个class和id方便设置js代码,在自动轮播的效果下要设置 图片的方向和每一次移动的位置(即像素);在css里要给最外层的‘盒子’设置宽和高 和位置的所在位置,然后再给装图片的‘盒子’设置每一张图片加起来的总宽度…
开发工具与关键技术:DW(js 、 css)
作者:邱慧敏
撰写时间:2019.01.17
知识总结 轮播的基本样式
HTML 代码部分
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轮播效果</title>
<link rel="icon" type="image/x-icon" href="images/微信图片14.jpg">
<link rel="stylesheet" href="baobao-5.css">
</head>
<body>
<!--轮播 先设置两大个div;大的div里面在放两个小的div 分别用来装img span;
然后在外层再放 <a></a>标签用来装左右按钮,记得不能遗漏 hrdf=""javascript:;"> -->
<div class="left_div" id="left_div">
<div id="container" class="container">
<div id="list" class="list" style="left: -1080px;"><!--像素不可缺少 且为负数-->
<img src="images/微信图片17.jpg" alt="">
<img src="images/微信图片15.jpg" alt="">
<img src="images/微信图片4.jpg" alt="">
<img src="images/微信图片16.jpg" alt="">
<img src="images/微信图片11.jpg" alt="">
<img src="images/微信图片17.jpg" alt="">
<img src="images/微信图片15.jpg" alt="">
</div>
<div id="buttons" class="buttons"><!--页码-->
<span index="1" class="on">1</span>
<span index="2">2</span>
<span index="3">3</span>
<span index="4">4</span>
<span index="5">5</span>
</div>
<a id="prev" class="prev" href="javascript:;"><</a><!--按钮-->
<a id="next" class="next" href="javascript:;">></a>
</div>
</div>
<script src="baobao-5.js"></script>
</body>
</html>
CSS 样式代码
@charset "utf-8";
/* CSS Document */
.left_div{
width: 1000px;
height: 100%;
margin: 0 auto;
}
.container{
width: 1080px;/*图片的宽*/
height: 1920px;/*高*/
margin: 0 auto;
overflow: hidden;/*超出部分隐藏*/
position: relative;
}
.container .list{
width: 7560px;/*五张图片的宽的总像素*/
height: 100%;
position: absolute;
}
.container img{/*图片的浮动和宽高*/
float: left;
width: 1080px;
height: 1920px;
}
.container a{
width: 60px;
line-height: 60px;
font-size: 45px;
text-align: center;
color: red;
background: #C3C3C3;
position: absolute;
top: 40%;
display: none;
text-decoration: none;
}
.container a.prev{
left: 0px;
}
.container a.next{
right: 0px;
}
.container .buttons{
position: absolute;
bottom: 8px;
right: 25px;
}
.container .buttons span{
width: 23px;
line-height: 23px;
border-radius: 50%;/*圆形的效果*/
float: left;
text-align: center;
background: #c3c3c3;
margin-left: 8px;
font-size: 18px;
color: red;
}
.container .buttons span.on{
color: green;/*发生移动的图片 伪类on 颜色发生改变*/
background-color: #8D7D7D;
}
.container:hover a{
display: block;
}
.left_div .list img{
cursor: pointer;
}
.left_div .buttons span{
cursor: pointer;/*手的图标出现*/
}
JS 代码部分
// JavaScript Document
var blswitch=false;
var index=1;
var timer=null;
window.function(){
var container=document.getElementById("container");
var prev=document.getElementById("prev");
var next=document.getElementById("next");
var buttons = document.getElementById("buttons").getElementsByTagName("span");
next.onclick=function(){/*右边按钮的点击事件*/
if(blswitch){
return false;
}
if(index===5){
index=1;
}else{
index++;/*向右移动*/
}
animate(-1080);/*图片的像素*/
showButton();/*每次图片的位置发生变化,底部的页码数也随之变化*/
};
prev.onclick=function(){/*左边按钮的点击事件*/
if(blswitch){
return false;
}
if(index===1){
index=5;
}else{
index--;/*向左移动*/
}
animate(1080);/*像素*/
showButton();/*每次图片的位置发生变化,底部的页码数也随之变化*/
};
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=function(){
if(this.className==="on"){
return;
}
var myindex=this.getAttribute("index");
var offset=-1080*(myindex-index);
if(!blswitch){
animate(offset);
}
index=myindex;
showButton();
}
}
function play(){
timer=setInterval(function(){
next.onclick();
},3000)/*以毫秒为单位*/
}
play();
function stoptime(){
clearInterval(timer);
}
container.onmousemove = stoptime;/*鼠标移到图片上,轮播停止*/
container.onmouseout = play;/*移开继续开始*/
};
function animate(offset){
var list=document.getElementById("list");
var time=1080;
var interval=10;
var speed=offset/(time/interval);
var newleft=parseInt(list.style.left)+offset;
blswitch=true;
function go(){
if((speed<0&&parseInt(list.style.left)>newleft)||(speed>0&&parseInt(list.style.left)<newleft)){
list.style.left=parseInt(list.style.left)+speed+"px";
setTimeout(go,interval);
}else{/*注意别打乱、错*/
list.style.left=newleft+"px";
if(newleft<-(1080*5)){
list.style.left=-1080+"px";
}
if(newleft>-1080){
list.style.left=-(1080*5)+"px";
}
blswitch=false;
}
}
go();/*不可少*/
}
function showButton(){
var buttons=document.getElementById("buttons").getElementsByTagName("span");
for(var i=0;i<buttons.length;i++){
if(buttons[i].className==="on"){
buttons[i].className="";
break;
}
}
buttons[index-1].className="on";/*给伪类class为on的一个高亮效果*/
}