代码如下：
<div class="box J_TBox" >
<div class="shop-slider">
<div class="bd">
<div class="slider-promo J_Slider J_TWidget" data-type="scroll" data-widget-type="Slide" style="height:400px;" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}">
<ul class="lst-main">
<li><a href="连接地址1" ><img src=">
静态获取写法，给定的个数，用js实现轮播图自动转换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 设置样式 -->
<style type="text/css">
show_div{
width: 400px;
height: 400px;
margin: 0 auto;
border: 2px solid block;
overflow: hidden;
}
scroll_div{
width: 2000px;
height: 400px;
}
scroll_div img{
width: 400px;
height: 400px;
float: left;
}
</style>
<!-- end -->
</head>
<body>
<div class="show_div">
<div class="scroll_div">
<img src="img/bjpg" alt="">
<img src="img/cjpg" alt="">
<img src="img/djpg" alt="">
<img src="img/ajpg" alt="">
<img src="img/bjpg" alt="">
</div>
</div>
</body>
<!-- js代码 -->
<script type="text/javascript">
var scrollDiv = documentgetElementsByClassName("scroll_div")[0];
// 定义初始值
var left =0;
// 定义一个定时器 走一步
function move(){
var timer = setInterval(function(){
left --;
if (left <= -1600) {
left = 0;
}
if (left % -400 == 0) {
clearInterval(timer);
timer = null;
}
scrollDivstylemarginLeft = left + "px";
},10);
}
// 定义一个定时器 每隔固定时间 走一张
setInterval(function(){
move();
},5000);
</script>
</html>
function getStyle(obj,name){2 if(objcurrentStyle){
3 return objcurrentStyle[name];
4 } else{
5 return getComputedStyle(obj,false)[name];
6 }
7 }
8
9 function startMove(obj, json, fnEnd) {
10 clearInterval(objtimer);
11 objtimer = setInterval(function() {
12 var bStop = true;
13 for (var attr in json) {
14 var cur = 0;
15 if (attr == "opacity") {
16 cur = Mathround(parseFloat(getStyle(obj, attr)) 100);
17 } else {
18 cur = parseInt(getStyle(obj, attr))
19 }
20 var speed = (json[attr] - cur) / 10;
21 speed = speed > 0 Mathceil(speed) : Mathfloor(speed);
22 if (cur !== json[attr]) {
23 bStop = false;
24 };
25 if (attr == "opacity") {
26 objstyleopacity = (speed + cur) / 100;
27 objstylefilter = 'alpha(opacity:' + (speed + cur) + ')';
28 } else {
29 objstyle[attr] = cur + speed + 'px';
30 }
31 }
32 if (bStop) {
33 clearInterval(objtimer);
34 if (fnEnd) fnEnd();
35 }
36 }, 30)
37 }
然后写轮播小案例
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>淘宝轮播</title>
7 <style>
8 ul,
9 li {
10 list-style: none;
11 margin: 0;
12 padding: 0;
13 }
14
15 #wrap {
16 width: 400px;
17 height: 225px;
18 margin: 0 auto;
19 position: relative;
20 overflow: hidden;
21 }
22
23 li {
24 float: left;
25 }
26
27 #tips li {
28 margin: 5px;
29 border: 1px solid #f60;
30 width: 20px;
31 height: 20px;
32 line-height: 20px;
33 text-align: center;
34 color: white;
35 cursor: pointer;
36 }
37
38 active {
39 background: #f60;
40 }
41
42 img {
43 vertical-align: top;
44 width: 400px;
45 }
46
47 #content {
48 width: 2400px;
49 position: absolute;
50 left: -1200px;
51 }
52
53 #content li {
54 float: left;
55 }
56
57 #tips {
58 position: absolute;
59 right: 20px;
60 bottom: 5px;
61 }
62 </style>
63 </head>
64
65 <body>
66 <div id="wrap">
67 <ul id="content">
68 <li><img src="img3/1jpg" alt=""></li>
69 <li><img src="img3/2jpg" alt=""></li>
70 <li><img src="img3/3jpg" alt=""></li>
71 <li><img src="img3/4jpg" alt=""></li>
72 <li><img src="img3/5jpg" alt=""></li>
73 <li><img src="img3/6jpg" alt=""></li>
74 </ul>
75 <ul id="tips">
76 <li>1</li>
77 <li>2</li>
78 <li>3</li>
79 <li>4</li>
80 <li>5</li>
81 </ul>
82 </div>
83 <script src="movejs"></script>
84 <script>
85 var wrap = documentgetElementById('wrap');
86 var content = documentgetElementById('content');
87 var tips = documentgetElementById('tips');
88 var aLi = tipsgetElementsByTagName('li');
89 var now = 0;
90 //var
91 for (var i = 0; i < aLilength; i++) {
92 aLi[0]className = 'active'; //把初始状态定义好
93 contentstyleleft = 0 +'px';
94 aLi[i]index = i; //自定义属性
95 aLi[i]onclick = function() {
96 now = thisindex;
97 play();
98 }
99 }
100
101 function play() {
102 for (var j = 0; j < aLilength; j++) {
103 aLi[j]className = '';
104 }
105 aLi[now]className = 'active';
106
107 //thisindex = now; //反过来写就不对了大兄弟
108 //contentstyleleft = -400 thisindex + 'px';
109 startMove(content, {
110 left: -400 now, //你还真别说，json格式就是这么写的
111 });
112 }
113
114 function autoPlay() {
115 now++;
116 if (now == aLilength) {
117 now = 0;
118 }
119 play();
120 }
121
122 var timer = setInterval(autoPlay, 2000);
123 wraponmouseover = function(){ //这里如果把事件绑定到ul上的话，那么鼠标移入，下面对饮的li会不起作用，
124 clearInterval(timer); //因为li的层级比较高，所以应该把事件绑定到大的div上
125 }
126 wraponmouseout = function(){
127 timer = setInterval(autoPlay,2000);
128 //setInterval(autoPlay,2000); 不能这么写，凡是开的定时器，必须得赋值，要不然总会多开一个定时器，导致速度加快
129 }
130 </script>
131 </body>
132
133 </html>
你这个问题问的好大。
1、响应式布局：
media选择器。根据宽度通过样式控制页面布局
直接使用样式百分比来控制。
通过js监控页面宽度，然后通过js手动去控制页面布局，显示元素或者隐藏元素，设置某些元素宽高之类的。
2、鼠标滚动：常用 mousewheel 事件，滚动事件
3、动画效果 ：可以选择css3的动画，或者js自己写动画
综上所述：你需要通过 2的事件来控制1，不过1的样式中要加入动画样式（3）。大功告成
chm里都是方式方法。也有现成效果<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta >可以上jquery插件库这个网站看看，大部分资源是免费的。轮播图也有好多。
bootstrap也提供轮播模板。
自己写的话，假如放3张轮播图，pic1，pic2，pic3。创建一个ul，ul中放5张，顺序是pic3，pic1，pic2，pic3，pic1，这样衔接起来。设置ul的宽度是500%，li的宽度是20%，这样就能一字排开，设置ul的父元素的样式为overflow:hidden;再用CSS3的动画属性，让li中的元素位移或者让ul位移。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）