Products
GG网络技术分享 2025-03-18 16:13 0
今天，我们希望与您分享一个简单的圆形内容旋转木马。这个想法是有一些内容框，我们可以无限地滑动（循环）。当点击“更多”链接时，相应的项目向左移动，内容区域将滑出。现在我们可以通过传送带导航，每个步骤都会显示下一个或上一个内容框，并显示其内容。点击关闭的十字会将展开的内容区域滑回原处，并将项目动画化为其原始位置
今天，我们希望与您分享一个简单的圆形内容旋转木马。这个想法是有一些内容框，我们可以无限地滑动（循环）。当点击“更多”链接时，相应的项目向左移动，内容区域将滑出。现在我们可以通过传送带导航，每个步骤都会显示下一个或上一个内容框，并显示其内容。点击十字十字会将展开后的内容区域滑回原处，并将项目动画化到原始位置。
在ZIP文件中设置的美丽的动物图标是由Cyberella和他们根据署名 - 非商业性NoDerivs 3.0 Unported（CC BY-NC-ND 3.0）许可证授权。
HTML结构
这个结构由一个主容器和一个包装物组成。每个项目包含
<div id=\"ca-container\" class=\"ca-container\">
<div class=\"ca-wrapper\">
<div class=\"ca-item ca-item-1\">
<div class=\"ca-item-main\">
<div class=\"ca-icon\"></div>
<h3>Stop factory farming</h3>
<h4>
<span class=\"ca-quote\">“</span>
<span>Some text...</span>
</h4>
<a href=\"#\" class=\"ca-more\">more...</a>
</div>
<div class=\"ca-content-wrapper\">
<div class=\"ca-content\">
<h6>Animals are not commodities</h6>
<a href=\"#\" class=\"ca-close\">close</a>
<div class=\"ca-content-text\">
<p>Some more text...</p>
</div>
<ul>
<li><a href=\"#\">Read more</a></li>
<li><a href=\"#\">Share this</a></li>
<li><a href=\"#\">Become a member</a></li>
<li><a href=\"#\">Donate</a></li>
</ul>
</div>
</div>
</div>
<div class=\"ca-item ca-item-2\">
...</div>
...</div><!-- ca-wrapper --></div><!-- ca-container -->
内容轮播的初始视图：
当我们点击“更多...”时，另一个内容区域将滑出并将相应的项目移动到左侧：
默认选项如下：
$（\'＃ca-container\'）.contentcarousel（{ //滑动动画的速度
sliderSpeed：500， //缓动滑动动画
sliderEasing：\'easeOutExpo\'， //动画的速度（打开/关闭）
itemSpeed ：500， //缓动项目动画（打开/关闭）
itemEasing：\'easeOutExpo\'， // 每次滚动的项目数量
滚动：1}）;我们希望你喜欢这个简单的旋转木马，发现它有用！
如何实现木马轮播图效果呢？今天小编为你分享一个JavaScript教程，首先，我们来看一下木马轮播图效果：
具体代码如下：
html部分代码：
<!DOCTYPE html><html>
<head>
<meta charset=\"UTF-8\">
<title>旋转木马轮播图</title>
<link rel=\"stylesheet\" href=\"css/myStyle.css\" rel=\"external nofollow\" />
<script type=\"text/javascript\" src=\"js/animate.js\"></script>
<script type=\"text/javascript\" src=\"js/my.js\"></script>
</head>
<body>
<div id=\"wrap\">
<div id=\"slide\">
<ul>
<li><a href=\"#\"><img src=\"images/slidepic1.jpg\" alt=\"\"/></a></li>
<li><a href=\"#\"><img src=\"images/slidepic2.jpg\" alt=\"\"/></a></li>
<li><a href=\"#\"><img src=\"images/slidepic3.jpg\" alt=\"\"/></a></li>
<li><a href=\"#\"><img src=\"images/slidepic4.jpg\" alt=\"\"/></a></li>
<li><a href=\"#\"><img src=\"images/slidepic5.jpg\" alt=\"\"/></a></li>
</ul>
<div id=\"arrow\">
<a href=\"javascript:;\" id=\"arrLeft\"></a>
<a href=\"javascript:;\" id=\"arrRight\"></a>
</div>
</div>
</div>
</body>
</html>
在html部分引入的myStyle.css文件部分代码
@charset \"UTF-8\";blockquote,body,button,dd,dl,dt,fieldset,form,h1,h3,h3,h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{
margin:0;
padding:0
}
body,button,input,select,textarea{
font:12px/1.5 \"Microsoft YaHei\", \"微软雅黑\", SimSun, \"宋体\", sans-serif;
color:#666;
}
ol,ul{
list-style:none
}
a{
text-decoration:none
}
fieldset,img{
border:0;
vertical-align:top;
}
a,input,button,select,textarea{
outline:none
}
a,button{
cursor:pointer
}
.wrap{
width:1200px;
margin:100px auto;
}
.slide{
height:500px;
position: relative;
}
.slide li{
position:absolute;
left:200px;
top:0
}
.slide li img{
width:100%
}
.arrow{
opacity:0;
}
.prev ,.next{
width:76px;
height:112px;
position:absolute;
top:50%;
margin-top:-56px;
background:url(../images/prev.png) no-repeat;
z-index:99;
}
.next{
right:0;
background-image:url(../images/next.png);
}
在html部分引入的myStyle.css文件部分代码
/*** Created by RENPINGSHENG on 2018/4/6.
*/
function animate(obj,json,fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true;
for(var k in json){
if( k == \"opacity\"){
var leader = getStyle(obj,k) * 100;
var target = json[k] * 100;
var step = (target - leader) /10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style[k] = leader /100;
} else if ( k == \"zIndex\"){
obj.style[k] = json[k];
}else{
var leader = parseInt(getStyle(obj,k)) || 0;
var target = json[k];
var step = (target - leader) /10;
step = step >0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style[k] = leader + \"px\";
}
console.log(\"target:\" + target + \"leader:\" + leader + \"step:\" + step);
if (leader != target){
flag = false;
}
}
if (flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},15)
}
function getStyle(obj,attr){
if (obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,null)[attr];
}
}
在html部分引入的my.js文件部分代码
/*** Created by RENPINGSHENG on 2018/4/6.
*/
window.onload = function () {
var wrap = document.getElementById(\"wrap\");
var slide = document.getElementById(\"slide\");
var ul = slide.children[0];
var lis = ul.children;
var arrow = document.getElementById(\"arrow\");
var arrRight = document.getElementById(\"arrRight\");
var arrLeft = document.getElementById(\"arrLeft\");
var config = [
{
width:400,
top:20,
left:50,
opacity:0.2,
zIndex:2
},
{
width:600,
top:70,
left:0,
opacity:0.8,
zIndex:3
},
{
width:800,
top:100,
left:200,
opacity:1,
zIndex:4
},
{
width:600,
top:70,
left:600,
opacity:0.8,
zIndex:3
},
{
width:400,
top:20,
left:750,
opacity:0.2,
zIndex:2
}
];
wrap.onmouseover = function () {
animate(arrow,{\"opacity\":1});
}
wrap.onmouseout = function () {
animate(arrow,{\"opacity\":0});
}
function assign() {
for(var i = 0;i < lis.length;i++){
animate(lis[i],config[i],function(){
flag = true;
})
}
}
var flag = true;
assign();
arrRight.onclick = function () {
flag = false;
config.push(config.shift());
assign();
};
arrLeft.onclick = function () {
flag = false;
config.unshift(config.pop());
assign();
}
}
整个页面的文件结构如下图所示：
以上就是实现木马轮播图效果的JavaScript教程，感兴趣的朋友可以尝试一下。
Demand feedback
