美妆轮播图素材（js轮播图，按老师教过的内容作了一些，剩下的不会了，跪求大佬帮我写完，有素材和效果图）

本文目录

• js轮播图，按老师教过的内容作了一些，剩下的不会了，跪求大佬帮我写完，有素材和效果图
• 天猫首页轮播图怎么弄成5个

js轮播图，按老师教过的内容作了一些，剩下的不会了，跪求大佬帮我写完，有素材和效果图

html代码：
《div class="out"》
《!--轮播图--》
《ul class="img"》
《li》《a href="news.html"》《img src="img/suanmei.png"》《/a》《/li》
《li》《a href="news.html"》《img src="img/xiangcheng.png"》《/a》《/li》
《li》《a href="news.html"》《img src="img/lanmei.png"》《/a》《/li》
《li》《a href="news.html"》《img src="img/lizhi.png"》《/a》《/li》
《li》《a href="news.html"》《img src="img/new.png"》《/a》《/li》
《/ul》
《!--焦点--》
《ul class="num"》
《/ul》
《!--左右箭头--》
《div class="left btn"》《img src="img/left.png"/》《/div》
《div class="right btn"》《img src="img/right.png"/》《/div》
《/div》
样式：
.out {
width:400px;
height:300px;
margin:30px 0;
position:relative;
float: left;
}
.img li {
position:absolute;
top:0px;
left:0px;
display:none;
height: 320px;
width: 400px;
}
.img li img{
width: 100%;
height: 320px;
}
.out .num {
position:absolute;
bottom:0px;
left:0px;
font-size:0px;
text-align:center;
width:100%;
}
.num li {
width:20px;
height:20px;
background:none;
color:#666;
text-align:center;
line-height:20px;
display:inline-block;
font-size:16px;
border: 2px solid #666;
margin-right:10px;
cursor:pointer;
}
.out .btn {
position:absolute;
top:50%;
margin-top:-20px;
height:60px;
background:rgba(0,0,0,0);
color:#FFFFFF;
text-align:center;
line-height:60px;
font-size:40px;
display:none;
cursor:pointer;
}
.btn img{width: 50px;height: 40px;}
.out .num li.active-1 {
background:#666;
color: #fff;
}
.out:hover .btn {
display:block
}
.out .left {
left:0px;
}
.out .right {
right:0px;
}
js代码：
function showRestart(){
jQuery(’.restart’).fadeTo(300,1);
}
/** Restart demo **/
function restart(){
jQuery(’.restart,.fader’).css({’display’:’none’});
init();
}
$(function(){
//下方for循环
var size=$(".img li").size()
for(var i=1; i《=size; i++){
var li="《li》"+i+"《/li》";
$(".num").append(li)
}
/*size 获取当前元素个数*/
//手动控制轮播
$(".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().fadeIn(/*淡入*/).siblings().stop().fadeOut(/*淡出*/) /*eq 0开始*/
});
//自动控制轮播
var i=0;
var t=setInterval(move,3000) //定时器
//右
function move(){
i++;
if(i==size){i=0;}
$(".num li").eq(i).addClass(’active-1’).siblings(’li’).removeClass(’active-1’);
$(".img li").eq(i).fadeIn().siblings().fadeOut();
};
//左
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).fadeIn().siblings().fadeOut();
};
//自动轮播鼠标经过移入和移除
$(".out").hover(function(){
clearInterval(t)
},function(){
t=setInterval(move,3000)
});
//左右按钮
$(".out .left").click(function(){
moveL()
})
$(".out .right").click(function(){
move()
})
});

天猫首页轮播图怎么弄成5个

首先登陆淘宝网首页，输入淘宝账号密码进入卖家中心。在卖家中心中点击【店铺装修】。
然后在店铺装修页面，找到左侧基础模块中的【图片轮播】，鼠标左键按住它，将它拖动到右侧需要添加图片轮播的空白位置。
然后就可以看到添加的图片轮播模块，默认图片是白雪松树画面。
点击右上角的【】。
在内容设置里面，可以看到图片地址。那么，图片地址在哪里呢？需要特别注意，首先需要把图片轮播的图片素材放到店铺的图片空间里面哦。这是淘宝规则之一。
那么，我们回到当初的卖家中心，点击左边店铺管理里面的【图片空间】。
然后找到图片轮播素材图片，点击其中一个图片，右击选择【属性】。
将其中的地址复制。
然后在回到装修页面，将刚才复制的图片地址粘贴。
然后点击【保存】。
然后就可以看到保存后的效果了。