1、几张图片计时器简单轮播(jQuery)
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<style type="text/css">
.banner{
width: 100%;
height: 350px;
overflow: hidden;
}
.banner img{
width:100%;
}
</style>
<div class="banner">
<img src="images/1.jpg" alt="">
</div>
<script>
var timer = null;
clearInterval(timer)
var n = 1;
timer = setInterval(function () {
$('.banner > img').attr('src', 'images/' + n++ + '.jpg')
if (n > 3) {
n = 1;
}
}, 3000)
</script>
</html>
2-1、图片向左/右滚动（jQuery）
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<style type="text/css">
#imgshow{
position: relative;
width:1000px;
overflow: hidden;
}
#imgshow ul{
display: flex;
justify-content: flex-start;
}
#imgshow ul li {
float: left;
background: #ddd;
margin:0 10px 0 0;
}
#imgshow li img{
display: block;
margin:0 auto;
height:58px;
padding:5px;
border:1px solid #ddd
}
</style>
<div id="imgshow">
<ul>
<li><img src="sky-1.jpg"></li>
<li><img src="sky-2.jpg"></li>
<li><img src="sky-3.jpg"></li>
</ul>
</div>
<script type="text/javascript">
var oDiv = $('#imgshow')[0];
var oUl = $('#imgshow>ul')[0];
var aLi = oUl.getElementsByTagName('li')
var closeTime = null;
console.log(oDiv,oUl,aLi)
console.log(aLi[0].offsetWidth);
var index = -2;
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + "px"
if(oUl.offsetWidth < 3000){
oUl.style.width = 3355 +'px';
}
function a() {
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.marginLeft = 0;
}
if (oUl.offsetLeft > 0) {
oUl.style.marginLeft = -oUl.offsetWidth / 2 + 'px';
}
oUl.style.marginLeft = oUl.offsetLeft + index + "px"
}
closeTime = setInterval(a, 30)
$(oDiv).hover(function () {
clearInterval(closeTime)
}, function () {
closeTime = setInterval(a, 30)
})
</script>
</html>
2-2、箭头控制图片向左/右滚动
<!DOCTYPE html>
<html>
<style type="text/css">
*{margin: 0;padding: 0;}
#div1{position: relative;border:1px solid #0ff;width:1100px; height: 180px;margin:50px auto 0;overflow: hidden;}
#div1 ul{position: absolute;left: 0;}
#div1 ul li{list-style: none;width:200px;float: left;padding: 10px;height: 160px;}
#div1 ul li img{width:100%;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var aA=document.getElementsByTagName('a');//获取向右向左的箭头
var timer=null;
var iSpeed=10;
oUl.innerHTML+=oUl.innerHTML;//定义图片可以循环播放
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';//定义外层ul的宽度，根据图片的个数和每个图片的宽度计算，保证总宽度是可调整的
function fnMove(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left=0;
}else if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}//定义到边界的时候，实现无缝衔接
oUl.style.left=oUl.offsetLeft+iSpeed+'px';
//定义图片的右边距随着速度不断不断增加，或减小，实现运动的效果
}
timer=setInterval(fnMove,30);
aA[0].onclick=function(){
iSpeed=-10;
//按下左箭头，定义向左运动
}
aA[1].onclick=function(){
iSpeed=10;
//按下右箭头，定义向右运动
}
oDiv.onmouseover=function(){
clearInterval(timer);
//鼠标移动到图片上，清除定时器，停止运动
}
oDiv.onmouseout=function(){
timer=setInterval(fnMove,30);
//鼠标移出，重新开启定时器，重新运动
}
};
</script>
<body>
<a href="javascript:;">←</a>
<a href="javascript:;">→</a>
<div id="div1">
<ul>
<li><img src="sky-1.jpg"></li>
<li><img src="sky-2.jpg"></li>
<li><img src="sky-3.jpg"></li>
<div style="clear: none;"></div>
</ul>
</div>
</body>
</html>
3、图片点击箭头上/下滚动，松开即停止
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{margin:0;padding: 0;}
div#miaovslide {text-align: center;}
.wrap{width:500px;overflow: hidden; height: 700px;margin: 0 auto;position: relative;}
.wrap img{width: 100%;}
li{list-style: none;width: 700px;height: 344px;padding: 10px 0;}
ul{position: absolute;top: 0;left: 0;}
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('miaovslide');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');//获取所有的li
var oUp=document.getElementById('up');//获取向上轮播的按钮
var oDown=document.getElementById('down');//获取向下轮播的按钮
var timer=null;//定义定时器
var iSpeed=0;//定义初始速度
oUl.innerHTML+oUl.innerHTML; //实现循环无间断的图片流
oUp.onmousedown=function(){
timer=setInterval(doMove,30);
iSpeed=-5;
//当按下向左的按钮时，设置速度为负，即向上滚动
};
oUp.onmouseup=function(){
clearInterval(timer);
//当抬起鼠标时，清除定时器
};
oDown.onmousedown=function(){
iSpeed=5;
timer=setInterval(doMove,30);
//当鼠标按下向右的按钮时，设置速度为正，即向下滚动
}
oDown.onmouseup=function(){
clearInterval(timer);
//当鼠标抬起时，清除定时器
}
function doMove(){
oUl.style.top=oUl.offsetTop+iSpeed+'px';
if(oUl.offsetTop<-oUl.offsetHeight/2){
oUl.style.top='0px';
}else if(oUl.offsetTop>0){
oUl.style.top=-oUl.offsetHeight/2+'px';
}
};
};
</script>
</head>
<body>
<div class="slide_module" id="miaovslide">
<div id="up"><img src="images/prevup.png"></div>
<div class="wrap">
<ul>
<li><img src="sky-1.jpg"></li>
<li><img src="sky-2.jpg"></li>
<li><img src="sky-3.jpg"></li>
<li><img src="sky-1.jpg"></li>
</ul>
</div>
<div id="down"><img src="images/nextdown.png"></div>
</div>
</body>
</html>
4-1、图片自动滚动+手动轮播(jQuery)
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<style type="text/css">
.wrap{
width: 100%;
display: flex;
margin: 15px auto;
justify-content: space-between;
flex-flow: row;
flex-wrap: wrap;
position: relative;
overflow: hidden;
}
.wrap ul{
width: 50%;
overflow: hidden;
}
.wrap ul#img img{
width: calc(100% - 10px);
border: 1px solid #ddd;
padding: 5px;
}
.box {
height: 100%;
}
.inner{
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
margin:0 auto;
}
.inner img{
width: 500px;
height: 300px;
vertical-align: top
}
.inner ul {
width: 1000%;
position: absolute;
list-style: none;
left:0;
top: 0;
}
.inner li{
float: left;
}
.inner ol {
position: absolute;
height: 20px;
right: 20px;
bottom: 20px;
text-align: center;
padding: 5px;
}
.inner ol li{
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
background-color: #fff;
margin: 5px;
cursor: pointer;
}
.inner ol .current{
background-color: red;
}
#arr{
display: none;
}
#arr span{
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #fff;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #000;
opacity: 0.5;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
<div class="wrap">
<div class="box" id="box">
<div class="inner">
<ul>
<li><a href="#" target="_blank" title=""><img src="images/hend1.jpg" alt="hend1"/></a></li>
<li><a href="#" target="_blank" title=''><img src="images/hend2.jpg" alt="hend2" /></a></li>
<li><a href="#" target="_blank" title=""><img src="images/hend3.jpg" alt="hend3"/></a></li>
</ul>
<ol class="bar"></ol>
<div id="arr">
<span id="left"> < </span>
<span id="right"> ></span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
/**
*
* @param id 传入元素的id
* @returns {HTMLElement | null} 返回标签对象，方便获取元素
*/
function my$(id) {
return document.getElementById(id);
}
//获取各元素，方便操作
var box = my$("box");
var inner = box.children[0];
var ulObj = inner.children[0];
var list = ulObj.children;
var olObj = inner.children[1];
var arr = my$("arr");
var imgWidth = inner.offsetWidth;
var right = my$("right");
var pic = 0;
//根据li个数，创建小按钮
for (var i = 0; i < list.length; i++) {
var liObj = document.createElement("li");
olObj.appendChild(liObj);
liObj.innerText = (i + 1);
liObj.setAttribute("index", i);
//为按钮注册mouseover事件
liObj.onmouseover = function () {
//先清除所有按钮的样式
for (var j = 0; j < olObj.children.length; j++) {
olObj.children[j].removeAttribute("class");
}
this.className = "current";
pic = this.getAttribute("index");
animate(ulObj, -pic * imgWidth);
}
}
//设置ol中第一个li有背景颜色
olObj.children[0].className = "current";
//克隆一个ul中第一个li,加入到ul中的最后=====克隆
ulObj.appendChild(ulObj.children[0].cloneNode(true));
var timeId = setInterval(onmouseclickHandle, 2000);
//左右焦点实现点击切换图片功能
box.onmouseover = function () {
arr.style.display = "block";
clearInterval(timeId);
};
box.onmouseout = function () {
arr.style.display = "none";
timeId = setInterval(onmouseclickHandle, 2000);
};
right.onclick = onmouseclickHandle;
function onmouseclickHandle() {
//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
//所以,如果用户再次点击按钮,用户应该看到第二个图片
if (pic == list.length - 1) {
//如何从第6个图,跳转到第一个图
pic = 0;//先设置pic=0
ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
}
pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
if (pic == list.length - 1) {
//第五个按钮颜色干掉
olObj.children[olObj.children.length - 1].className = "";
//第一个按钮颜色设置上
olObj.children[0].className = "current";
} else {
//干掉所有的小按钮的背景颜色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
olObj.children[pic].className = "current";
}
}
left.onclick = function () {
if (pic == 0) {
pic = list.length - 1;
ulObj.style.left = -pic * imgWidth + "px";
}
pic--;
animate(ulObj, -pic * imgWidth);
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
//当前的pic索引对应的按钮设置颜色
olObj.children[pic].className = "current";
};
//设置任意的一个元素,移动到指定的目标位置
function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
element.timeId = setInterval(function () {
//获取元素的当前的位置,数字类型
var current = element.offsetLeft;
//每次移动的距离
var step = 10;
step = current < target ? step : -step;
//当前移动到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定时器
clearInterval(element.timeId);
//直接到达目标
element.style.left = target + "px";
}
}, 10);
}
</script>
</html>
4-2、图片自动轮播+手动轮播（需要jQuery包）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"><style>
* {
padding:0;
margin:0;
}
ul {
list-style:none;
}
.out {
width:350px;
height:245px;
margin:50px auto;
position:relative;
}
.img li {
position:absolute;
top:0px;
left:0px;
display:none
}
.out .num {
position:absolute;
bottom:0px;
left:0px;
font-size:0px;
text-align:center;
width:100%;
}
.num li {
width:20px;
height:20px;
background:#666666;
color:#FFFFFF;
text-align:center;
line-height:20px;
display:inline-block;
font-size:16px;
border-radius:50%;
margin-right:10px;
cursor:pointer;
}
.out .btn {
position:absolute;
top:50%;
margin-top:-30px;
width:30px;
height:60px;
background:rgba(0,0,0,0.5);
color:#FFFFFF;
text-align:center;
line-height:60px;
font-size:40px;
display:none;
cursor:pointer;
}
.out .num li.active-1 {
background:#AA0000;
}
.out:hover .btn {
display:block
}
.out .left {
left:0px;
}
.out .right {
right:0px;
}
</style>
</head>
<body>
<div class="out">
<!--上面-->
<ul class="img">
<li><a href=""><img src="sky-1.jpg" width="350" height="245" alt=""></a></li>
<li><a href=""><img src="sky-2.jpg" width="350" height="245" alt=""></a></li>
<li><a href=""><img src="sky-3.jpg" width="350" height="245" alt=""></a></li>
</ul>
<!--下面-->
<ul class="num">
</ul>
<div class="left btn"><</div>
<div class="right btn">></div>
</div>
<script>
$(function(){
//下方for循环
var size=$(".img li").size()
for(var i=1; i<=size; i++){
var li="<li>"+i+"</li>";
$(".num").append(li)
}
/*size 获取当前元素个数*/
var speed = 1000;
//手动控制轮播
$(".img li").eq(0).show()
$(".num li").eq(0).addClass('active-1')
/*mouseover 可以改成点击事件 click*/
$(".num li").mouseover(function(){
$(this).addClass('active-1').siblings('li').removeClass('active-1')
var index=$(this).index() /*index 当前元素的意思索引值*/
i=index; //i值和自动轮播值是相同的
$(".img li").eq(index).stop(true).show().siblings().stop(true).hide() /*eq 0开始*/
});
//自动控制轮播
var i=0;
var t=setInterval(move,1500) //定时器
//右
function move(){
i++;
if(i==size){i=0;}
$(".num li").eq(i).addClass('active-1').siblings('li').removeClass('active-1');
$(".img li").eq(i).stop(true).show().siblings().stop(true).hide();
};
//左
function moveL(){
i--;
if(i==-1){i=size-1;}
$(".num li").eq(i).addClass('active-1').siblings('li').removeClass('active-1');
$(".img li").eq(i).stop(true).show().siblings().stop(true).hide();
};
//自动轮播鼠标经过移入和移除
$(".out").hover(function(){
clearInterval(t)
},function(){
t=setInterval(move,1500)
});
//左右按钮
$(".out .left").click(function(){
moveL()
})
$(".out .right").click(function(){
move()
})
});
</script>
</body>
</html>
5、照片墙(transform)
鼠标滑到图片上时图片呈摆正略放大状态
<!DOCTYPE html>
<html>
<style type="text/css">
.images{
width: 960px;
margin: 60px 60px 10px 40px;
position: absolute;
}
.pic{
width: 160px;
}
.images img:hover{
box-shadow: 15px 15px 20px rgba(50,50,50,0.4);
transform:rotate(0deg) scale(2.20);
-webkit-transform:rotate(0deg) scale(1.20);
z-index: 1000;
}
.images img{
padding: 10px 10px 15px;
background: white;
border: 1px solid #ddd;
box-shadow: 2px 2px 3px rgba(50,50,50,0.4);
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
position: absolute;
z-index: 1;
}
.pic1{
left: 400px;
top: 0;
transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
}
.pic2{
left: 200px;
top: 10px;
transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
}
.pic3{
top: 66px;
right: 240px;
transform:rotate(20deg);
-webkit-transform:rotate(20deg);
}
.pic4{
top: 100px;
left: 300px;
transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
}
</style>
<div class="images">
<img class="pic pic1" src="sky-1.jpg">
<img class="pic pic2" src="sky-2.jpg">
<img class="pic pic3" src="sky-3.jpg">
<img class="pic pic4" src="sky-1.jpg">
</div>
</html>
6、六边形图片(transform)
<!DOCTYPE html>
<html>
<style type="text/css">
*{margin: 0;padding: 0;}
.clear{clear: both;}
body{background: #fff;}
.container{margin: 100px auto;}
<!--show01的旋转角度设a，sin（a）=height/width -->
.con-show01{width: 250px;height: 250px;float: left;margin-left: 120px;overflow: hidden;transform:rotate(45deg);}
<!--show02的旋转角度：-（90+a） -->
.con-show02{width: 100%;height: 100%;overflow: hidden;transform:rotate(-135deg);}
<!--show03的旋转角度图片使摆正即可 -->
.con-show03{width: 100%;height: 100%;overflow: hidden;transform:rotate(90deg);position: relative;background: pink;}
.con-show03 > div{width: 100%;height: 100%;position: absolute;top: 0;left: 0;opacity: 0;line-height: 250px;text-align: center;color: #fff;cursor: pointer;background: url(../images/a.png);transition: opacity 0.3s;}
.con-show03:hover > div{opacity: 1;}
.margin-left{margin-left: 305px;}
.margin-top{margin-top: -70px;}
.con-show03>img{width:100%;height:100%;}
</style>
<section class="container">
<div class="con-show01">
<div class="con-show02">
<div class="con-show03 bg01">
<img src="sky-1.jpg">
<div>123</div>
</div>
</div>
</div>
<div class="con-show01">
<div class="con-show02">
<div class="con-show03 bg02">
<img src="sky-2.jpg">
<div>123</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="con-show01 margin-left margin-top" >
<div class="con-show02">
<div class="con-show03 bg04">
<img src="sky-3.jpg">
<div>123</div>
</div>
</div>
</div>
<div class="con-show01 margin-top">
<div class="con-show02">
<div class="con-show03">
<img src="sky-1.jpg">
<div>123</div>
</div>
</div>
</div>
</section>
</html>
7、点击左右图片手动轮播（需要jQuery包）
点击左边的图，三张图往右移；点击右边的图，三张图往左移；（写了两个这样的轮播）
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<style type="text/css">
div[class^="gsdtimg"]{
float:left;
width: 25%;
height: 150px;
overflow: hidden;
margin-right:2%;
}
div[class="gsdtimgtwo"]{
height:250px;
}
div[class^="gsdtimg"] img{
width:100%;
}
</style>
<div class = "1" >
<div class="gsdtimgone" id="gsdtimgone" onclick = "gsdtimgoneEvent(this,myimgs)">
<img id="oneimg" src="images_dl/gsdt1-2.JPG" alt="">
</div>
<div class="gsdtimgtwo" id="gsdtimgtwo" width="40%">
<img id="twoimg" src="images_dl/gsdt1-3.jpg" alt="">
</div>
<div class="gsdtimgthree" id="gsdtimgthree" onclick = "gsdtimgthreeEvent(this,myimgs)">
<img id="threeimg" src="images_dl/gsdt1-4.JPG" alt="">
</div>
</div>
<div class="clear" style="clear:both;"></div>
<div class = "1" >
<div class="gsdtimgone" id="gsdtimgone" onclick = "gsdtimgoneEvent(this,myimgs2)">
<img id="oneimg" src="images_dl/gsdt2-2.JPG" alt="">
</div>
<div class="gsdtimgtwo" id="gsdtimgtwo" width="40%">
<img id="twoimg" src="images_dl/gsdt2-3.JPG" alt="">
</div>
<div class="gsdtimgthree" id="gsdtimgthree" onclick = "gsdtimgthreeEvent(this,myimgs2)">
<img id="threeimg" src="images_dl/gsdt2-4.jpg" alt="">
</div>
</div>
<script>
//要求图片命名按照一定的格式
var myimgs=new Array("this is nothing","gsdt1-1.JPG","gsdt1-2.jpg","gsdt1-3.JPG","gsdt1-4.JPG")
var myimgs2=new Array("this is nothing","gsdt2-1.JPG","gsdt2-2.JPG","gsdt2-3.JPG","gsdt2-4.jpg")
//实现数字的循环
function realn(n){
if (n < 1 ){
n = 4;
}
if (n > 4 ){
n = 1;
}
else{
n = n;
}
return n;
}
//点击左边div，实现整体往右轮播
function gsdtimgoneEvent(oDivv,myimgs){
var oDiv = oDivv;
var selfimg1 = oDiv.children[0];
var selfimg2 = oDiv.parentNode.children[1].children[0];
var selfimg3 = oDiv.parentNode.children[2].children[0];
var src = selfimg1.getAttribute("src");
//获取被点击的时候是第几张图片
var m = src.charAt(16);
//字符转数字，下面需加减运算
n = parseInt(m);
n = realn(n);
selfimg1.setAttribute('src', 'images_dl/' + myimgs[realn(n - 1)] );
selfimg2.setAttribute('src', 'images_dl/' + myimgs[realn(n)] );
selfimg3.setAttribute('src', 'images_dl/' + myimgs[realn(n + 1)] );
};
//点击右边div，实现整体往左轮播
function gsdtimgthreeEvent(oDivv,myimgs){
var oDiv = oDivv;
var selfimg1 = oDiv.children[0];
var selfimg2 = oDiv.parentNode.children[1].children[0];
var selfimg3 = oDiv.parentNode.children[0].children[0];
var src = selfimg1.getAttribute("src");
var m = src.charAt(16);
n = parseInt(m);
n = realn(n);
selfimg1.setAttribute('src', 'images_dl/' + myimgs[realn(n + 1)] );
selfimg2.setAttribute('src', 'images_dl/' + myimgs[realn(n)] );
selfimg3.setAttribute('src', 'images_dl/' + myimgs[realn(n - 1)] );
};
</script>
</html>
4922
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
