javascript实现切割轮播效果

2024-08-02 19:05:04

本文实例为大家分享了javascript实现切割轮播的具体代码，供大家参考，具体内容如下

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="js/jquery.min.js"></script>
 <style>

 .container{
  position: relative;
  width: 560px;
  height: 300px;
 }
 .container ul{
  /*transform-style:preserve-3d;*/
  /*transform: rotateX(-30deg) rotateY(21deg);*/
  width: 560px;
  height: 300px;
  border:2px solid red;
  list-style-type: none;
  margin:0;
  padding:0;
 }
 .container ul li{
  position: relative;
  float: left;
  /*一张图分作5片，图的总宽度是560*/
  width: 112px;
  height: 300px;
  transform-style:preserve-3d;
  transition:all 0.5s;
 }
 .container ul li span{
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%
 }
 /*以下4个选择器设定立体效果*/
 .container ul li span:nth-child(1){
  background: yellow;
  transform:translateZ(150px);
 }
 .container ul li span:nth-child(2){
  background: pink;
  transform:translateY(-150px) rotateX(90deg);
 }
 .container ul li span:nth-child(3){
  background: orange;
  transform:translateZ(-150px) rotateX(180deg);
 }
 .container ul li span:nth-child(4){
  background: blue;
  transform:translateY(150px) rotateX(270deg);
 }
 /*//以下4个选择器设定第n个span的背景图*/
 .container ul li span:nth-child(1){
  background: url(images/1.jpg);
 }
 .container ul li span:nth-child(2){
  background: url(images/2.jpg);
 }
 .container ul li span:nth-child(3){
  background: url(images/3.jpg);
 }
 .container ul li span:nth-child(4){
  background: url(images/4.jpg);
 }
 /*以下5个选择器用于设定第i个li的背景定位*/
 .container ul li:nth-child(1) span{
  background-position: 0px 0px;
 }
 .container ul li:nth-child(2) span{
  background-position: -112px 0px;
 }
 .container ul li:nth-child(3) span{
  background-position: -224px 0px;
 }
 .container ul li:nth-child(4) span{
  background-position: -336px 0px;
 }
 .container ul li:nth-child(5) span{
  background-position: -448px 0px;
 }

 /*.container ul li:nth-child(1) span:nth-child(1){
  background: url(images/1.jpg) 0px 0px;
 }
 .container ul li:nth-child(2) span:nth-child(1){
  background: url(images/1.jpg) -112px 0px;
 }
 .container ul li:nth-child(3) span:nth-child(1){
  background: url(images/1.jpg) -224px 0px;
 }
 .container ul li:nth-child(4) span:nth-child(1){
  background: url(images/1.jpg) -336px 0px;
 }
 .container ul li:nth-child(5) span:nth-child(1){
  background: url(images/1.jpg) -448px 0px;
 }

 .container ul li:nth-child(1) span:nth-child(2){
  background: url(images/2.jpg) 0px 0px;
 }
 .container ul li:nth-child(2) span:nth-child(2){
  background: url(images/2.jpg) -112px 0px;
 }*/

 .container span.left, .container span.right{
  position: absolute;
  top:50%;
  background: rgba(0,0,0,0.3);
  width: 18px;
  height: 40px;
  font-size:25px;
  font-weight: bold;
  color:white;
  text-align: center;
  line-height: 40px;
  cursor:pointer;
 }
 .container span.left{
  left:0;
 }
 .container span.right{
  right:0;
 }
 </style>
</head>
<body>
 <div class="container">
 <ul>
  <li>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </li>
  <li>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </li>
  <li>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </li>
  <li>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </li>
  <li>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </li>
 </ul>
 <span class="left"><</span>
 <span class="right">></span>
 </div>
</body>
</html>
<script>
 $(function(){
 var allowClick = true;
 var seq = 0; //代表初始的转动角度次数
 //先给这5个li的动画效果设置不同的延时（delay)
 //index表示循环中的索引号，item表示当前项（这里是li）
 $("ul>li").each(  function(index,item){
  var delay_time = index*0.25;
  $(item).css({"transition-delay": delay_time + "s"});
 } );

 //transitionend事件：动画结束事件
 $("ul>li:last-child").on('transitionend',function(){
  allowClick = true; //允许点击
 });

 //
 $("span.left").on('click',function(){
  //如果allowClick为false，表示此时还不允许点击，就直接退出
  if(allowClick == false){ return ;}

  allowClick = false; //如果可以继续下去，此时就会去执行动画，则此刻
    //就必须讲这个allowClick设定为false
  seq--;
  var angle = -seq*90;
  $("ul>li").css({"transform":"rotateX(" + angle + "deg)"});
 });
 $("span.right").on('click',function(){
  //如果allowClick为false，表示此时还不允许点击，就直接退出
  if(allowClick == false){ return ;}
  allowClick = false;
  seq++;
  var angle = -seq*90;
  $("ul>li").css({"transform":"rotateX(" + angle + "deg)"});
 });
 });
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

原生js和jquery实现图片轮播特效

(1)首先是页面的结构部分对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div
js实现支持手机滑动切换的轮播图片效果实例

本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu
js图片自动轮播代码分享(js图片轮播)

1.利用图片width显示位置来播放图片,技术:.offsetWidth .aBtn[i].index = i .setInterval() .oUl[0].style.left = .onclick()2.利用数组放入图片经行轮播,技术:setInterval().没有onclick() 图片轮播12js.html 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:
js图片轮播效果实现代码

首先给大家看一看js图片轮播效果,如下图具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去三.定义图片切换函数提示: 1.遍历所有放数字索引的li,将每个li上的类去掉. 2.根据传递过来的index值找到对应的li给
原生js实现轮播图的示例代码

很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea
js实现轮播图的完整代码

今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner">
带左右箭头图片轮播的JS代码

轮播图实现效果见下图,图片能自己轮播,点击左右按钮进行翻页轮播,鼠标悬停图片或者标题上,停止轮播: 效果图为: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/19
JS实现简易图片轮播效果的方法

本文实例讲述了JS实现简易图片轮播效果的方法.分享给大家供大家参考.具体如下: 这里使用JS制作简易图片轮播效果: 制作比较粗糙,使用的图片是width:660ppx,height:550px; 效果图如下: 代码部分如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; char
最简单的JavaScript图片轮播代码(两种方法)

通过改变每个图片的opacity属性: 素材图片: 代码一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: ; padding: ; } ul { list-style-type: non
js 图片轮播(5张图片)

演示地址:http://img.jb51.net/online/picPlayer/picplay.htm 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199

javascript实现切割轮播效果

相关推荐

随机推荐